3 ms·
About using svg images I wonder if there are some studies about inlining versus using a reference to an external URL. I have a web page with the same icons rep
by httpteapot 6y ago
About using svg images I wonder if there are some studies about inlining versus using a reference to an external URL.
I have a web page with the same icons repeated 20+ times, and I my intuition is that it it could be optimized by using a shared reference instead of repeated inlined svg sources in the html documention — which is font-awesome default behavior.
- pseudosavant 6y agoSVG can handle this situation. You can define the SVGs somewhere in the HTML document and reference them anywhere you want. https://css-tricks.com/lodge/svg/13-svg-icon-system-use-element/ https://css-tricks.com/lodge/svg/13-svg-icon-system-use-elem... The syntax is like this: <!-- Define the SVGs. I usually put them in an element with `display:none` --> <svg id='svgID12345'><path d="..."/></svg> <!-- Use the SVG via `<use xlink>` anywhere you want to see it. --> <svg><use xlink:href='#svgID12345'></svg> You can reference external SVGs in external files as well. Just use `<use xlink:href="defs.svg#icon-1"></use>`. https://css-tricks.com/svg-use-with-external-reference-take-2/ https://css-tricks.com/svg-use-with-external-reference-take-...
- car 6y ago<use xlink> will accomplish what you want to do.