What would be the best approach for SVG files?
Hi 👋🏻
I am wondering what would be the best approach for using SVG files on HTML file. Personally, I like clean code which not excluding “svg, path” etc. on my HTML file.
I like to import it with img property but yet it doesn’t allow me to fill or stroke the SVG file.
What should I do?
4 Replies
It depends. If you want to change the style or animate the SVG you need to import it directly into the markup. If not you can use the img tag. I would still prefer using inline svg tags in case of vanilla html,css and js as this will also reduce the network calls.
Unfortunately there's little to be done. You can set the fill directly in the SVG file itself then import it within an image tag.
If you do not want to do that, usually a component framework can be super helpful. Svelte and other frameworks allow you to use an SVG as a component, this way you can actually fully load an SVG and have full access to the features.
If using vanilla html and js, and not wanting to put the code in the SVG itself, you pretty much have to suffer and put it in there anyway, or just not change the color 😂
I've seen people use CSS filters as well and everything but it's a more complicated approach to say the least
Not too sure it it is what you want, but you can use css filter property to achieve a color change. As already said, it is not really intuitive and it would be easier working directly with svg.
Perhaps this might help you a bit: https://codepen.io/ianm/pen/QMgrzq
I see. Thanks for the tips.