Last summer I made a mention of my SVG process in a thread.
That's funny you say Compass was well known for it's sprite generator because I've heard that as well. And when I heard that I thought– why would I need to use sprites? I use almost strictly SVG nowadays.
SVGs can be tricky, but I’ve got a system that works for me. It’s primarily based on Chris Coyier’s Using SVG article, mixed with Treehouse’s method for The Perfect WordPress Inline SVG Workflow.
This implies that SVGs are better than sprites. If anyone has any counter arguments to that, I'd love to hear it.
My process has changed a bit since I posted that, so here's my current process:
- Open vector graphic in Adobe Illustrator
Tip: Make sure everything gets turned into a path (unless you want to retain actual text, but I'm not sure Google can crawl a word within an SVG so I don't suggest doing this on important keywords). You can do this by:
For strokes: Object > Path > Outline Stroke
For text/fonts: Right click > Create Outlines
Now save it as an SVG (I save mine to
- Install SVGO
- Optimize your
$ svgo -f Sage/assets/svg/originals -o Sage/assets/svg (This will save the optimized versions to your svg folder, but retain the originals, which is important because over optimizing them can screw everything up as you'll see in my video below).
- Now rename your newly optimized SVGs with
inline- as a prefix to the file name and add
.php after the
.svg extension. So
- Now add this line of php to your desired php page:
<svg><?php get_template_part( 'assets/svg/inline', 'logo.svg' ); ?></svg>
Now you have inline SVGs, which make it SO much cleaner to work with in my opinion. You can even animate them or alter the styles in CSS.
Here it is in practice:
We're almost there, but I've found it usually takes a little bit of tweaking in the CSS to make sure SVGs don't start over-writing the other SVGs CSS styles (which are usually called
.st0, .st1, .st2, etc).
Here's a video of me trouble shooting the issue and fixing it. (0-7 minutes: the frustrating issue – 7-12 minutes: the easy solution)
I hope that helps you guys streamline an SVG process that works for you. If anyone has alternate methods or tips, I would LOVE to hear them. Thanks!
Edit: I noticed roots.io uses icomoon. I've used their icons packs, but never the custom SVGs. It would be cool to hear a pro/con list of icomoon vs. inline-svgs.