Implementing SVGs

I recently put together a portfolio website so that recruiters and hiring managers could quickly access my recent projects. I took the opportunity to get more experience with SVGs. Their main purpose on my site would be as icons for navigation links.

Here is a short list of the resources I used to get up to speed on SVGs:

The first thing I needed was to get an SVG. My go-to place to get icon fonts and SVGs is IcoMoon. To get a set of SVGs from IcoMoon:

  1. Click the “IcoMoon App” link at icomoon.io
Click the IcoMoon App Link

2. Select some images

Select some images

3. Generate & download the SVG files

Click this button in the bottom left corner

So easy! Another way that I typically work with SVGs is through Sketch or Adobe Illustrator. I enjoy working with Sketch and if you aren’t familiar with it check out a tutorial and demo the app. When I want to create my own SVG, I usually download some sort of image similar to it and use that as a basis for my design. For example, I took my photo of a recent espresso and created a simple icon of it:

Original photo
My Sketch icon

It’s fairly simple to export your design as an SVG in Sketch or Illustrator, but you do have to watch out for extraneous information. To make the SVG smaller, try using SVGOMG by Jake Archibald which is a GUI for SVGO–a Node based SVG optimizer.

Another plus to creating your own SVG, or at least owning a copy of Sketch or Illustrator, is that you can group a bunch of different graphics together on a canvas and export it for use as a sprite. Sara Soueidan goes into nice detail on how to implement fragment identifiers in this article.

Deciding how to use your SVGs

When you have some SVGs to use in a project, the next step is to determine what the SVG is doing. I like to ask myself the following questions:

  • Is the SVG an icon that will be paired with text? If so, maybe I should use it in a pseudo :before or :after selector since it is not semantically essential and won’t bloat the DOM.
  • Is it an icon for navigation without text? Then maybe I should use an inline SVG for accessibility purposes. The idea is that I can add a <title> and <desc> tag in the <svg>.
  • Is it a background decoration? Then consider linking to the SVG as a background-image.
  • How many SVGs am I heading towards? A lot? Then I’ll probably set up SVG sprites.

The <symbol> element

For my portfolio site, I didn’t have many SVGs to implement and most of them required semantic meaning, so I chose to put them inline. After creating my SVGs and downloading some off of IcoMoon, I put them into a folder (usually an images or assets folder) along side the component they belong to. A typical IcoMoon SVG looks like this:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generated by IcoMoon.io -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="28" height="28" viewBox="0 0 28 28">
<path d="M25.375 28h-18.375v-28h8.75v15.75l2.625-3.5h1.75l2.625 3.5v-15.75h2.625c0.484 0 0.875 0.392 0.875 0.875v26.25c0 0.484-0.391 0.875-0.875 0.875zM1.75 27.125v-26.25c0-0.483 0.391-0.875 0.875-0.875h2.625v28h-2.625c-0.484 0-0.875-0.391-0.875-0.875z"></path>
</svg>

My strategy is to add a <symbol> element inside the <svg>. Wrapping the <path> in a <symbol> element allows you to reference the SVG inline. What is required is an ‘id’ attribute, and you can also set up a viewBox for that <symbol> specifically.

...
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="28" height="28">
<symbol id="twitter" viewBox="0 0 28 28">
<path d="..."></path>
</symbol>
</svg>

The <use> element

To implement this SVG, I create a container with the <svg> element in my HTML. The only other element you need is the <use> element , and it will access the id attribute in our <symbol> by using a xlink:href attribute. Since I used “twitter” as the id, the inline SVG would look like this:

<svg>
<title>Twitter</title>
<use xlink:href="/icons/twitter.svg#twitter"></use>
</svg>

Notice that the href attribute’s value is simply the path to the SVG followed by “#whatever-the-id-is”.

Conclusion

That’s how I connected most of my SVGs. I also added a <desc> just inside the <title> to make my SVG more semantic. Here are some nice tips to consider when implementing your SVG.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.