Group 3FacebookGrouplinkedinmailoctocatRSSsearchsharetwitter
SVG

Inline SVGs and their Gotcha's

Back

Inline SVG’s are a popular technique for introducing icon systems for your site. Having used them a number of times now I thought I might share why they’re a great option and also discuss some of the gotchas you might get while using them.

What are inline SVG’s?

If you’re wondering what inline SVG’s are, there’s a great CSS Tricks article which describes them, and how to use them, in detail. Essentially they allow you to include an SVG icon using the <use> tag. Here’s an example:

<svg viewBox="0 0 100 100" class="icon icon-menu">
  <use xlink:href="#menu"></use>
</svg>

Inline SVG browser support

IE Edge Firefox Chrome Safari
9+ 11+ 1.5 1.0 3.0.4

Browser support taken from MDN

Benefit’s of inline SVG

  • You can style them in CSS - You use CSS to style inline SVG icons which makes them a really powerful icon solution. A great example is creating an icon and changing the fill colour with CSS. This way you’re not duplicating and loading in a copy of the same icon in a different colour.

  • They compress well - Minified/Optimised SVG’s can get pretty small, so that’s a plus.

  • They scale well and look fantastic on Retina displays - One of the main annoyances of using png’s for your icon sets is you tend to have to supply both a normal and double size for Retina screens. SVG’s or (Scalable Vector Graphics) scale as much as you want and they stay crisp, (so no pixelation).

Inline SVG gotchas

CSS fill not working on inline SVG

When using CSS to style an SVG, one of the main reasons to use inline SVG’s for your icons, you might find that some of the styles you attempt to apply might not be working. On a number of occasions I’ve tried to add a fill or stroke colour with CSS and have seen no effect.

If the fill or stroke is not changing colour when you define it in the CSS, it’s likely that it’s defined as an inline style on the SVG it’self. Be sure to remove any fill or stroke attributes when you add a new icon to your set.

SVG Icon not showing correctly in IE

You might find that in any version of IE (including Internet Explorer 11) that your inline SVG icons are malformed or simply don’t show at all, yet they look fine in Chrome/Firefox/Safari. This has caught me out a few times and has usually happened when creating/saving SVG’s from Sketch 3 (Bohemian Coding).

Sketch 3 is great design tool for Mac OSX, it’s simple yet powerful. However, when exporting SVG’s it has a tendency to include plenty of unnecessary elements in it’s SVG files. Shown below is an icon that I had trouble with in IE:

I have truncated it slightly but here’s the SVG code that was produced by Sketch.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" width="29px" height="28px" viewBox="0 0 29 28" version="1.1">
    <defs>
        <path id="path-1" d="M0,0.0249205703 L27.9904766,0.0249205703 L27.9904766,28 L0,28"/>
    </defs>
    <g id="Page-1" stroke="none" stroke-width="1" fill-rule="evenodd" sketch:type="MSPage">
        <g id="Desktop-HD-Copy-16" sketch:type="MSArtboardGroup" transform="translate(-555.000000, -4022.000000)">
            <g id="tiles" sketch:type="MSLayerGroup" transform="translate(-0.500000, 3997.000000)">
                <g id="blog2" transform="translate(556.000000, 25.000000)">
                    <g id="Group-3">
                        <mask id="mask-2" sketch:name="Clip 2">
                            <use xlink:href="#path-1"/>
                        </mask>
                        <g id="Clip-2"/>
                        <path d="M20.4531275,14.0346379 ..." id="Fill-1" sketch:type="MSShapeGroup" mask="url(#mask-2)"/>
                    </g>
                    <path d="M17.5979031,19.0413857 ..." id="Fill-4" sketch:type="MSShapeGroup"/>
                </g>
            </g>
        </g>
    </g>
</svg>

Solution

If you look through the SVG code you can see that there are a number of <g> tags, but that isn’t affecting the icon in IE. I found that by removing the <defs> and <mask> tag, the icon showed correctly. It appears that IE doesn’t like the <mask> tag being used on inline SVG’s. It looks like, for one reason or another, Sketch added these in masks and removing them had no effect on how the SVG displays.

By removing these tags the SVG icon now displays correctly in all versions of IE and Edge. The slimmed down SVG would look something like this:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" width="29px" height="28px" viewBox="0 0 29 28" version="1.1">
    <g id="Page-1" stroke="none" stroke-width="1" fill-rule="evenodd" sketch:type="MSPage">
        <g id="Desktop-HD-Copy-16" sketch:type="MSArtboardGroup" transform="translate(-555.000000, -4022.000000)">
            <g id="tiles" sketch:type="MSLayerGroup" transform="translate(-0.500000, 3997.000000)">
                <g id="blog2" transform="translate(556.000000, 25.000000)">
                    <path d="M20.4531275,14.0346379 ..." id="Fill-1" sketch:type="MSShapeGroup"/>
                    <path d="M17.5979031,19.0413857 ..." id="Fill-4" sketch:type="MSShapeGroup"/>
                </g>
            </g>
        </g>
    </g>
</svg>

This can be further optimised by using build tools such as gulp-svgmin or grunt-svgmin.

Back