Why you should use SVGs

My shortlist on when to use SVGs over icon fonts or raster images.

✨ Benefits of SVGs ✨

If you need some selling points to your managers or developers on why your team should be using SVGs, here’s why I recommend them:

• Resolution independence. Because they’re made to be scalable, there’s no need to export multiple sizes to accomodate different screen sizes, saving your team time and reducing maintenance.
• Smaller file sizes. This is because they’re vector-based instead of pixel-based (like JPEGs or PNGs). Smaller file sizes = faster load times.
• Responsive! A single SVG can include multiple variations and be made responsive through CSS, just like HTML. An upcoming article will delve into responsive SVGs. Stay tuned.
• Interactive! Through CSS and JavaScript, you can bring icons and illustrations to life, improving user engagement and making your website or app visually dynamic. I’ll also delve into this in an upcoming article on interactive SVGs!
• Color-dynamic. Let’s say you have a color palette that your icons and illustrations need to adhere to. Because SVGs can be styled with CSS, you can dynamically change their colors for different situations or even when updating brand colors. If you have a ton of icons and illustrations across your site and you need to shift your color palette across the board, you can either update/override colors with CSS or use a find/replace code method across all of your SVG files rather than manually updating a ton of images and re-uploading them all. This is particularly useful for white-label service! Combine this with responsive or interactive methods and the creative possibilities are endless.

More writeups on SVGs:

• Setting up SVGs for adding animations and interactions — Check it out!
• Animating SVGs — Coming soon!
• Responsive SVGs — Coming soon!