Work Smarter, Not Harder, in Illustrator
Image credited to Codify Design Studio
Web graphics can exist in a variety or formats, including PNG, JPG, GIF, and SVG. SVG (scalable vector graphics) are unique to this list because they define artwork using mathematics instead of pixels. I typically refer to SVG as the “EPS of the web,” because they offer the same resolution-independent flexibility as EPS does for print design.
SVG files are actually XML files, capable of including the math needed to draw the graphics, as well as define symbols, create groups, and even define CSS rules. CSS (cascading style sheets) is the technology that affords us the ability layout and style a web page.
Illustrator provides unparalleled support for the SVG format, including the ability to create symbols, groups, IDs, and precise vector definitions of your artwork.
From Illustrator to SVG
Illustrator symbols provide a way to define artwork that can be reused throughout your Illustrator document. When you edit any one symbol, all of the symbols in your document are updated as well. This provides an efficient way to reuse artwork throughout multiple artboards.
Layers provide you with the ability to organize your layouts and artwork, with the added benefit of controlling the stacking order. While layers have been in Illustrator for many years, they take on another role when exporting your artwork to the SVG format.
So, while you may already use symbols and layers in your daily work, another powerful benefit is that this workflow translates perfectly into the SVG format. This means that an Illustrator symbol is converted to an SVG symbol automatically — making your exported SVG file more efficient. And in addition to symbols, layers are also converted into SVG groups in an exported SVG.
Using this knowledge, we can create three versions of an infographic, and use some CSS in the resulting SVG file to display different versions for varying screen sizes.
