I'm trying to refer to a <symbol> defined inside an external .svg file. They both should show the twitter icon.

The first square uses CSS background-image: url(http://example.com/example.svg#example);. Instead of showing just the Twitter icon, it shows the whole SVG image (Chrome 35 and Firefox 29).

The second square uses <img> tag to point to the the symbol inside the SVG. It does not work.

The third square uses an SVG <use> 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.

See also: Icon System with SVG Sprites

UPDATE! See Better SVG Sprites With Fragment Identifiers