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%);
}

note:If you are front-end developer🌈 then still you must learn svgs to generated charts and graphs.

Please follow me!🥺

If you like my content 💝

Simplify data collection in your JS app with a fully integrated form management platform. Includes support for custom question types, skip logic, integrated CCS editor, PDF export, real-time analytics & more. Integrates with any backend system, giving you full control over your data and no user limits.

Learn more