2016.01.17現在
safariで上手くいかない。
backgroundはSafariとChromeで上手くいかない。
objectタグはどの環境でも上手くいったが、重いし、objectタグのdataにハッシュ付けたURL入れるとスクロールが反応しちゃう。
デモ http://jsdo.it/ksk1015/gAoi
svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
<style id="red">#red:target ~ * {fill: red;}</style>
<style id="blue">#blue:target ~ * {fill: blue;}</style>
<style id="green">#green:target ~ * {fill: green;}</style>
<circle cx="100" cy="100" r="100"></circle>
</svg>
html
<h2>imgタグ</h2>
<p><img src="http://jsrun.it/assets/a/L/3/B/aL3BS"> デフォルト</p>
<p><img src="http://jsrun.it/assets/a/L/3/B/aL3BS#red"> #red</p>
<p><img src="http://jsrun.it/assets/a/L/3/B/aL3BS#blue"> #blue</p>
<p><img src="http://jsrun.it/assets/a/L/3/B/aL3BS#green"> #green</p>
<h2>objectタグ</h2>
<p><object type="image/svg+xml" data="http://jsrun.it/assets/a/L/3/B/aL3BS"></object> デフォルト</p>
<p><object type="image/svg+xml" data="http://jsrun.it/assets/a/L/3/B/aL3BS#red"></object> #red</p>
<p><object type="image/svg+xml" data="http://jsrun.it/assets/a/L/3/B/aL3BS#blue"></object> #blue</p>
<p><object type="image/svg+xml" data="http://jsrun.it/assets/a/L/3/B/aL3BS#green"></object> #green</p>
<h2>css background</h2>
<p><span class="svg"></span> デフォルト</p>
<p><span class="svg svg-red"></span> #red</p>
<p><span class="svg svg-blue"></span> #blue</p>
<p><span class="svg svg-green"></span> #green</p>
以下、検証詳細
OS X El Capitan
Safari 9.01 : objectのみok.
Chrome 47.0 : img, objectはOK. backgroundはNG.
Firefox 43.0.4 : img, object, backgroundともに全部OK.
Windows 10
Edge : img, object, backgroundともに全部OK.
Windows7
IE11 : img, object, backgroundともに全部OK.
Android 6
Chrome 47.0 : img, objectはOK. backgroundはNG.
iOS 9.2
Safari : objectのみok.