Using Polymer.js, I'm trying to use:
<template>
<svg>
<use xlink:href="file.svg#my-id"/>
</svg>
</template>
and chrome will not load svg file when this code is inside polymer template tag. Same code works fine outside template tag. Firefox renders fine inside and outside polymer tag so it's only chrome and potentially only chrome 35.
Complete Example http://jsbin.com/dukiv/2/edit
I've searched internet for reported issues and found some issues reported against dart but nothing for Polymer.js. If this is a known issue, is there a workaround or issue I can track against?
This was a bug in Chrome 35 when native ShadowDOM was enabled: https://code.google.com/p/chromium/issues/detail?id=356891.
It is fixed in Chrome 36
Related
I am facing an issue with "picture" element in React, particularly with safari browser.
Safari is always fetching image from "img" element src along with the image from appropriate "source" element based on media attribute.
This seem to work fine in other browsers(chrome & firefox).
I created a codesandbox for the same.
Would appreciate any help. Thanks in advance.
FYI: I tried with picturefill polyfill too. But no help. So, thought it is something to do with react + safari engine combo.
For what is it worth, I have narrowed my issue with this on Safari:
Seems to work with a vanilla element but when I have an HTML custom element and create the picture tag within the InnerHTML of a template (document.createElement("template").
I am using Vanilla JS not React but perhaps it is doing something similar under the covers.
I tried with and without specifying a "type" attribute on the but no effect.
Works fine on Chrome.
Safari version is Version 14.0.3 (16610.4.3.1.7)
Perhaps you forgot type attribute of source element. It was the problem in my case.
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.
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.
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 have a HTML file with inline SVG, which in turn refers to SVG elements in external SVG file with library elements. It uses a <use> elements with xlink:href="Library.svg#libraryShapeID". It works as a breeze in Opera and Firefox, but doesn't work in Safari. I've made a simple test file here:
http://sasq.comyr.com/Stuff/SVG/test01.html
Is it some browser bug or am I doing something wrong?
How should I rewrite it to make it work in Safari too?
There was a bug about this on Webkit but it has been fixed for the Version: 420+ BUT the bug for Fragment identifier is still not solved.
Someone gave an answer: Importing external SVG (with WebKit) using XMLHttpRequest. Quite unfortunate but in the meantime, I guess working.
I realize that this is an old question. But as this method of using SVGs has become more popular these days, I wrote a polyfill to make this technique work in browsers that fail to load the external SVG by default. At the time of writing this, IE9+ doesn't support referencing external SVGs in use elements. The polyfill that I wrote is quite simple and lightweight; it detects whether the SVG has failed to load and if so, sends a GET request to fetch it. It will then prepend it to body.
I hope you find it useful. I would appreciate any feedback.