2673564e0f39e464b293

<h3>&lt;img> with #fragment referencing &lt;view></h3>

<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/fragment-ready-1.svg#icon-clock-view" alt="" />

<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/fragment-ready-1.svg#icon-heart-view" alt="" />

<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/fragment-ready-1.svg#icon-arrow-right-view" alt="" />


<br><br>


<h3>&lt;img> with #svgView(viewBox())</h3>

<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/fragment-ready-2.svg#svgView(viewBox(0,0,32,32))" alt="" />

<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/fragment-ready-2.svg#svgView(viewBox(0,32,32,32))" alt="" />

<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/fragment-ready-2.svg#svgView(viewBox(0,64,32,32))" alt="" />

<br><br>

<h3>background-image with #fragment referencing &lt;view></h3>

<span class="icon icon-clock"></span>
<span class="icon icon-heart"></span>
<span class="icon icon-arrow-right"></span>


<br><br>


<h3>background-image with #svgView(viewBox())</h3>

<span class="icon icon-clock-2"></span>
<span class="icon icon-heart-2"></span>
<span class="icon icon-arrow-right-2"></span>

<br><br>


<h3>background-image with background-position</h3>

<span class="icon icon-clock-3"></span>
<span class="icon icon-heart-3"></span>
<span class="icon icon-arrow-right-3"></span>


<br><br>


<h3>&lt;img> with hide/show embedded :target CSS</h3>

<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/fragment-ready-3.svg#icon-clock" alt="" />

<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/fragment-ready-3.svg#icon-heart" alt="" />

<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/fragment-ready-3.svg#icon-arrow-right" alt="" />

SVG Fragment Identifiers in HTML and CSS
----------------------------------------


A [Pen](http://codepen.io/chriscoyier/pen/GndhE) by [Chris Coyier](http://codepen.io/chriscoyier) on [CodePen](http://codepen.io/).

[License](http://codepen.io/chriscoyier/pen/GndhE/license).

body {
  padding: 20px;
}

img {
  width: 32px;
  height: 32px;
}

.icon {
  display: inline-block;
  width: 32px;
  height: 32px;
}

.icon-clock {
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/fragment-ready-1.svg#icon-clock-view) no-repeat;
}

.icon-heart {
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/fragment-ready-1.svg#icon-heart-view) no-repeat;
}

.icon-arrow-right {
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/fragment-ready-1.svg#icon-arrow-right-view) no-repeat;
}


.icon-clock-2 {
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/fragment-ready-2.svg#svgView(viewBox(0,0,32,32))") no-repeat;
}

.icon-heart-2 {
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/fragment-ready-2.svg#svgView(viewBox(0,32,32,32))") no-repeat;
}

.icon-arrow-right-2 {
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/fragment-ready-2.svg#svgView(viewBox(0,64,32,32))") no-repeat;
}


.icon-clock-3 {
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/fragment-ready-1.svg") no-repeat;
  background-size: 32px 96px;
  background-position: 0 0;
}

.icon-heart-3 {
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/fragment-ready-2.svg") no-repeat;
  background-size: 32px 96px;
  background-position: 0 -32px;
}

.icon-arrow-right-3 {
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/fragment-ready-2.svg") no-repeat;
  background-size: 32px 96px;
  background-position: 0 -64px;
}