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
Ben From Accounting
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.
croganm
croganm15mo ago
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
Danny
Danny15mo ago
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
Neσ许
Neσ许15mo ago
I see. Thanks for the tips.
Want results from more Discord servers?
Add your server