Working with SVGs

We recently got a project where we needed to use custom icons with hover states.  There are several ways to do this.  In the past we might have used sprites, but in this case we opted to use SVG files.  SVG, stands for scalable vector graphics, that are created with Adobe Illustrator.

Some of the main benefits of SVG files are:

  • Small file sizes that compress well
  • For the most part they scale to any size without losing clarity
  • They look great on retina displays
  • You can use css to control colors, hover states, and you can add filters to due things like blur the file.

Of course, you can load an SVG file into a page just like you would an image (<img src=”file.svg”>), but you can also use the code within the SVG file.

You can open any SVG file in a text editor and get the source code used to created the file.  It would look similar to an XML file.
Screenshot 2015-02-22 15.29.51

And that code when rendered by a browser, displays a Twitter icon.

The nice thing about using SVGs this way, is that you can add CSS classes to it and then control things like the color and hover color. However, SVGs don’t use your typical background-color element, instead it uses its own controls such as “fill” ie. fill:#424242;