Unicorn Blog

Articles for Developers & Designers

I don't really want to have to calculate the height divided by width for every SVG I put on my site…so I built a Sass mixin to handle it!

Get started with animating SVGs using using the popular Snap.svg library

A look at how to achieve reusabability with SVG's semantic grouping and referencing elements. We additionally look at SVG's root element too.

In this short article, we look at some of SVG's most compelling benefits, explain the difference between raster and vector, provide a bit of SVG history, and then finally we finish off with a very simple SVG example.

In this article, I'll try to go over just enough SVG basics to get you prepared for the fun stuff–namely, animating an SVG icon via JavaScript–we'll get to that by the second article in this series. But first let's tackle those SVG basics…onwards!