'How to create an svg sprite which supports fragment identifiers?
There are multiple svg icons. To reduce the requests on the page an svg sprite was created to not have a request for every icon. The svg sprite gets lazyloaded via javascript and SVGs of that sprite are referenced by:
<svg viewBox="0 0 20 20"><use xlink:href="<id_from_sprite>"></use></svg>
This works fine for the desktop and mobile website. But it's not working for AMP (javascript restrictions). During my research I came across this article: https://css-tricks.com/svg-fragment-identifiers-work/
Icons from svg sprites could then be referenced like this:
<img src="svg_sprite.svg#icon_from_the_sprite" alt="" />
The problem is that the original icons from the sprite have similiar viewBoxes, all start at x-coordinate 0 and y coordinate 0 and laying over each other in the automatically created sprite. For the fragment identifier to work they would need to be aligned one over the other. I have no Adobe Illustrator to redraw them and I'm not aware of any automated tool that changes the viewBoxes AND the coordninates of the Icons automatically. Did anyone encounter the same problem and could provide some tips or a solution for that? Is there a tool that creates from random SVGs a sprite where the icons are aligned one under the other with adjusted viewBoxes and added <view> attributes and icon not within a <def> tag?
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|