How do I use SVG icons in HTML?

Question

I have an svg file with 3 icons.

When I import it via the <img> tag, I get the 3 icons one below each other. I want to use the icons in a row, one next to the other. How can I use them separately?

The .svg file:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="16.3px"
     height="26.9px" viewBox="0 0 16.3 26.9" enable-background="new 0 0 16.3 26.9" xml:space="preserve">
<g id="bg">
</g>
<g id="ui">
    <g>
        <polygon points="8.1,0 10.3,4.3 15.2,5 11.7,8.3 12.5,13 8.1,10.8 3.8,13 4.6,8.3 1.1,5 6,4.3         "/>
        <polygon fill="none" stroke="#000000" stroke-miterlimit="10" points="8.1,13 10.3,17.3 15.2,18 11.7,21.3 12.5,26 8.1,23.8 
            3.8,26 4.6,21.3 1.1,18 6,17.3       "/>
    </g>
</g>
<g id="pop_ups">
</g>
</svg>

Thanks!

Answer 1

Use the SVG file as a sprite.

Create an icon-sized element, hiding the overflow:

.icon {
    display: inline-block;
    width: 16.3px;
    height: 13.45px;
    overflow: hidden;
}

Position the SVG within the element so the icon shows through:

.icon > img {
    position: relative;
}
.darkStar > img {
    top: 0;
}
.lightStar > img {
    top: -13.45px;
}

Demo (using inline SVG instead of a linked <img>, which defeats the purpose, but is easier to demo here):

.icon {
    display: inline-block;
    width: 16.3px;
    height: 13.45px;
    overflow: hidden;
}
.icon > svg {
    position: relative;
}
.darkStar > svg {
    top: 0;
}
.lightStar > svg {
    top: -13.45px;
}

<span class="icon lightStar">
    <svg width="16.3px" height="26.9px">
        <polygon points="8.1,0 10.3,4.3 15.2,5 11.7,8.3 12.5,13 8.1,10.8 3.8,13 4.6,8.3 1.1,5 6,4.3" />
        <polygon points="8.1,13 10.3,17.3 15.2,18 11.7,21.3 12.5,26 8.1,23.8 3.8,26 4.6,21.3 1.1,18 6,17.3" fill="none" stroke="#000000" stroke-miterlimit="10" />
    </svg>
</span>
<span class="icon darkStar">
    <svg width="16.3px" height="26.9px">
        <polygon points="8.1,0 10.3,4.3 15.2,5 11.7,8.3 12.5,13 8.1,10.8 3.8,13 4.6,8.3 1.1,5 6,4.3" />
        <polygon points="8.1,13 10.3,17.3 15.2,18 11.7,21.3 12.5,26 8.1,23.8 3.8,26 4.6,21.3 1.1,18 6,17.3" fill="none" stroke="#000000" stroke-miterlimit="10" />
    </svg>
</span>

Answer 2

You can use fragment identifiers to display only part of the SVG file in any particular img element.

The advantage of this approach is that the "individual sprites" in your SVG file are defined in your SVG file, so when using it elsewhere you don't need to know anything of the internal structure, you can just ask for what you want by name:

<button>
  <img src="x.svg#star1" alt="*">
</button>

The most cross-platform-compatible solution is add some SVG views which define which part of the image to show for which ID fragment. The view syntax is similar to the global viewBox attribute of the root SVG element*:

<view id="star1" viewBox="0 0 10 10"/>

Here's a good blog post (with a live example) which explains the technique in great detail.

_{*note that I haven't calculated that viewBox value for your SVG, you'll have to figure it out yourself.}