アスペクト比とスケーラビリティを維持しながらCSS背景画像としてSVGスプライトシートを使用する方法

Question

TL; DR：SVGスプライトシートにタイル張りしたいくつかのアイコンをアスペクト比を維持し、自動的に拡大縮小するCSS背景画像として使用したいSVGとCSSだけを使用して、親要素を埋める。 JavaScriptはしないでください。

---

だから、私はSVG-Editの組み合わせやメモ帳++でのいくつかの手のコーディングで作られたSVG形式でspritesheetを持っています。ソースコードは次のとおりです。

<svg version="1.1" 
    xmlns:svg="http://www.w3.org/2000/svg" 
    xmlns="http://www.w3.org/2000/svg" 
    width="600" 
    height="400" 
    viewBox="0 0 600 400"> 
    <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ --> 
    <title>chosen_sprite</title> 
    <g> 
    <title>Add</title> 
    <rect fill="none" stroke-width="10" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" x="5" y="5" width="90" height="90" id="svg_1" stroke="#dcdcdc"/> 
    <line id="svg_2" y2="50" x2="70" y1="50" x1="30" stroke-linecap="round" stroke-linejoin="null" stroke-dasharray="null" stroke-width="12" stroke="#00a00c" fill="none"/> 
    <line id="svg_3" y2="30" x2="50" y1="70" x1="50" stroke-linecap="round" stroke-linejoin="null" stroke-dasharray="null" stroke-width="12" stroke="#00a00c" fill="none"/> 
    </g> 
    <g> 
    <title>Delete</title> 
    <rect fill="none" stroke-width="10" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" x="105" y="5" width="90" height="90" id="svg_1" stroke="#dcdcdc"/> 
    <line id="svg_2" y2="70" x2="170" y1="30" x1="130" stroke-linecap="round" stroke-linejoin="null" stroke-dasharray="null" stroke-width="12" stroke="#ff0000" fill="none"/> 
    <line id="svg_3" y2="30" x2="170" y1="70" x1="130" stroke-linecap="round" stroke-linejoin="null" stroke-dasharray="null" stroke-width="12" stroke="#ff0000" fill="none"/> 
    </g> 
    <g> 
    <title>Expand Dark</title> 
    <rect stroke="#505050" id="svg_1" height="90" width="90" y="5" x="205" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="10" fill="none"/> 
    <line fill="none" stroke="#000000" stroke-width="12" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="round" x1="250" y1="65" x2="280" y2="35" id="svg_2"/> 
    <line fill="none" stroke="#000000" stroke-width="12" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="round" x1="220" y1="35" x2="250" y2="65" id="svg_3"/> 
    </g> 
    <g> 
    <title>Collapse Dark</title> 
    <rect stroke="#505050" height="90" width="90" y="5" x="305" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="10" fill="none" id="svg_4"/> 
    <line fill="none" stroke="#000000" stroke-width="12" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="round" x1="350" y1="35" x2="380" y2="65" id="svg_5"/> 
    <line fill="none" stroke="#000000" stroke-width="12" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="round" x1="320" y1="65" x2="350" y2="35" id="svg_6"/> 
    </g> 
    <g> 
    <title>Expand Green</title> 
    <rect fill="none" stroke-width="10" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" x="405" y="5" width="90" height="90" id="svg_1" stroke="#dcdcdc"/> 
    <line id="svg_2" y2="35" x2="480" y1="65" x1="450" stroke-linecap="round" stroke-linejoin="null" stroke-dasharray="null" stroke-width="12" stroke="#00a00c" fill="none"/> 
    <line id="svg_3" y2="65" x2="450" y1="35" x1="420" stroke-linecap="round" stroke-linejoin="null" stroke-dasharray="null" stroke-width="12" stroke="#00a00c" fill="none"/> 
    </g> 
    <g> 
    <title>Collapse Green</title> 
    <rect fill="none" stroke-width="10" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" x="505" y="5" width="90" height="90" id="svg_1" stroke="#dcdcdc"/> 
    <line id="svg_2" y2="65" x2="580" y1="35" x1="550" stroke-linecap="round" stroke-linejoin="null" stroke-dasharray="null" stroke-width="12" stroke="#00a00c" fill="none"/> 
    <line id="svg_3" y2="35" x2="550" y1="65" x1="520" stroke-linecap="round" stroke-linejoin="null" stroke-dasharray="null" stroke-width="12" stroke="#00a00c" fill="none"/> 
    </g> 
    <g> 
    <title>Search</title> 
    <circle id="svg_9" r="32" cy="140" cx="60" stroke-width="8" stroke="#000000" fill="none"/> 
    <line id="svg_11" y2="167.5" x2="32.5" y1="190" x1="10" stroke-linecap="round" stroke-linejoin="null" stroke-dasharray="null" stroke-width="12" stroke="#000000" fill="none"/> 
    </g> 
    <g> 
    <title>Search 2</title> 
    <rect id="svg_10" stroke="#505050" height="90" width="90" y="105" x="105" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="10" fill="none"/> 
    <circle r="25" cy="142.5" cx="157.5" stroke-width="8" stroke="#000000" fill="none" id="svg_7"/> 
    <line y2="165" x2="135" y1="180" x1="120" stroke-linecap="round" stroke-linejoin="null" stroke-dasharray="null" stroke-width="12" stroke="#000000" fill="none" id="svg_8"/> 
    </g> 
</svg> 

これはうまく動作し、私が望むように見えます。

問題はCSSです。スプライトシートのセルを定義するのは、私が望むよりもちょっと面倒です。ここで私は、これらのアイコンを表示していますページです：基本的に

<!DOCTYPE html> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<html> 
<head> 
<style> 

