webで拡大縮小して表示しても劣化することのないSVGで構成したスプライト画像をバックグラウンドに汎用的に表示させるテストです。

ベクターのロゴやアイコンをIllustratorでAIにまとめ、スプライト画像としてSVGで保存しました。次の画像表示の（１）から（４）まで、SVGスプライト画像を使い回して、画像を表示しています。

この例ではinline-blockを指定したspan要素のバックグラウンドにSVGスプライトのパーツを表示しています。拡大縮小は、元のSVGのサイズ（横296px、縦147px）を100%として、CSSのbackground-sizeで調整しています。最下段に例として（４）のソース（htmlとCSS）を掲載しました。

（４）のhtmlソース

        <h3>（４）アイコンとロゴ　200%</h3>
        <span class="sprite_svg200 icon_cube2">　</span>
        <span class="sprite_svg200 logo200">　</span>

（４）のCSSソース

    .sprite_svg200 {
	   display: inline-block;
	   background: url(svg/conifer-logo3.svg) no-repeat;
	   background-size: 592px 294px;
	   }
    .icon_cube2 {
	   width:355px;
	   height:100px;
	   background-position: 5px -105px;
	   }
    .logo200 {
	   width:200px;
	   height:100px;
	   background-position: 5px -195px;
	   }