Why you should use svg element instead of cdn or svg as images*

#html #css #react #javascript

When You use CDN and your application is does not relying heavily on svgs then it just slows your website down. And If you use svg as image then you lost control how you can color you svg. When you use svg as image you must use filter property in css to color. which is very complex in nature. You might wonder why would I want to color it why don't use default one then my friend you are doomed😉, there could so many use cases one could be the you might want to add dynamic theme in your website where user can pick his own color for theme then you must rely on external libraries to generate proper filter value but If you use svg element you can easily use fill property.

/* good practise
svg{
   fill:black;
}

/* bad for frequent changes*/
/* img which contains svg as src*/
img{
filter: brightness(0) saturate(100%) invert(77%) sepia(80%) saturate(3374%) hue-rotate(312deg) brightness(100%) contrast(104%);
}