SVG

There are several ways to use SVGs on Web, and the best way is not always obvious.

What is SVG?

SVG is a chunk of XML that defines a vector graphic and can be contained:

Using SVG symbols

SVG in img

The simplest way to use SVG, and probably least useful, is to use an img element where the src attribute points at the SVG file. This allows inclusion of the SVG content as-is without any options to change the colors with CSS or take advantage of sprites.

SVG use

A more useful way to take advantage of SVG is by including an svg element in HTML that references a symbol in a separate SVG file.

<svg class="svg-icon" viewBox="0 0 32 32">
    <use xlink:href="path/to/the/svg/sprite.svg?v=123#symbolname"/>
</svg>

The above will allow the symbol with the id of symbolname to be virtually included within the HTML at the location of the use element. Because the SVG is then considered part of the DOM, it can be styled with CSS. The inside of the svg tag is actually SVG, not HTML in the common sense, and it should therefore be true XML.

The viewBox attribute is required as it tells the element how to fit the symbol. The viewBox numbers mean left offset, top offset, width, height, in that order. `

.svg-icon {
    width: 20px;
    height: 20px;
    display: inline-block;
    fill: currentColor;
}

Note in this CSS the fill property which is SVG specific. There are several SVG-specific CSS properties available. The value currentColor causes the fill color of shapes in the SVG to inherit from the CSS color value. In other words, it makes your SVG automatically take on the text color.

The above doesn't work if a fill color is explicitly set on the symbol being used. For example, an SVG file like this with a fill attribute set will override the above.

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" x="0px" y="0px" width="32px" height="32px" viewBox="0 0 32 32" xml:space="preserve">
    <g id="scramble" fill="#FFFFFF">
        <rect width="10.667" height="10.667"/>
    </g>
</svg>

Though, that can be used to your advantage if you want a part of the icon to always be white while the rest inherits the fill from .svg-icon. The objects, classes and IDs within the SVG file are also available for styling via CSS. When styling interior elements, keep in mind that sprite-ing and minification may change the structure of the SVG. When symbols are useed only the portion of the SVG contained by the referenced ID is available for styling.

Working with Design

Spriting

When sprites are needed, SVGs should be sprited as part of the build process, not provided from design already sprited. Configuration examples will be available in Dominatr for grunt-svg-sprite.

Minifying

When not spriting, SVGs should be minified using grunt-svg-min.