SVG Icon

by Vladymyr Shevchuk

HTML

<p>As background image</p>
<button class="icon-plus"></button>
<button class="icon-chart"></button>

<p> With img element</p>
<img src="http://dahlström.net/tmp/sharp-icons/svg-icon-target.svg#plus">
<img src="http://dahlström.net/tmp/sharp-icons/svg-icon-target.svg#chart">

CSS

html { padding: 50px; }

button {
    width:  32px;
    height: 32px;
    border: 0;
    margin: 4px;
    cursor: pointer;
}
button.icon-plus { background: url(http://dahlström.net/tmp/sharp-icons/svg-icon-target.svg#plus) no-repeat; }
button.icon-chart { background: url(http://dahlström.net/tmp/sharp-icons/svg-icon-target.svg#chart) no-repeat; }


img {
    width:  32px;
    height: 32px;
    border: 0;
    margin: 4px;
}

JavaScript

// SVG Stacks Demo

// Current browser-support: Firefox

// SVG modification + technique by @erikdahlstrom