SVG内の画像の複数のサイズ/バージョン

Question

SVGファイルに複数の画像を埋め込み、ICOファイルと同様の効果を得ることは可能ですか？

ICOの場合、ファイルにはいくつかのバージョン/サイズの画像が含まれているため、 小さなものは細かい部分を省略するか、縮小率の低い画像を読みやすくする使用率があります。

---

編集

私は、任意の特定のアプリケーションに興味を持っていない、と私は意図的に（例としてのみ使用）ICO形式は意図されたもののために考慮されません。

（元のサイズ/比）：詳細な説明については

はApplications-database.svgを使用することができ、魔女は、一例として四つの異なる画像を含んでいます。

（縮尺）

右の写真はあまり詳細が含まれており、異なる比率を持っていますが、スケールダウンしたときにはるかに読みやすいです：

Applications-database.svgは自動的に個々の画像を切り替えるだけで、最大はありませんが最も詳細な画像が通常見えます。

そこで質問です：画像全体のサイズが変更されたときにCSS/SVGの非表示/と私は（すなわちショーのシンボル-1の幅であれば> 50他のショーのシンボル-2）（多分<symbol>）異なる画像を表示することができますか？

Answer 1

SVGの全体のポイントが間違っているようです。

SVGは形状定義の観点から画像を定義します。つまり、どんなサイズで描いても、最良の結果を得ることができるはずです*。

ピクセルベースのICOファイルやPNGなどの特定のサイズに限定されません。

※SVGがヘッダに固定サイズを指定していない限り、

あなたが最終的なサイズに基づいて異なり、あなたのSVGのスタイルを設定するために、あなたのSVGで@mediaクエリを使用することができ、質問の編集

に基づいて更新します。

ellipse { 
 
    fill: lightsteelblue; 
 
    stroke: black; 
 
    stroke-width: 5; 
 
} 
 

 
@media all and (max-width: 400px) 
 
{ 
 
    ellipse { 
 
    stroke-width: 10; 
 
    } 
 
} 
 

 
@media all and (max-width: 100px) 
 
{ 
 
    ellipse { 
 
    fill: white; 
 
    } 
 
}

<svg viewBox="0 0 100 100"> 
 
    <ellipse cx="50" cy="75" rx="45" ry="20"/> 
 
    <ellipse cx="50" cy="50" rx="45" ry="20"/> 
 
    <ellipse cx="50" cy="25" rx="45" ry="20"/> 
 
</svg>

開き、このCodePenと、ブラウザウィンドウのサイズを変更してみてください。

https://codepen.io/PaulLeBeau/pen/WdEqye

は、メディアクエリは、すべての/ほとんどのブラウザでサポートされるべきであることに注意してください、彼らはないかもしれません他のSVGレンダラーや編集者によってサポートされることがあります。

Answer 2

は

絶対にSVGファイルに複数の画像を埋め込むことも可能です。

問題は、SVGを使用しているものが、画像のサイズが大きいか小さいかを知る方法です。

これはブラウザ用であるとします。それを層に分割します（<g>）。ここに非常に単純化された例があります。

必要に応じて表示/非表示にするCSSまたはjQueryを使用します。

これはもちろん、どのレイヤーを使用するか決定するために何か必要です。このSVGをInkscapeに読み込んだ場合、Inkscapeは2つの画像を表示します。私は、SVG標準の中で、レンダリングされているサイズに応じてSVGをレンダリングする方法を指定するための何かを認識していません。