SVGs or (Scalable Vector Graphics) are handy if you have multiple repetitive graphics on your web site. Keep in mind this works better with single colors rather than multiple as the more complicated the SVG gets the more processor intensive it is to load.
If you have a graphic you use time and time again, but would like it in a different color this is your fix. SVGs by nature are scalable so you can make them as big or as small as you want. That being said I’ll demonstrate how to generate your own svgs in the steps below.
How to Make Your Own SVGs
In Illustrator open or create your AI file. In this example I downloaded Star Wars vector graphics. Join the dark side. The process is pretty simple, but you’ll want to choose the following options.
- SVG Profile: SVG 1.0
- Type: SVG
- Options: Embed
When you go to save out your SVG you will want to click on the SVG Code button at the bottom of the Options palette. This will give you the path data code generated from AI.
How to Change the Color of your SVGs with CSS
Each shape generated from Adobe Illustrator will contain xml data, image path data as well as CSS that can be altered to be what ever color you want. This way you can change the color of repetitive graphics by simply updating a hex value. Since each individual path is exported it is also an option to change the path colors individually if you’re so inclined.
Remove Unnecessary Whitespace from your SVGs
Adobe Illustrator has a nasty habit of adding not only a bunch of unnecessary data and whitespace to your SVGs breaking paths and in turn making the SVGs appear as a jumbled bunch of code. To remedy this issue I found this handy SVG Optimizer from Peter Collingridge. It removes all white space and more. Enjoy.
SVGs for Use in Scale-able Web Development Click To Tweet