Skip to content

Making SVG Icons

By GRAYBOX Alumni
Technology

Scalable Vector Graphics (SVG) allow you to make images out of code. At least, that's my definition in a nutshell. The most accurate description is that they are an XML-based vector image format and officially part of the SVG specification from the World Wide Web Consortium (W3C) since 1999.

Why SVGs?

As a front-end developer, one of the great opportunities that the SVG offers is a break from the traditional use of pixel-based (rasterized) images to a format that behaves like a pure vector image file because...well, it is. The SVG format allows you to add images that are built using XML language to draw with coordinates rather than pixels.

There are three advantages to using SVGs

  1. Responsive Design - the scaling of SVGs is infinite and sharp at any size.
  2. Retina/High-Resolution Displays - since these images are built with code rather than pixels, the image retains its sharpness at any size.
  3. CSS image manipulation - when using the inline variation of the SVG file, you have access to things like fill color and size...giving you control over the display of the image via your stylesheets.

Before I hail the SVG as the great PNG/JPG/GIF killer - let me first say that it's not. Like the other formats, each has its own place in web design depending on the intended use and purpose of the image(s) you are working with.

So, without further ado, let me walk you through how I create and implement SVG files into our designs here at GRAYBOX. For this example, I'm going to target simple vector-based images that use a single color and, in this scenario, will be used as icons on the website. My goal is an SVG image that has no preset fill colors and a class of "icon", which I will then be able to manipulate in my stylesheets to set sizes and hover states.

  1. Open/create the file in Illustrator (there are other applications that can accomplish this as well).
  2. Fit the image to your Artboard. The more exact the better because it will export any extra spacing you may have on your artboard between the edges and the actual image. I prefer to match the width and height of the artboard to the EXACT dimensions of my images.
  3. Hit "Save As" and save it as an SVG file. Use the defaults given (SVG 1.1).
  4. Optimize your SVG file.
    1. Install/open the free application called svgo-ui (download it at https://github.com/svg/svgo-gui)
    2. With the application open, drag the SVG file you created onto the svgo-ui application window. The application will immediately optimize your SVG file removing a lot of the extra junk code Illustrator added to your file making it a smaller file. Less bloat is a great thing.
  5. Class-ifize your SVG. This is where we make your single-color image adjustable from your stylesheet (if your image has more than one color - you can skip this step).
    1. Open your now-optimized SVG file in your preferred text editor (Sublime, Atom, TextMate, Notepad, etc.)
    2. Find any "fill: #xxxxx" references and delete them. Since we're going to control colors from the CSS/SCSS files, we don't want this setting used in the XML/SVG file.
    3. Locate the code block that starts with "path" and add a class to the path(s) by simply adding... 
       class=—icon—

      Example: 
       path class=—icon— ...
    4. Save the file
  6. Next, you have two options. You can either (1) add the image into your site using the standard OR, (2) to get access to the now-accessible "icon" class, you can insert the code inline. You can either copy/paste the code in directly or add an include reference such as... 
     <?php include(‘path-to-image.svg'); ?>
  7. Style the SVG file in your stylesheets. (Assuming you went with option 2 above).

    SCSS Method:
     svg { width: 50px; // set sizes height: 50px; // set sizes .icon { fill: blue; // set the fill &:hover { fill: red; // change fill to red } } }
    CSS Method: 
     svg { width: 50px; height: 50px; } svg .icon { fill: blue; } svg .icon:hover { fill: red; }

Here's the result (no hover effect).

Compatibility and Fallbacks

For those wondering about compatibility, click here for the current state of the SVG and how well it works on all the major browsers/devices. As you'll see in the chart, the adoption/compatibility of SVG is vast and certainly worth including it in your development.

What about those older browsers? I'm looking at you IE 8 and earlier. If you need to account for older browsers that don't support SVG, there are some fallback solutions. The most common one is svgeezy and is simple javascript plugin that will force older browsers to swap out svg's with other compatible image files.

Blog & Events

Featured Work