Code

Svg Everywhere

Manuel Marquez on July 6, 2016

There are two primary options for icon systems: scalable vector graphics (svg) and icon fonts. When considering the best solution, a developer has to determine which is most performant, with the highest quality, at the lowest cost of development. Having compared these options at Split, we believe svg icons are the best choice.

Benefits to using svg icons:

SVG is an image format for vector graphics that provides some key advantages, including:

  • Icons can be resized up and down without losing quality, are extra sharp on retina displays, and have a small file size.

  • You have all the same CSS control as a font and more, because you can control individual parts of a multi-part icon and use SVG-specific CSS, like stroke and fill properties (and many other svg properties for styling).

  • Positioning svg icons is similar to positioning a div element, unlike font icons that are inserted via pseudo element. How you position depends on the line-height, vertical-align, and word-spacing. Due to how font is designed, there will occasionally be empty space around it.

Methods to Implementing svg:

1. As an <img> : If we have the svg in a file, we can use it with an <img> tag.

```html
<img src="./icon.svg" alt="Icon example" />
```

2. As a background-image: Same as above, we can use it as a css background-image.

```css
.icon {
  background-image: url(./icon.svg);
  width: 10px;
  height: 10px
}
```

3. Using “inline” SVG: As the svg information is like any html element, you can drop that code directly into an HTML document and the SVG image will show up the same as if in an img.

This technique has advantages over using the img tag or css background-image, where you can’t modify your svg. With inline SVG, the image is downloaded in the same document and doesn't need to make an additional HTTP request, i.e. you can control the styles of your svg element!

There are other ways to handle svg in React; using svg as an <object> and as data uri’s, although those techniques will not be covered in this article.

Browser support:

These previously explained techniques work almost everywhere, with the exception of IE8. If you want to ensure support for svg in every browser, this post outlines the many options you have.

Optimizing svg:

Any design software used to create an svg icon will also create unnecessary data, like doctypes and generators notes. You can reduce the file and remove this extra information by using the app svgomg to saves ome bytes.

Implementing a svg in React

So now you have your svg file, and like every element in react we need to create a component that will keep all the svg data together. This step is simple enough, just use your svg icon everywhere as appropriate, and use the inline svg type so that you can add or modify styles going forward.

When adding many and/or large tables of icons, we can use a technique called sprites. Here, we must only put the svg data in one time (using the inline implementation), then using the <use> tag with the xlink:href, we reference the svg icons without repasting into the html every time. *Note: When using sprites, you won’t be able to edit any css styles of the icons, and if you change any attribute of the icon, this change will propagate for all icons.

Implementing svg icons with React is simple and lightweight: 1) get your svg, 2) optimize it, 3) make it a component. In the above example the default React component is used for clarity, but be sure to also consider a stateless component that wraps your icon if more appropriate.

In summary, Svg is the clear winner when evaluating between icon systems. Using inline svg within a React component provides tons of flexibility and an easy and clean implementation.

We're Hiring!

Join the Team