jonathantneal / svg4everybody Goto Github PK
View Code? Open in Web Editor NEWUse external SVG spritemaps today
Home Page: https://jonneal.dev/svg4everybody/
License: Other
Use external SVG spritemaps today
Home Page: https://jonneal.dev/svg4everybody/
License: Other
Hey Jonathan!
I've gotten a lot of use out of this script, but I just recently ran into an issue where externally linked SVG's weren't working in IE9+ (was using the base script). After looking into it a bit, I noticed the repo had updated and decided to get latest and give it a go.
That fixed the issue.
It would've saved me time if you would put a version number on the script somewhere: repo, comments, anywhere! That way if we run into similar issues with the script, we can keep track of versions that worked in the past and/or get the latest to see if that solves our issue.
Thanks!
I am having trouble referencing an external SVG hosted by a CDN. It looks like some kind of CORS issue. Here's the error that Chrome and Safari throw:
Unsafe attempt to load URL https://daveramsey-a.akamaihd.net/elp/ruby/dr-elp/assets/icons/icons-ab31b13cbcafb890891555dbf33843fe.svg from frame with URL https://www.daveramsey.com/elp/applicants/investing-prequalify. Domains, protocols and ports must match.
Firefox just fails silently.
Material Design Icons pointed me to this repo. Sadly, I saw there are a lot of open pull requests and uncommented Issues, which always states, it's not actively maintained.
So my question is, is it still working or are there alterantives to svg4everybody?
Hi,
"Fallback PNGs point to the same location as their corresponding SVGs, only with the # hash replaced by a . dot, and with an appended .png extension."
Is there any way to specify a different location for the png files?
Thanks,
I was hoping svg4everybody would help me with keeping my svg patterns in an external files, like this:
<svg width="100%" height="466" style="top:10px;">
<defs>
<pattern id="pattern"
x="0" y="0" width="1324px" height="100%"
patternUnits="userSpaceOnUse" >
<use xlink:href="city-g.svg#city" style="fill:#00ffff;"></use>
</pattern>
</defs>
<rect x="10" y="10" width="100%" height="100%" fill="url(#pattern)" />
</svg>
But it freezes my IE10 until "Stop running this script?" message shows after a while or browser simply die completely.
It looks like 2.0.0 is not working in Edge. Pretty simple to reproduce:
VM build: 20150801
Hi, I found your demo file display nothing in chrome.
Using external SVG seems is a bug from chrome (I'm testing on the newest chrome version).
<svg class="icon icon-list" viewBox="0 0 68 46"><use xlink:href="images/sprites.svg#icon-list"></use></svg>
it is only display correctly if not using external svg file.
is there any solution for this bug now? Plz advise. thx.
Announcement: http://blogs.windows.com/msedgedev/2015/08/18/previewing-our-first-platform-updates-for-microsoft-edge/
Not sure what the UA will be, asked here:
https://twitter.com/dstorey/status/633697138585784321
Hi there. I started using this, and it's awesome, but it seems to be built with no way to trigger it on new content added after the DOM is ready, like via Ajax. Any chance of adding some sort of API or function that I can call? Thanks.
Is there a chance to also polyfill Android? Because the lack of it is actually a dealbraker for this method in my eyes.
version 1.0.0 is not on NPM, the most recent version is 0.0.3
please create a bower package for this module
Hey there, what do I have to change, so that it includes the svg from the svg-sprite (as it does for ie9) for all browsers?
I want to replace all occurencies of several svg usages with inline svgs instead of reference (because of different css styling for the same icons/multipart-icons but at different locations in the document). Is this anything possible with this script?
An external definition that has nested (although local to the file) tags is not fixed by this.
For now I've flattened my definitions file, while not DRY, at least it works.
The bower-install task, both grunt and gulp variant will inject the script tags pointing to minified files. This is a problem as most people these days, especially those using grunt/gulp are likely to use their own minification step. This results in your files being piped into the build and minified a second time, breaking them and any code that comes after. Any chance you can change the bower.json "main" to point to unminified source ?
I find it difficult to get a grip on support for the various SVG use-cases:
For this reason I believe it would be handy to compile a simple compat table.
I've made a start, maybe we can compile a more complete table that could be featured in the README?
OS | Browser | SVG | SVG Fragment ID's | SVGForEverybody |
---|---|---|---|---|
Win | IE9 | ✔ | ✖ | ✔ |
Win | IE10 | ✔ | ✔ | ✔ |
Win | IE11 | ✔ | ✔ | ✔ |
* | Fx31+ | ✔ | ✔ | ? |
* | Chr 36+ | ✔ | ✔ | ? |
* | Opera Mini 8+ | ✔ | ✔ | ? |
OSX | Saf 7 | ✔ | ✖ | ? |
OSX | Saf 7.1+ | ✔ | ✔ | ? |
iOS | Saf 7.1 | ✔ | ✖ | ? |
iOS | Saf 8.1 | ✔ | ✔ | ? |
And | And. Browser 4.1+ | ✔ | ✖ | ? |
And | And. Browser 40+ | ✔ | ✔ | ? |
And | Chrome 41 | ✔ | ✔ | ? |
... | ... | ? | ? | ? |
Change please bower main files to non-minified
Hi,
I've upgrade svg4everybody in my website to version 2.0.0 (legacy) but in IE8 it gaves in issue with loading new blocks of HTML with svg's inside and append them to the page. The whole browser become unusable for a couple of seconds and after that, the following message appear in a confirm box.
Stop running this script?
A script on this page is causing your web browser to run slowly. If it continues to run, your computer might become unresponsive.
How to reproduce?
I use script-block with html inside and append the inner html of this block by click on a button to another part of my website. The HTML includes (new) SVG's for the page.
My solution for now is loading the old script of svg4everybody for IE8 and lower, and loading the new one to support Edge. But maybe, the 2.0 script can be fixed to avoid the problem.
<!--[if lt IE 9]>
<script src="svg4everybody-1.0.0.js"></script>
<![endif]-->
<!--[if gt IE 8]><!-->
<script src="svg4everybody-2.0.0.js"></script>
<script>svg4everybody();</script>
<!--<![endif]-->
Randomly started getting this error SCRIPT5007: Unable to get value of the property 'split': object is null or undefined
on svg4everybody.min.js, line 2 character 635
which I tracked to line 33: var url = src.split("#"), url_root = url[0], url_hash = url[1];
Giving a little bit more details, as it's not as "random" as I though.
We use Ractive for some dynamic templating (we need to support IE8), so the problem started when I added a few svg icons to one of these Ractive templates, it basically strips the xlink:
somehow and the icon end up like this: <svg class="svg-i"><use href="/img/icons/sprite.svg#i-facebook-square"/></svg>
, which works fine in modern browsers. Actually, I tracked down this issue explaining that it doesn't actually strip it, it's just not accessible through .getAttribute("xlink:href");
anymore, instead I'd need to use .getAttributeNS('http://www.w3.org/1999/xlink', 'href');
and it works fine.
I'm fixing this on my local version of the lib, I can open a PR with a fix if you want.
We're seeing a frustrating issue with IE11. We have a large number of icons as symbols in sprites. When they are linked to externally, all modern browsers are fine. In IE11, the DOM starts thrashing, and the page can become unresponsive (I've seen it happen up to a minute).
Has anyone seen this? Is the only answer to put the sprite into the <body>
? (Which we won't be able to do for our framework.) Wondering if it's related to this line:
https://github.com/jonathantneal/svg4everybody/blob/master/dist/svg4everybody.js#L39
Our page is here: https://www.lightningdesignsystem.com/resources/icons#role=regular&status=all
Thanks for any input!
Using the techniques in this article: http://css-tricks.com/svg-symbol-good-choice-icons
This polyfil no longer loads the external svgs.
I hate to add more UA sniffing to this polyfill, but it seems we need yet one more test:
We have been using appcache with external svg. This mostly works, with one exception: when iOS is offline and xlink:href
pointing to an external file, both Mobile Safari and UIWebView ignore those elements (no request to external svg file in Timelines tab, even though said svg file is cached properly with manifest).
I found out that if we put this svg file inline and above use
elements, they can be rendered correctly, much like IE. So I added !navigator.onLine
to the test and let this script handle the loading, and it totally works!
Obviously we want to limit this to iOS (and probably 7.x only, not sure if iOS 8 fix this yet), as Chrome does not suffer from the same problem.
Note: to get to the iOS buggy behaviour with external svg, one need to 1) trigger successful appcache, 2) close Mobile Safari process, 3) then return to such page without network.
If you use an identifier starting with an integer Edge throws a syntax error.
For example
<svg viewBox="0 0 120 120">
<use xlink:href="ids.svg#1"></use>
</svg>
Fails in line 29:
embed(array[0], x.querySelector('#' + array[1].replace(/(\W)/g, '\\$1')));
Here is a test case: https://dl.dropboxusercontent.com/u/8455906/tests/svg4everyone/index.html
Works fine in Chrome, Firefox and Safari.
In doing some R&D for the best way to implement SVG sprites (the CSS Tricks articles were a huge point of reference), I found my way to this polyfill. However, I'm not a huge fan of replacing the <use>
tags with the SVG chunks from the external file, so I tried another way that seemed to work well for IE. My JS solution (which I'll attach later, if requested) does the following (optimization steps not included):
<use>
tags and loops through them, only keeping the ones that point to specific icons in external SVG files (basically, the xlink:href
attribute has a path and #
target).xlink:href
attributes and requests them via AJAX.response.documentElement.hidden = true
) or whatever your preferred way is.response.documentElement
to the HTML <body>
.<use>
tags that reference that file and strips the path portion from the xlink:href
attribute, leaving only the #icon-id
as the attribute value.The missing piece in my code ATM is making sure any further <use>
tags have their xlink:href
attribute modified appropriately if they are injected into the page (and making sure any of those that reference an external SVG file that wasn't loaded gets loaded).
This seems to me like a better solution than replacing the <use>
tag with the actual icon SVG since it doesn't have to actually parse anything out of the external SVG file and the changes to the DOM are minimal for modifying each <use>
tag. What are your thoughts? I'd love to contribute!
Hi. I’m wondering if the recommended markup for accessible text alternatives should be changed. (I’m not an accessibility expert and haven't run many tests on this, so take my advice with a grain of salt.)
Here's the current recommendation:
<symbol id="codepen">
<title>CodePen</title>
<path etc.../>
</symbol>
<svg title="CodePen">
<use xlink:href="map.svg#codepen"/>
</svg>
<title>
+title
<title>
element in a sprite will often be filled automatically by tools, using the file name of the original SVG file. So it may be a suboptimal name, such as hourglass-2
or worse.<title>
for a symbol that represents a gear will be "gear" or "gears", when the information to convey for a text-less button using that gear symbol should be "Preferences" or "My account" or something similar.So in my opinion the accessible text of each use of the icon should be decorrelated from the graphic itself, and thus from the <symbol>
.
aria-label
?Introduction to aria-label
: https://dev.opera.com/articles/ux-accessibility-aria-label/
One example from the article:
<button aria-label="close">×</button>
What we use at work for buttons with an SVG icon and no visible text:
<button aria-label="Refresh results">
<svg width="20" height="20" aria-hidden="true"><use xlink:href="sprite.svg#arrows-cycle"></use></svg>
</button>
We "hide" the SVG icon with aria-hidden="true"
since it has either no text content or its text content (e.g. a <title>
element that was automatically generated for the file’s name) is inexact, and we provide the actual text we want with a aria-label
on the container (often a button or link).
For buttons or links that have visible text, we keep the aria-hidden
on the icon:
<button>
<svg width="20" height="20" aria-hidden="true"><use xlink:href="sprite.svg#arrows-cycle"></use></svg>
Refresh
</button>
From what I’ve read, and questions I’ve asked accessibility consultants, this seems like a good approach.
Sometimes I need to animate SVG files and I just found out that I can use svg4everybody to inline the SVGs from a single svgstore, in all browsers
import svg4everybody from 'svg4everybody';
svg4everybody({
polyfill: true
});
What do you think about documenting this use case? For me svg4everybody is no longer a polyfill for IE but a solution to external SVG files animation.
If IE 9 or 10 (haven't tested 11) is in "quirks mode" then the script fails.
You may want to mention this in the documentation and suggest adding:
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
to the head of their document. I added the chrome frame flag since we're dealing with IE, and it doesn't hurt to try.
Thank you for writing this script, it's much more elegant than the solution I was using before.
when content is added or drag/dropped or otherwise ajaxified the markup that is rendered looks like:
I have been able to reproduce this 100% and updating the library to the latest release did not solve that problem.
Even more intermittently on the same page some svg get replaced with the png (initial load not ajax related issue) and others are rendered just with empty tags.
any help will be gratly appreciated
If there are multiple svg images
<svg viewBox="0 0 35 36" class="icon icon-barcode">
<use xlink:href="images/sprites.svg#icon-barcode"></use>
</svg>
IE won't load them all on first load, and may simply skip others on subsequent refreshes.
Restarting IE (not just clearing cache) is best to reproduce this issue.
It appears the issue is related to the for loop
used to replace the <use>
tags with PNGs.
Replacing the native JS for loop with a jQuery .each() and using .attr() appears to fix the issue. This of course is not a fix for the javascript, just a proof of concept etc.
$('use').each(function(index, el) {
var img = new Image();
img.src = $(this).attr('xlink:href').replace('#', '.') + '.png';
$(this).replaceWith(img);
});
Here is a zip containing my test files.
Try loading an SVG with a radialGradient
tag, and it is unlikely to render as intended because the tag will be injected as radialgradient
.
(https://github.com/jonathantneal/svg4everybody/blob/master/svg4everybody.js#L25)
Could be nice to have an android support too !
Thanks, for this script. I think it would be beneficial if the README mentioned Safari, the platform and the versions that are supported
We are using [CSS Tricks'](http://css-tricks.com/svg-symbol-good-choice-icons/ approach) approach for creating SVG sprites (and CheerioJS). We ran into issues with Safari 6 (OSX) and iOS 7 Safari, I never determined the exact issue, however S4E solved the problem :) I'm guessing it is the <use>
element.
Please create a tag on the repo named v1.0.0
so bower can see it.
Thanks.
Currently you recommend including svg4everybody.ie8.js
in the head, but I was wondering if it would be useful to conditionally load svg4everybody with Modernizr.load
. I've not been able to figure out which modernizr test would be necessary for the script, but say that Modernizr.svg
would suffice, you could do:
Modernizr.load({
test: Modernizr.svg,
nope: 'svg4everybody.ie8.js'
});
This would mean that the polyfill only loads for the browsers that need it. I would love to hear your recommendations on this, and if this makes sense to you!
svg4everybody only works at load time once. This doesn't work for single page apps (in my case React).
It would be great to be able to make the library inject code on re-renders. Some API to do this would be great.
A native Dart port of this library would be very useful.
It did take me awhile to figure out that you forgot to update your minified files for use with symbols ;)
With Microsoft Edge out, svg4everybody 1.0 does not polyfill Edge properly, because it uses UA sniffing.
I've seen that 2.0 now sniffs for edge too, but ultimately it could be better (if seemingly tricky) to use feature detection to see if SVG's <use xlink:href>
is supported.
Here's some things that I've tried so far, that haven't been too successful:
document.implementation.hasFeature('http://www.w3.org/TR/SVG11/feature#XlinkAttribute', '1.1')
- unfortunately IE9-11 and Safari 7 return true
despite not supporting external resources.'children' in document.createElementNS('http://www.w3.org/2000/svg', 'use')
- this returns false in everything except Chrome and Firefox, but unfortunately is a false negative in Safari 8.I realise this isn't much help, but I just wanted to open the conversation and show some of my working to save time in the hunt for the right feature detection test.
With conditional comments defunct as of IE 10, what's the recommended way to conditionally load this script only for those browsers that need it?
It'd be great to be able to install this script from node and/or use it with browserify. I'm pretty sure the only reason it's not currently working is because there's no package.json
file. Would you be willing to add one?
Thanks for the work on this library and adding support for Edge in v2.0.0.
Currently, there is only a single tag which is for v1.0.0. Could you please add a release tag for v2.0.0 such that bower can be used to get the new version?
As a temporary workaround one can use the master branch:
"dependencies":{
"svg4everybody": "master"
}
I'm using SVG4everybody for my web portal and as I look forward for compatibility for Windows 10 (Project Spartan/Edge), I've noticed that my SVG icons are not rendering.
I found a site with a simple implementation of SVG4everybody and it too, is failing.
https://css-tricks.com/examples/svg-for-everybody/
UserAgent that spartan is using
Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/42.0.2311.135 Safari/537.36
I found out my much older version of this polyfill doesn't work on IE edge recently, and v2 appear to have fixed it and made many improvements.
Is it ready for production at this point? As I didn't find it on npm, just wanted to be sure.
Noticed that Edge on today's Win10 release is not loading any externals SVGs via <use xlink:href>
. Anyone else seeing this?
Example
HTML:
<svg role="img"> <use xlink:href="path/Sprite.svg#icon-arrow-link"></use> </svg>
SVG sprite:
<svg xmlns="http://www.w3.org/2000/svg"> <symbol id="icon-arrow-link" viewBox="0 0 10 5"> <polygon class="red" points="10,5 0,5 5,0 "/> <polygon class="blue" points="10,5 0,5 5,0 "/> </symbol> </svg>
CSS:
.red{ fill:red; } .blue{ fill:blue; }
It won't be red or blue in Chrome.
Any known workarounds or am I doing something wrong? (Adding fill as an inline attribute isn't an option, since I need to change the fill of multiple inner elements on hover).
We have the option to convert SVGs to IE6-8-compatible VMLs on the fly without any plugins or flash. Should we support fallback to VML?
Pros
Cons
Here’s an example of an SVG as seen through Chrome VS Internet Explorer 6-8.
We can ask IE about using external sources with by tweeting to @IEDevChat or using the #AskIE hashtag.
They are taking questions: https://twitter.com/IEDevChat/with_replies and https://twitter.com/hashtag/AskIE?src=hash
A good description of the issue: http://css-tricks.com/svg-use-external-source/
The current patch: this script. 😄
Their response to me: https://twitter.com/IEDevChat/status/472066351633149954
I will link to status.modern.ie when it is available.
I have filed an issue on their GitHub as well: MicrosoftEdge/Status#65
Hey, I've noticed that since upgrading to 2.0.0, the polyfill seems to be running in Chrome and Firefox on OS X. User agent string is:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/44.0.2403.155 Safari/537.36
I reverted back to 1.0.0 to make sure it wasn't a change in Chrome. I'll try being a bit more helpful and debug the issue myself over the weekend.
Hi,
This is an awesome library, have found it very helpful, but with one small gotcha where it's used along with dynamically appended markup- in this case Angular, and a directive.
The issue was that since the lib checks ~60 times per second (or even faster if it falls back to the timeout mode), when the Angular markup was appended to the DOM the Lib would see the 'use' element, but Angular had not yet parsed it into the final markup (with the correct path for the SVG). This meant a console error, and no SVG appearing (in iOS 7/IE9 for our cases). It was intermittent as well; there seems to be a small (10-30ms) window where this can occur.
I fixed this for us by adding a regex to test for the presence of '.svg' in the path, and everything was great.
I'm just wondering if anyone else would find that useful (in which case I'm happy to submit a pull request), and/or if anyone thinks that may be too brittle (do people name svg files without the '.svg'?)
At any rate, thanks again!
Trav
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.