Firefox won't display the SVG book covers properly ...
http://new.images.hindawi.org/kalimat/covers/svg/270x360/c/24972860.svg
Compare the link above in Firefox and Chrome.
It used to be displayed just fine in Firefox, but I think something went wrong with the latest update.
If any one know a solution to this issue it would be great.
Thanks.
If you check your browser inspector, than you will see an error:
There is an SVG reference chain which is too long in this
document, which will prevent the document rendering correctly.
Inside your SVG image there are many of them, looking like:
<path clip-path="url(#SVGID_68_)" fill="#FFFFFF" d="..." />
Either create less accurate SVG (less details), or create it some other way.
Since it is rendered well in webkit browsers, than maybe you can use wkhtmltoimage to convert it server side to PNG or JPG.
Related
I worked on this project a couple of months ago and it worked fine. I open it up today and the SVG images are not showing on chrome. It does show in other browsers though. This is how I’m using them.
<svg>
<use xlink:href=“img/sprite.svg#icon-user”></use>
</svg>
You state it's visible in one browser but not another, so that indicates that the image is where it should be. Is there any possibility of any CSS affecting "icon-user"?
Which browser works and which doesn't? Having more detail may help lead to an answer for you.
Your code looks fine. Although you could shorten <use> with self closing tag:
<svg>
<use xlink:href=“img/sprite.svg#icon-user”/>
</svg>
Could it be that your image was moved/deleted/renamed and other browsers are just caching it?
I had a similar issue, and it was caused by symbol id duplicated in sprite.svg
It was reproducible only when chrome loading svg file from disk cache.
More details in related PR
Make sure you don't have any duplicate ids, even if it's not an icon-user.
When I try to show .svg files as an image, Chrome would not show it when I tried to write it like this:
<img src='/images/shape.svg'>
I found that .svg is often not rendered well by Google Chrome, but you could use <object> instead (found that here).
Now the <object>-tag is working for me on all cases and pages, but this one. I don't know why, but something makes my images/objects shift up and down inside its own container. As you can see on this inspector here.
!! the <svg> and the <object> on the right image are the same height in the inspector
UPDATE: also, it is not always the right one that renders and the rest not. It is literally completely random. Sometimes 1 and 4 render correct, sometimes only 3, sometimes none, ...
I have put my code in this fiddle
Thanks for any help on this
I've created a SVG using Inkscape. Now, I've uploaded it to my page and it shows different in different browsers but I don't know what's the issue.
Firefox: The best render
Chrome: Fails on the left side
For at least, I want that Chrome render equals quality of Firefox render but I don't know how?
SVG File: https://github.com/AdrianArroyoCalle/adrianarroyocalle.github.io/blob/master/city.svg
Web: http://adrianarroyocalle.github.io
Also mention that if I open the SVG with Chrome without an HTML page, it shows like Firefox, but reduced.
I embed a svg like: <img src="http://example.com/path/to/picture.svg" />
Displays fine in IE, but does not render in Chrome (Version 34.0.1847.131)
However, if I then load http://example.com/path/to/picture.svg
directly, it renders fine- and strangly reloading the original page then does display the graphic.
Using renders the first time around, but since I am using these for links... would be best if can work
This seemed to be a bug in chrome when using SVGs with embedded bitmap data. Using pure vector-based SVGs works fine
I'm having a SVG file that's around 6300 lines long. Opening this file as .svg in Chrome works just fine. But as soon as I use it inline in an HTML file via the <object> tag only half the elements are drawn.
With Chrome's "analyze element" option I see, that the source for the embedded SVG is cut off.
I also tried Firefox, but here the SVG is as empty as before, with the only difference, that the missing elements are drawn underneath in strange positions.
If I open the SVG as external data via <object data=""> it works fine, but that is not a viable option, since my scripts are not properly working that way.
Because the SVG contains confidential data I can't link it here. I hope someone can help me.
Are you sure there is not a parsing problem with the file that is only happening when it is inlined? SVG renderers will generally stop rendering when they encounter the problem.
I would start by trying to locate the element it stops at. Then look for any oddities.