Comments (6)
I like it a lot. I would add a few steps to fill in the blanks.
- Separate the path and hash from the
<use>
xlink:href
attribute value. - Update the
xlink:href
value with a prepended hash (combining the path and existing hash into a new hash). - When fetching the SVG, update its elements with a prepended
id
(combing the svg path and its own hash). - Additional combing might be necessary for internal hash references.
Note: I proposed something similar using <svg src="">
cite last year, but it ultimately had no momentum.
from svg4everybody.
One issue with embedding the whole SVG is that there might be some (or many) conflicts between id
s in the document.
What if I have a <div id="profile">
in the page, and a <symbol id="profile">
in a sprite? Or if I have several sprite files (this is quickly becoming be a use case for big sites), and some use similar names, with the sprite file itself working as a namespace of sorts?
So this would have to be optional, imo.
from svg4everybody.
@jonathantneal Agreed with your extra steps. We might want to make some of the steps that check for other sprite files optional. I'd wager most people using this will be only loading the one true SVG sprite file and so naming collisions would only be a potential if people used multiple sprite files, and even then, using more than one would mean they're likely using a 3rd party sprite file in which they'd hopefully prefix their identifiers.
@fvsch We could, at minimum, allow for a configurable prefix for the id
s and xlink:href
s in the SVG file (maybe defaulting to icon
or svg
). However, as the external SVG sprite linking (hopefully) becomes more mainstream, build tools like FontCustom that already allow for prefixing the icon identifiers during the build process.
Upon further mulling, I think this shim should be architected in a way that can be used with something like YepNope where you provide a public method that tests for browsers that don't support external linking and the configurable, main public method that runs the shim. There is still another SVG issue people may run into with IE8- supporting VML instead of SVG so a structure like that would allow people to use this shim and an SVG->VML shim that trigger as appropriate. The true test of success would be this library shimming the external linking issue and then another library converting the externally linked SVG->VML.
from svg4everybody.
A couple of comments:
-
Having a standalone feature detection for external resource support would dramatically simplify this shim. I think that you can test for this by detecting the presence of
onload
in an SVG element, like so:'onload' in document.createElementNS('http://www.w3.org/1999/xhtml', 'svg')
-
VML support is a giant can of worms because it doesn't support some of SVG's core concepts, such as grouping or styling via CSS (not without using a behavior, anyway). I think raster fallbacks (or just even plain text substitutions) are the only sane way to handle vector graphics in IE8 or below.
from svg4everybody.
Update: just checking for the presence of onload
isn't enough, because it was first implemented in IE10, but no version of IE support external content (up through Edge 13). I'm looking at some asynchronous ways to test this.
from svg4everybody.
Paging @jdalton: Did you have any luck with this approach?
from svg4everybody.
Related Issues (20)
- Not working for MS Edge HOT 3
- can't make href work using svg4everybody HOT 1
- svg4everybody is not defined
- Add workaround for SVG print bug in Firefox
- svg-chrom HOT 1
- SVG transform animateTransform not working in IE11 and Edge 42
- linearGradient for svg4everybody HOT 2
- run the polyfill only on selected dom element and its children
- Validate Not Running After Page Start
- Inlining External SVG
- Inlining External SVG from sprite, SVG doesn't display correctly HOT 3
- PreserveAspectRatio attribute is stripped out on IE11
- Add option to always replace contents ignoring browser support HOT 2
- Empty XHR embeds after splice(0)
- import does not seem to work properly
- Generate png from svg
- Svg4everybody not working on all svgs in IE11 HOT 2
- Suggestion: Suggest loading the script with the nomodule attribute HOT 2
- Issue with iPhone5 / Safari6
- Link to kartikprabhu.com "Inline SVG Icons" is broken; Archive.org link provided
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from svg4everybody.