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.
Related
Strange bug I fixed once in the past but did not write it down/document it/report it so now I'm lost in the same workframe.
So, it's an Angular 2 app, the content is hardcoded html, no Angular binded variables, data banding or similar.
The bug show up on Chrome, not on Firefox.
If I refresh 10 times in a row, the content will show up sometimes and won't others, there is no pattern or clues about it.
Once the content is hidden, if i change whatever element property, will show up all the content instantly.
I have attached a gif which explains the bug clearly.
Thanks for any idea/suggestion/help :)
EDIT 1:
I just added 2 pictures of the css computed, one with Bootstrap 4 and other without the framework, same result.
Not related at all to Angular or any stuff like that.
I am importing a font from the GoogleFonts page. If I download this font, I get TTF format, which is having a bug on Chrome and does not work properly, but if I link to their server, it's using WOFF2 format.
See this picture attached which it shows the different formats for the same font.
My goal: print an SVG to a single page (any paper size) full size from html page in Chrome (Electron).
I'm struggling to achieve this goal, here's my story:
I've generated an SVG that has text in it that should be displayed with a particular font. This is a custom font that I included with css (using Font Squirrel) and is also used for text in the website. When I display the SVG in my website inline the font renders fine.
Inline means it is an element that is part of the dom that you can inspect. Problem with this is that you can't really change the width style without having to rerender the svg. Since I want to print it it would be nice to be able to do just 'width=100%'.
To do this I serialized the SVG to a dataURL and used an and set its src to the dataURL. Now I can set the width like I want. However: the custom fonts don't work anymore!
So I saved the SVG img to file to edit it. Apparently you can include css in the SVG so that's what I did. Then when you open the file directly in browser it works right again. However when you open it in an IMG in a web page the fonts don't work anymore.
Next I tried copying svg fonts directly into the file ( glyph stuff...). Yes this works! Oh, no it doesn't, just in Safari not in Chrome, darn.
For now I'm considering to just rasterize it but that's no neat solution of course.
As you can understand I'm getting a bit frustrated here. Can anyone give me an insight in the SVG font issue or do you have any tips regarding the printing?
Okay I found a solution.
It turns out that files referenced in an IMG element cannot include any outside files for security reasons. So that's why referencing CSS in SVG doesn't work when showing it as IMG.
Also Chrome dropped support for SVG fonts. So even is you copy/paste SVG glyph data inside an SVG image it still doesn't work (really stupid). In Safari this works though.
So you need to reference WOFF font in css as a dataURL (base64). I did try this before but apparently I did something wrong. I tried it again and it works :).
I used FontSquirrel to generate this and I also subsetted the font there to only include the characters I actually need to save space.
It's not very efficient of course having to copy a font instead of referencing, but I can live with that.
The simplest solution is to just not have any "text" in your SVG by converting your text to SVG paths.
You can do this in Inkscape by selecting your text and then going to Path->Object to Path. Then save or export everything into a new file, clear your browser cache, refresh, and now you should see your text.
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.
I have a top layer with a transparent background image set and would like all pointer events to be ignored. So originally I had this set up with <div style="pointer-events"></div> which worked great, but then I find out that IE doesn't support this.
Further reading I find several places that says IE does support <svg> with pointer-events:none, but I can't get it to work (I've never used SVG tags before so I could be doing this all wrong).
Please see this very simplified fiddle of what I'm hoping to achieve. http://jsfiddle.net/AGVTM/
The root (top most) <svg> element will not support pointer-events: none. The reason behind this is that it's a possible security exploit, you could cover a Facebook Like button with an SVG and let clicks go through as in this example http://jsfiddle.net/rVxTn/
If the SVG element is not root then clicks should go through. This example should work on IE9 (untested)
http://jsfiddle.net/DLEsn/
However, this doesn't solve your problem, because you cant put HTML elements inside the SVG element.
I've encountered this problem multiple times before, I've had to work around it in different ways. I'd suggest you to open a new question with the actual problem (and possibly screenshots) to see how this can be worked around.
Root cause
Absolutely positioned SVGs will not propagate clicks through to HTML elements in IE9.
See this webkit test case discussion: REGRESSION(r66731): pointer-events are broken in some cases, and the corresponding minimal test case. Meaning, interestingly, this bug almost made it in to WebKit, too, but got fixed in time.
In IE 9's case, the results:
IE 9.0.8112.16421 = fails test 1: floating; passes test 2: inline
Workarounds
See this StackOverflow post on simulating pointer-events: none—How to make Internet Explorer emulate pointer-events:none?
They are discussing non-SVG front elements in particular, but the technique of forwarding clicks through to the underlying elements may apply in your case as well.
I have a website that I am working on: http://keramed.com
in FireFox on my Mac the image on the main page shows up. (The Endoshield DSEK Graft Injector)
Now check in Safari and the image does not show up.
I have tried taking the original .PSD and saving it as a .jpg or .png and it does not matter.
I have commented out all stylesheets and this still does not solve it. The rest of my images are showing up, just not thing one.
I just dont understand I am stumped.
EDIT:> Photoshop says it is an RGB 8-bit image.
Your image isn't showing up in Chromium either. However, taking out the image width and height specified on the image element as percentages has fixed the problem. It is better to avoid using percentages as widths/heights for images as they may not render as well as you'd expect.
It's definitely not the image, as safari can render it, see: http://keramed.com/images/mainimage2.jpg
You are having over-flow: hidden, somewhere and I suspect it's that. Or if you are using js to change the display of the image from none to be shown, that might be failing.
I have had the same problem which I solved changing height/width in pixels rather than percentage.
Another reason for browsers do not display the image — 'content' parameter in stylesheets that are associated with the image.
For example, I faced with the same problem some time ago and it happened because into the stylesheet the class used for the image had 'content' parameter.
.image_class {
...
content: ''
}