SVG Icons – Tales

Tales’ design is mostly typographic but it does make limited use of inline SVG. See Oleg Solomka’s article SVG Icons FTW for a complete guide.

The footer template includes a hidden <svg> element with multiple path with id attributes representing individual icons (five exist in the base theme). These source icons can be referenced and used repeatedly across the page.

For example, the main navigation icon in the header exists like so:

<a class="header__nav" href="#nav">
    <span>jump to navigation</span>
    <svg class="svg--icon" viewBox="0 0 28 28">
        <use xlink:href="#svg--nav"></use>
    </svg>
</a>

Tales includes Modernizr to detect for inline SVG support. The class inlinesvg or no-inlinesvg is applied to the <html> element. For critical icons, like those in the header, a fallback background image should be applied.

.no-inlinesvg .header__nav {
    background-image: url("../img/nav.png");
}

For non-critical icons that are purely decorative, like the “Next” and “Previous” link arrows, they are simply hidden with the link text on show.

Note that the closing </use> tag is required rather than a single tag <use /> otherwise iOS 6 and lower will not render the icon.

Why inline SVG?

This technique is useful because inline SVG can be styled with CSS. Icons used in Tales all inherit the customisable link colours and hover states. It’s also performance friendly because no extra HTTP requests are sent for each icon.

If you’re looking to build upon Tales and add many more icons it may be worth using an icon font (see Bulletproof Accessible Icon Fonts).