SVG の Target 属性による画像の切り替えは、1枚画像による background-potition での方法とは違い、速度や転送量の改善に効果が薄いことがあるようです。
SVG の URLフラグメントによる画像切り替えは、次のようなスタイルを追加した SVG ファイルを用意しておきます。
<svg>
<style>
<![CDATA[
g { display: none; }
g:target { display: inline; }
]]>
</style>
<g id="image1">
<rect x="1" y="6" class="st7" width="30" height="20"/>
</g>
<g id="image2">
<path d="M32,27.313C32,29.891,29.891,32,27.313,32H4.688C2.109,32,0,29.891,0,27.313V4.688C0,2.109,2.109,0,4.688,0 h22.625C29.891,0,32,2.109,32,4.688V27.313z"/>
</g>
</svg>
<style>
<![CDATA[
g { display: none; }
g:target { display: inline; }
]]>
</style>
<g id="image1">
<rect x="1" y="6" class="st7" width="30" height="20"/>
</g>
<g id="image2">
<path d="M32,27.313C32,29.891,29.891,32,27.313,32H4.688C2.109,32,0,29.891,0,27.313V4.688C0,2.109,2.109,0,4.688,0 h22.625C29.891,0,32,2.109,32,4.688V27.313z"/>
</g>
</svg>
HTML から Target を指定して呼び出します。
<img src="splite-mail-soft.svg#image1" alt="">
<img src="splite-mail-soft.svg#image2" alt="">
当然、画像の読み込みは 1 回限りと思い込んでいましたが、実際はそうではありませんでした。
