<div id="background-image" class="experiment"></div>

<div class="experiment"><img src="http://denilson.sa.nom.br/aboutme.svg#twitter"></div>

<svg id="svg-use" class="experiment" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 64 64">
  <use xlink:href="http://denilson.sa.nom.br/aboutme.svg#twitter" width="64" height="64" />
</svg>

<article>
  <p>I'm trying to refer to a <code>&lt;symbol&gt;</code> defined inside an external <code>.svg</code> file. They both should show the twitter icon.</p>
  <p>The first square uses CSS <code>background-image: url(http://example.com/example.svg#example);</code>. Instead of showing just the Twitter icon, it shows the whole SVG image (Chrome 35 and Firefox 29).</p>
  <p>The second square uses <code>&lt;img&gt;</code> tag to point to the the symbol inside the SVG. It does not work.</p>
  <p>The third square uses an SVG <code>&lt;use&gt;</code> element. It fails because browsers block this cross-domain request. However, it works correctly in Chrome 35 and Firefox 29 if both files are on the same domain.</p>
  <p>See also: <a href="https://css-tricks.com/svg-sprites-use-better-icon-fonts/">Icon System with SVG Sprites</a></p>
  <p><strong>UPDATE!</strong> See <a href="http://www.broken-links.com/2012/08/14/better-svg-sprites-with-fragment-identifiers/">Better SVG Sprites With Fragment Identifiers</a></p>
</article>

.experiment {
  display: inline-block;
  width: 64px;
  height: 64px;
  background-color: #FFC;
  border: 1px solid black;
}
#background-image {
  background-image: url(http://denilson.sa.nom.br/aboutme.svg#twitter);
}