SVG External CSS

Using external classes to cause SVG element changes.

by _sir

HTML

<h2>
Base
</h2>
<svg version="1.1" class="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 65 65" style="enable-background:new 0 0 65 65;" xml:space="preserve">
<path class="st0" d="M32.9,15.4c5,0,9.1,3.9,9.1,9s-4.1,9.1-9.1,9.1s-9.1-4.1-9.1-9C23.8,19.4,27.9,15.4,32.9,15.4 M46.4,36.2
	c2.4,0,4.4,1.9,4.3,4.4v9.3h-5.5v-5.5h-2.7v5.5H23.2v-5.5h-2.7v5.5H15v-9.4c0-2.4,1.9-4.3,4.3-4.3H46.4 M32.9,12.4
	c-6.7,0-12.1,5.4-12.1,12.1c0,3.4,1.5,6.5,3.8,8.7h-5.3c-4,0-7.3,3.3-7.3,7.3v9.4v3h3h5.5h3h19h3h5.2h3v-3v-9.2c0.1-2-0.6-3.8-2-5.2
	c-1.4-1.4-3.3-2.2-5.3-2.2h-5.2c2.3-2.2,3.8-5.3,3.8-8.8C45,17.7,39.7,12.4,32.9,12.4L32.9,12.4z"/>
<path class="st1" d="M46.4,36.2H19.3c-2.4,0-4.3,1.9-4.3,4.3v9.4h5.5v-5.5h2.7v5.5h19.3v-5.5h2.7v5.5h5.5v-9.3
	C50.8,38.1,48.8,36.2,46.4,36.2z M32.9,33.5c5,0,9.1-4,9.1-9.1c0-5.1-4.1-9-9.1-9s-9.1,4-9.1,9.1C23.8,29.4,27.9,33.5,32.9,33.5z"/>
</svg>

<h2>
Good (and blue)
</h2>
<svg version="1.1" class="blue good" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 65 65" style="enable-background:new 0 0 65 65;" xml:space="preserve">
<path class="st0" d="M32.9,15.4c5,0,9.1,3.9,9.1,9s-4.1,9.1-9.1,9.1s-9.1-4.1-9.1-9C23.8,19.4,27.9,15.4,32.9,15.4 M46.4,36.2
	c2.4,0,4.4,1.9,4.3,4.4v9.3h-5.5v-5.5h-2.7v5.5H23.2v-5.5h-2.7v5.5H15v-9.4c0-2.4,1.9-4.3,4.3-4.3H46.4 M32.9,12.4
	c-6.7,0-12.1,5.4-12.1,12.1c0,3.4,1.5,6.5,3.8,8.7h-5.3c-4,0-7.3,3.3-7.3,7.3v9.4v3h3h5.5h3h19h3h5.2h3v-3v-9.2c0.1-2-0.6-3.8-2-5.2
	c-1.4-1.4-3.3-2.2-5.3-2.2h-5.2c2.3-2.2,3.8-5.3,3.8-8.8C45,17.7,39.7,12.4,32.9,12.4L32.9,12.4z"/>
<path class="st1" d="M46.4,36.2H19.3c-2.4,0-4.3,1.9-4.3,4.3v9.4h5.5v-5.5h2.7v5.5h19.3v-5.5h2.7v5.5h5.5v-9.3
	C50.8,38.1,48.8,36.2,46.4,36.2z M32.9,33.5c5,0,9.1-4,9.1-9.1c0-5.1-4.1-9-9.1-9s-9.1,4-9.1,9.1C23.8,29.4,27.9,33.5,32.9,33.5z"/>
</svg>

<h2>
Bad
</h2>
<svg version="1.1" class="bad" xmlns="http://www.w3.org/2000/svg"...

CSS

.st1 {fill:#4D4C4D;}
.blue>.st1 { fill: #3366AA; }

.st0 { fill: rgba(0,0,0,0); }
.good>.st0 {fill:#669933;}
.bad>.st0 {fill:#AA3333;}