Scalable Vector Graphics, or SVGs, are still a topic of confusion for designers and developers alike. Sifting through settings for how they’re exported from design applications has become even more overwhelming, and often we just settle with the defaults and hope our developers can work with what’s given.
One of the reasons SVGs continue to be a mystical filetype is that the code that’s generated from Illustrator often contains a lot of markup that’s unnecessary and bloated—but we’re still afraid to touch it nonetheless.
We can demystify it a bit by breaking down attributes one by one, and going through export options carefully to determine what it is we need, and what we can do to make these files a bit easier to work with. Let’s get started.
What is an SVG?
An SVG is just mathematical instructions generated from Illustrator that tell the browser how to redraw the paths, fills, and shapes that were created in the program.