3 ms·
You can reference elements from an external file just as well: <use xlink:href='icons.svg#foo'/> Theoretically the browser should only download that file on
by ygra 6y ago
You can reference elements from an external file just as well:
<use xlink:href='icons.svg#foo'/>
Theoretically the browser should only download that file once, just as with multiple img elements referencing the same image. I haven't seen that approach much in the wild, though.
- city41 6y agoGood to know. This has me thinking it'd be cool to have a babel plugin or something that extracts out svgs like this. I currently have a website that heavily uses svgs and for the bulk of them I resorted to img elements because embedding the svg so many times increased the size of the html significantly. This use approach seems like it might be better.
- lenkite 6y agoThis approach prevents CSS styling though since SVG referenced this way has its independent DOM and is not part of the current page DOM.
- ygra 6y agoYes, in that sense it's more like CSS sprites, just a bit easier to use.