* {padding: 0px; margin: 0px; outline: 1px solid rgba(0,0,0,0.1);} 

html {width: 100%; height: 100%;} 

body {width: 100%; height: 100%;} 

.svgSprite { 
    background-image: url('./svgicons/form_icons_sprite.svg'); 
    background-repeat: no-repeat; 
    background-size: 600%; 
} 

.svgSprite.add { 
    background-position: 0px 0px; 
    width: 12px; 
    height: 12px; 
} 

.svgSprite.delete { 
    background-position: -16px 0px; 
    width: 16px; 
    height: 16px; 
} 

.svgSprite.expandDark { 
    background-position: -24px 0px; 
    width: 12px; 
    height: 12px; 
} 

.svgSprite.collapseDark { 
    background-position: -36px 0px; 
    width: 12px; 
    height: 12px; 
} 

.svgSprite.expandGreen { 
    background-position: -48px 0px; 
    width: 12px; 
    height: 12px; 
} 

.svgSprite.collapseGreen { 
    background-position: -60px 0px; 
    width: 12px; 
    height: 12px; 
} 

.svgSprite.search { 
    background-position: 0px -12px; 
    width: 12px; 
    height: 12px; 
} 

.svgSprite.search2 { 
    background-position: -16px -16px; 
    width: 16px; 
    height: 16px; 
} 

</style> 
</head> 

<body> 
<div class="svgSprite add"></div> 
<div class="svgSprite delete"></div> 
<div class="svgSprite expandDark"></div> 
<div class="svgSprite collapseDark"></div> 
<div class="svgSprite expandGreen"></div> 
<div class="svgSprite collapseGreen"></div> 
<div class="svgSprite search"></div> 
<div class="svgSprite search2"></div> 
</body> 

</html> 

が、私は私が表示するアイコンそれぞれのdivを伝えるために使用するCSSをspritesheet内のセルを定義し、簡素化する簡単な方法があるかどうかを知りたいですスプライトシートから。

私は、このソリューションが厳密にSVGとCSSであることを望みます。 JavaScriptライブラリを使用することに興味はありません。私は、セルを定義して、アスペクト比を維持しながら自動的にそのコンテナに合わせてスケールすることを目指している特定のアイコンを持つことができるようにすることを目指しています。現在、アイコンを親コンテナに合わせるには、その幅と高さを明示的に定義し、親コンテナの幅と高さを一致させる必要があります。親コンテナの幅と高さを変更する場合は、バックグラウンド位置のサイズも変更する必要があります。

次に、スケーリングの問題があります。この設定では、SVGは画面上に描かれる適切なサイズにスケールされますが、ブラウザのズームを使ってズームするとピクセル化されます。これはSVGがどのように動作するはずではありません。

私は自分のファイルにそれぞれのアイコンを置くことができると思いますが、それはすばらしいことですが、スプライトの使用が本当に好きです。それは私にいくつかのサーバー要求を保存するだけでなく、それは素晴らしいです。

私はSVG Icon Loaderを知っています。それはかなりクールですが、それは私がむしろ頼りにしないJavaScriptファイルです。

SVG & Spritesheets

Fit <svg> to the size of <object> container

Using SVG as background image

...それでも：

は、私はすでにSO上W3のSVGドキュメント、MDN SVGドキュメント、および次のスレッドを読みました結局のところ、私は解決策を見つけることができませんでした。

編集：これはIE9で動作する必要があります。それはちょっとした問題ですが、IE9のSVGサポートはまともです。私はこのプロジェクトでSVGを選んだ理由です。

Answer 1

基本的には、スプライトシートのセルを定義する簡単な方法があるかどうかを知りたいと思います。

いいえ、簡単にはできません。

は、スケーリングの問題があります、そして、this article

を試してみてください。この設定では、SVGは画面上に描かれる適切なサイズにスケールされますが、ブラウザのズームを使ってズームするとピクセル化されます。これはSVGがどのように動作するはずではありません。

クロム18では、ピクセルが全く見えません。私のテストブラウザの一覧で

（FF3.6オペラ9.2 IE6）あなたのアイコンが同じサイズを持っている場合、私はengine

Answer 2

に多分問題、私はクロム

にそしてIE9について見たものを見ていませんでした

1. アイコンをスプライトに水平方向にパックします（アイコンが別のファイルにある場合はsvg-spriteを使用してください）。
2. ターゲットセレクタにbackground-size: auto 100%;を設定します。
3. ターゲット要素を「width」、「height」または「font-size」に設定します。

.icon { 
 
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="64" height="16" viewBox="0 0 64 16"> <circle fill="blue" cx="8" cy="8" r="8"/> <circle fill="red" cx="24" cy="8" r="8"/> <circle fill="yellow" cx="40" cy="8" r="8"/> <circle fill="green" cx="56" cy="8" r="8"/> </svg>'); 
 
    background-repeat: no-repeat; 
 
    background-size: auto 100%; 
 
    display: inline-block; 
 
} 
 
.icon.small { 
 
    height: 1em; 
 
    width: 1em; 
 
} 
 
.icon.medium { 
 
    height: 2em; 
 
    width: 2em; 
 
} 
 
.icon.large { 
 
    height: 4em; 
 
    width: 4em; 
 
} 
 
.icon_1 { 
 
    background-position: 0 0; 
 
} 
 
.icon_2 { 
 
    background-position: 33.33% 0; 
 
} 
 
.icon_3 { 
 
    background-position: 66.67% 0; 
 
} 
 
.icon_4 { 
 
    background-position: 100% 0; 
 
}

<span class="icon icon_1 small"></span> 
 
<span class="icon icon_1 medium"></span> 
 
<span class="icon icon_2 large"></span>