Img or Svg element?
Say you have a Figma where the designer have created icons and such. Do you prefer to export them to svg and use them inside an <img /> element with the src pointing to the file, or do you prefer to extract the path and use the <svg> directly like that?
It feels like you get more control with svg tag since you can recolour etc, but it also clutters things to have the paths and all?
5 Replies
#depends how I want it cached is it reused, am I animating it. Typically I'll make a svg sprite. Either inline in a component or as a file. The <use> it.
Never really use it in a <img> though
The usage is typically icons in things like buttons and so, in different vue components. how would you go about <use> a file? might need to read into that, thought <img> was the only way to use an svg file
Just look up SVG spirites
An Overview Of SVG Sprite Creation Techniques
– The personal website of Sara Soueidan, inclusive design engineer
Sara is where I learned about them
https://discord.com/channels/436251713830125568/1022308880732147812
I know you're working with a designer but also good resource
Let's you make sprites from the bag and I love it