SVG Files are just Misunderstood. Here's Why.

SVGs sound awesome. Crystal clear resolution at a fraction of the file size. Sounds great, right?

Mostly, but if you don't understand them, you'll start hitting walls and begin to wonder where you went wrong.

What is an SVG?

SVG stands for scalable vector graphic. Meaning, it doesn’t matter how big the image size, it will never look pixelated. Because, well, SVGs are not pixel-based. Looking at you, PNGs.

So how does that work?

In your editor of choice, instead of being pixel-based, vectors are point based. This is how they obtain perfect resolution at any size. When you want to export these vectors for use on the web, your program (Illustrator, Adobe XD, Figma) reads the image and converts your image into CODE. Yes, lines of code. The more complex the image, the larger the file size. Since it’s made of code, you can also code SVGs from scratch.

This also means that you can't "compress" an svg. You can minimize the code, but that's about it.

SVG Best Practices

SVGs are perfect for icons and small graphics. You can convert any image into an SVG, but it’s not always practical.

If you simply want to add in a couple of icons, feel free to use the <img> tag. Easy peasy. If you want to edit or animate your SVGs, this is where it gets tricky.

Text in SVGs

If you create a graphic with text inside, SVGs always export text as just...text. So, if a user doesn’t have the font you used in the graphic installed on their computer, they’ll probably be left with Times New Roman. And nobody, and I mean nobody, wants that.

To fix this, make sure all your text is converted to paths before you export.

Using SVGs in HTML and CSS

Okay, folks. BUCKLE UP. This is where it gets interesting.

You’re a badass coder. You’re sensible, so you put all of your CSS in its own file. None of this inline stuff. SVGs have classes already created when you export them. Can you change this styling? Yes, but wait.

There are only two places you style your SVGs: In the actual SVG file itself or inline on your HTML document. You can not edit your SVG classes on a .css file and link it to an HTML file. Not gonna work. It’s not supported.

So if you’ve been banging your head against the wall wondering if you’ve lost all your magical CSS skills, I hope that bit of information helps.

Animating SVGs

Now that we know where we can style our SVGs, that plays into animation as well. Personally, I like to add extra styling and effects inside the SVG file itself. If you have 10 SVGs you need to animate for a page, it just keeps it cleaner, and you’ll always know where to find it.

As soon as we start animating our SVGs, they are no longer an image. You wouldn’t expect the same animation properties to work on a photo that you would on an SVG.

They become an object, so you’ll use the <object> tag when placing an SVG with animations.

Wrap Up

SVGs are great, but they can be tricky once you start breaching the edges. Thanks for sticking with me through this, I hope this cleared a few things up!