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:

• Directly within HTML using an svg element
• In a file with a .svg extension that contains a single vector symbol
• In a file with a .svg extension that contains multiple vector symbols and is equivalent to a sprite map

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

• Any iconography made in Illustrator (not a photo) should be provided for development as an SVG rather than a PNG or other format.
• Each icon should be in its own file with a name all lowercase and words separated by underscores, such as vokal_logo.svg. File names should exclude info like pixel dimensions, and superfluous words like "icon". Making this standard should guarantee that you can drop a file over another file to update it, and files are easy to reference from code.
• Every SVG viewBox (equivalent to the artboard in Illustrator) must be 32 x 32 pixels. This makes SVG use much simpler to deal with as it needs to know the viewBox size. ie viewBox="0 0 32 32".
• Groups must not be nested. A group in an SVG file appears as a g element.
• Design should try to provide SVGs that do not contain empty groups as they bloat git diffs, though these groups will be eliminated by SVG minification for deployment.

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.