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.
Related
I use a specific font for an SVG on my website (I use font-face to import it) and when I display that svg in Chrome and Firefox, it displays the right font. However, in safari it doesn't - I can still use the font in general HTML (like p tags) in Safari but it don't display within the SVG.
Any ideas why this is happening?
Update:
I know added the font-face directly to the svg. If I open the url for the svg image, it displays with the correct font, but, if I open the webpage with the svg embedded, it doesn't seem to show the correct font.... Any ideas?
Update (19/7/21): I found that even by targeting the SVG path directly there was no way to change the background colour that I could find. I ended up just using a PNG. I will leave this thread unanswered just in case anyone finds the solution.
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
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.
When page of my application is loaded font in some html tags is default one and when you mouse over it, proper font immediately shows. I made a list of things that probably matters:
Position of element doesn't matter, it occurs on absolute and static.
Font of my choice if assigned to body tag so there is no way some stylesheets don't get loaded.
I load fonts via #import from fast.fonts.net. This line of code is almost on the top of my stylesheets, above is only reset.
I load my assets from s3, minified in one file.
It never occurs locally and the only browser that this bug was seen is Chrome.
It is rare bug, maybe 1% of all page refresh, so reproducing when you want to see it is difficult
Once I have seen this issue in bugsnag.com
App is heavy on front-end side
Do you have any ideas how I could fix it?
I discovered that injecting fonts via JS script tag and not css #import works best. After that client stopped reporting me this issue.
It's simple change and the reason why it works must be connected with some Chrome bug.
I've run into some SVG rendering bugs in all browsers except Chrome. The SVGs are all embedded in the HTML file, which is supported by all current browsers. However, most browsers get the colors wrong (which are just standard hex colors), while others fail to render some at all (and others just fine). Here's the source file and screenshots: http://awesomegeek.com/bugreport/bugreport.zip See for yourself and let me know if you can replicate it or come up with a solution.
I'm afraid your html file is invalid. You've got multiple elements with the same id e.g. linearGradient id="a". I know they occur in different svg fragments but you still can't do that, all Ids must be globally unique in the file. I think Firefox is drawing the icons correctly by picking out the first one of these in the file as a whole.