CodePen

HTML

            
              <p>this doesnt work</p>
<div id="blah"></div>
<p>this works</p>
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.1.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" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="60px" height="60px" viewBox="0 0 60 60" enable-background="new 0 0 60 60" xml:space="preserve">
<g id="Layer_1_copy">
	<rect y="-0.071" fill="#BF2033" width="60" height="60.141"/>
</g>
<g id="Layer_1_copy_3">
	<rect y="-0.071" fill="#212F64" width="60" height="45.107"/>
</g>
<g id="Layer_1_1_" display="none">
	<rect x="-930" y="210" display="inline" fill="#F3E106" width="38.422" height="999.999"/>
	<rect x="-853.156" y="210" display="inline" fill="#F3E106" width="38.42" height="999.999"/>
	<rect x="-776.314" y="210" display="inline" fill="#F3E106" width="38.422" height="999.999"/>
	<rect x="-699.471" y="210" display="inline" fill="#F3E106" width="38.419" height="999.999"/>
	<rect x="-622.627" y="210" display="inline" fill="#F3E106" width="38.42" height="999.999"/>
	<rect x="-545.787" y="210" display="inline" fill="#F3E106" width="38.422" height="999.999"/>
	<rect x="-468.942" y="210" display="inline" fill="#F3E106" width="38.42" height="999.999"/>
	<rect x="-392.101" y="210" display="inline" fill="#F3E106" width="38.422" height="999.999"/>
	<rect x="-315.257" y="210" display="inline" fill="#F3E106" width="38.42" height="999.999"/>
	<rect x="-238.417" y="210" display="inline" fill="#F3E106" width="38.423" height="999.999"/>
	<rect x="-161.573" y="210" display="inline" fill="#F3E106" width="38.423" height="999.999"/>
	<rect x="-84.729" y="210" display="inline" fill="#F3E106" width="38.42" height="999.999"/>
	<rect x="-7.887" y="210" display="inline" fill="#F3E106" width="38.422" height="999.999"/>
	<rect x="68.957" y="210" display="inline" fill="#F3E106" width="38.422" height="999.999"/>
	<polygon display="inline" fill="#F3E106" points="184.219,1209.999 145.802,1209.999 145.802,210 184.225,210 	"/>
	<rect x="222.643" y="210" display="inline" fill="#F3E106" width="38.422" height="999.999"/>
	<rect x="299.486" y="210" display="inline" fill="#F3E106" width="38.417" height="999.999"/>
	<rect x="376.325" y="210" display="inline" fill="#F3E106" width="38.422" height="999.999"/>
	<rect x="453.17" y="210" display="inline" fill="#F3E106" width="38.422" height="999.999"/>
	<polygon display="inline" fill="#F3E106" points="568.433,1209.999 530.01,1209.999 530.014,210 568.431,210 	"/>
	<rect x="606.855" y="210" display="inline" fill="#F3E106" width="38.422" height="999.999"/>
	<rect x="683.699" y="210" display="inline" fill="#F3E106" width="38.418" height="999.999"/>
	<polygon display="inline" fill="#F3E106" points="798.961,1209.999 760.539,1209.999 760.545,210 798.961,210 	"/>
	<rect x="837.383" y="210" display="inline" fill="#F3E106" width="38.421" height="999.999"/>
	<polygon display="inline" fill="#F3E106" points="952.646,1209.999 914.223,1209.999 914.227,210 952.644,210 	"/>
</g>
<g id="Layer_1_copy_5" display="none">
	<rect x="-1002.284" y="210" display="inline" fill="#F3E106" width="2040.204" height="32.729"/>
	<rect x="-1002.284" y="275.455" display="inline" fill="#F3E106" width="2040.204" height="32.729"/>
	<rect x="-1002.284" y="340.912" display="inline" fill="#F3E106" width="2040.204" height="32.724"/>
	<rect x="-1002.284" y="406.366" display="inline" fill="#F3E106" width="2040.204" height="32.729"/>
	<rect x="-1002.284" y="471.82" display="inline" fill="#F3E106" width="2040.204" height="32.729"/>
	<rect x="-1002.284" y="537.275" display="inline" fill="#F3E106" width="2040.204" height="32.729"/>
</g>
<g id="Layer_1_copy_4" display="none">
	<polygon display="inline" fill="#F3E106" points="-1002.283,389.998 -1002.283,209.998 1037.92,210.025 1037.92,389.998 	"/>
</g>
<g id="Layer_1_copy_2">
	<g>
		<polygon fill="#FFFFFF" points="20.965,36.715 30.111,30 39.438,36.715 35.984,25.881 45.146,19.083 33.775,19.083 30.111,8.261 
			26.628,19.083 15.076,19.082 24.418,25.881 		"/>
	</g>
</g>
<g id="Layer_10">
	<rect y="50.047" fill="#F3E106" width="60" height="2.508"/>
	<rect y="45.036" fill="#F3E106" width="60" height="2.505"/>
	<rect y="55.061" fill="#F3E106" width="60" height="2.504"/>
</g>
<g id="Layer_5" display="none">
	<g display="inline">
		<polygon fill="#212F64" points="-41.328,8.699 -40.861,8.85 -40.573,9.247 30.172,-42.152 100.916,9.247 101.205,8.85 
			101.672,8.699 74.65,-74.467 145.395,-125.866 145.105,-126.263 145.105,-126.753 57.66,-126.753 30,-304.125 2.683,-126.753 
			-84.762,-126.753 -84.762,-126.263 -85.05,-125.866 -14.306,-74.467 		"/>
	</g>
	<g display="inline">
		<polygon fill="#CC1E4F" points="-362.662,-69.967 -362.195,-69.816 -361.907,-69.419 -291.162,-120.818 -220.417,-69.419 
			-220.128,-69.816 -219.662,-69.967 -246.683,-153.134 -175.939,-204.532 -176.227,-204.93 -176.227,-205.42 -263.673,-205.42 
			-291.333,-382.792 -318.651,-205.42 -406.095,-205.42 -406.095,-204.93 -406.384,-204.532 -335.639,-153.134 		"/>
	</g>
</g>
<g id="Layer_5_copy">
</g>
<g id="Layer_9">
</g>
</svg>

            
          
!
via HTML Inspector

CSS

            
              #blah{height:60px;width:60px;background:url(http://www.miguelzuleta.com/temp/1/ii/square.svg) 0 0 no-repeat;}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................