I have trouble figuring out an issue I've been having with svg->font conversion.
Using Inkscape, I created a new svg (dimensions - 1000x1000) that has a shape star using the draw tool in the rectangular path create mode.
The path I used to create is this:
bottom left -> top center -> bottom right -> left top -> right top -> left top
Here's the created file: star.svg. There's no issue with this file so far.
Now, I've used fontcustom to compile this svg into a font, and you can look at the generated preview here.
This preview looks differently in Safari vs Chrome (or Firefox or Opera). But there's a filled area in all of them. You can check the preview link yourself, or here's the screenshots of how it looks:
Chrome:
Safari:
Why's this fill area coming in the first place? Why is it different in browsers?
A bit of context:
The actual issue is much bigger. I've a set of svgs created by someone in Adobe Illustrator, some of which are glitchy in similar fashion (unwanted fill) in chrome and other browsers. Safari and webkit2png somehow render the svg fonts correctly. So I tried to recreate the process in above mentioned steps.
More context:
I've also used icomoon app which many suggested, and it just gives blank glyphs for some reason.
In almost all cases, font glyphs are composed of filled shapes. They don't use the stroke (line). So when your SVGs are being converted to a font, the font SVGs are getting a fill applied, even if they didn't have one before.
The differences between browsers is probably explained by the fact that each browser may be loading a different generated font type. Eg. woff vs TTF etc.
The fix is to design your SVGs so that they only use filled shapes and don't rely on strokes (ie. line colour, width etc). If you follow the following rules, your glyphs should always work when converted:
Keep your line colour as "none" or "transparent",
Never use any fill colour except black (ie. don't use "white" to make holes)
Never let shapes cross over themselves or other shapes.
So, for example, in the case of your star, it should be designed as a filled star shaped object with a star shaped hole in it.
Related
This is less of asking for code solution, but more of requesting an explanation of the unexpected code behavior.
When I use kable_styling on console, the table is displayed as expected: white background, black font.
However, when I run it within Rmd, the resulting table is white background and white font, that can only be seen if you highlight it.
I fixed this by simply adding table.attr = "style = \"color: black;\"", but can someone chime in why this strange behavior occur?
Thank you.
Seems to be that the RStudio theme you chose (under tools, global options, appearances) applies the theme (dark w/ white letters) to everything in the viewer pane, including your rendered table. If you switch the theme to something with darker letters, the output in the viewer pane will follow.
It's also addressed here: https://community.rstudio.com/t/using-dark-theme-with-preview/1891
Before this gets marked as a duplicate: we've already ensured the width and height are properly set. I'm phrasing it as invisible because although it takes up the correct space and is even loaded in with the correct dimensions on the image, the content of the image is empty in the website, network tab, and when viewing the SVG directly. Basically, the actual SVG is showing up invisible regardless of how we display it or view it.
We have an SVG we'd like to show on our site. It works perfectly in Chrome, Edge etc but not in Safari and Firefox. We originally thought it was an issue with how we were loading it, but going to the SVG file itself (i.e. ://xxx/image.svg) shows it as perfectly invisible. Moreover, it's being loaded in with the correct size and all, just with no actual content.
The other SVGs we're using all work, even though they're all from the same artboards, and exported the same way from Illustrator. Since it's exported from Illustrator it's hard for me to even read it let alone debug it for errors; I'd prefer not to change the SVG directly in case it needs to be modified in the future.
I'm wondering if there are any known issues that could cause an SVG to be invisible even when viewing it by itself.
SVG in question
There is a BackgroundImage input to the feGaussianBlur primitive in the filter0_b. I think this supposed to be BackgroundImageFix - which is defined in the previous primitive.
BackgroundImage is a special input which is not supported in any major browser. When Firefox encounters an invalid input like this, it won't display the filtered image. Chrome will usually ignore errors and carry on.
Safari is probably a different problem - filters can only be referenced after they've been defined (it's a bug) - so if you move that defs section directly beneath the SVG, it should work in Safari.
I have an issue where color is shown differently in FireFox, compared to Chrome and IE. And i have no idea how come.
What would you do in my situation to get the same color displayed in all the browsers?
See http://www.inoplay.dk/
The top v-sign background is another blue (in FireFox), compared to the rest of the header, even though i selected exact same color in photoshop.
I have limited possibilities to edit the theme/template in PrestaShop, so simple CSS solution all i can do.
Any suggestions is greatly appreciated.
There are a few things that affect how these images render against HTML hex color codes.
It could vary whether or not each browser is using hardware acceleration which would affect how colors are rendered
The compression of the JPEG can sometimes cause color shifting
Make sure all your web images are in RGB color space/profile
SUGGESTION: the easiest way to get around this is to create your menu element as .PNG - PNG allows you to have a transparent background. This way you won't need to try to match the blue with code. It will just be transparent.
https://en.wikipedia.org/wiki/Portable_Network_Graphics
Try saving the image in jpg format. i hope it should solve the issue
We have done a visualization, mostly in D3 and we would like to generate a nice pdf of it to benefit from vector rendering rather than doing a mere screenshot.
It can be seen at:
http://www.bonneel.com/prot/prot2/
I also saw Sergiy's tutorial on producing pdfs out of D3 visualizations. However, his technique works if there is a single svg element (and I didn't manage to extend it to the multiple views we have), and actually produces a strange output in our case
See below for a screenshot of what it produces : the grey background is outside of the clipping area, and is just shown to illustrate that in addition to the view being incorrectly black (and doesn't show the entire visualization), it also extends outside of the clipping area with strange artifacts.
I understand that some elements might not be possibly converted to vector graphics (e.g., the 3D view), but having a screenshot that is mostly vector graphics would be nice (e.g., all the div elements that contain SVG shall be represented in vector format, and only the 3D view rasterized).
Any idea ?
Hopefully the SVG Crowbar can help you. I've used it before and it picks up most of the styles, though you have to read the warnings at the bottom.
Once you have your SVG image (with styles!) you should be able to open in Fireworks or Illustrator and export to vector PDF.
I'm creating an interactive d3 application that has one part of an interface that is very similar to Bostock's focus/context brushing example:
http://bl.ocks.org/mbostock/1667367
Everything is working fine so far, but here's what I want to do. I want to take the context region (bottom chart) and gaussian blur the regions on the brush background (and the svg chart path and x axis behind it) that are not selected by the brush extent. Basically, I'm trying to produce an effect similar to this:
http://bl.ocks.org/mbostock/4349545
but since my chart is a path rather than a bunch of little circles, I can't simply change the path class for the region that is selected.
My solution was to draw a couple of rectangles to the left and right of the brush extent, and to style those rectangles with fill-opacity, etc, which creates a "de-emphasized" effect similar to that brush handles example.
However, for true gaussian blur, it seems trickier. I can do an SVG filter on the regions themselves, but that just blurs the edge of the rectangles (it doesn't apply a blur effect to everything that is visible through them). My next solution was to try and get the BackgroundImage from the canvas and blur that, something like what what you see here:
http://www.w3.org/TR/SVG/filters.html#AccessingBackgroundImage
But for the life of me, I can't make it work. Is BackgroundImage supported from the browser? Do I need to tell d3 to re-call some of my page elements to repaint the svg elements (since they are dynamically loaded) inside of my brush callback? Is there another way altogether to do this?
Background image is only supported in IE10 and Opera - so what you're doing will work in Windows 8! The obvious workaround is to pull in the original background objects to the filter via feImage. This works in IE10, Opera and Webkit, but IE10+Opera treats the x,y coordinates supplied to feImage for internal content references differently than Webkit.
The next level workaround is to do the entire overlayer in filter effects, and set the filter on the content group. That's perfectly possible (but it might be a bit complicated to make it work in d3)
For some inspiration: http://codepen.io/mullany/pen/mnBqK