SVGにサイズの概念はありますか?


11

SVGファイルについて疑問に思っていました。XMLのパスタグで定義されたベクトルのコレクションであることはわかっています。なぜ、svgタグにピクセル単位の幅と高さがあるのでしょうか。また、これらの寸法を削除するとどうなりますか?

回答:


14

幅と高さは、viewBoxが設定されている場合にのみ関係します。その属性がなければ、幅と高さを安全に削除できます。常に描画された縮尺で表示されます。<rect>が幅10px 、高さ20pxに設定されている場合、viewBoxが設定されていない場合、幅または高さの有無にかかわらず、そのスケール10x20で表示されます。

場合はviewBox属性が設定されているあなたは、上下、元のスケールを調整するために、幅と高さを使用することができます。

幅と高さを指定せずにviewBoxを設定すると、これによりsvgが無限にスケーリングされ、望ましい動作となる場合とされない場合があります。レスポンシブHTMLページでは、これが望ましい場合がよくあります。境界コンテナーに合わせて拡大または縮小します。

これらは同じです

<svg width="240" height="240" xmlns="http://www.w3.org/2000/svg">
<svg xmlns="http://www.w3.org/2000/svg">

これにより、元のスケールが2倍になります。

<svg viewBox="0 0 120 120" width="240" height="240" 
xmlns="http://www.w3.org/2000/svg">

これにより、無限のスケーリングが可能になります

<svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.