HTMLでSVGのサイズを変更しますか?


157

だから、私はHTMLでSVGファイルを持っています。このフォーマットについて聞いたことの1つは、ズームインするとすべてがピクセル化されないということです。

私はjpegまたは50 x 50のアイコンとして保存できるものを知っていて、実際にimage_srcで高さと幅を手動で設定して、(むしろピクセル化された)100 x 100のサムネイル(または10 x 10)として表示します。鬼ごっこ。

ただし、SVGファイルはオブジェクト/埋め込みタグで使用されているようで、THOSEの高さまたは幅を変更すると、画像に割り当てられるスペースが増えるだけです。

実際にファイルシステムに格納されているSVG画像よりも小さいまたは大きいSVG画像を表示するように指定する方法はありますか?

回答:


178

.svgテキストエディター(XMLのみ)でファイルを開き、上部で次のようなものを探します。

<svg ... width="50px" height="50px"...

幅と高さの属性を消去します。デフォルトは100%であるため、コンテナで許可されているものまで拡大する必要があります。


75
はい、そうですが、 'viewBox'属性も追加する必要があります(たとえば、50x50pxの例ではviewBox = "0 0 50 50")。そうしないと、コンテンツが適切に拡大縮小されない可能性があります(コンテナのサイズによって異なります)。Scourはこれを自動的に行います、codedread.com/scour
ErikDahlström10年

やったー!それは役に立ちました!ファイルには既に100%のものが含まれていることがわかりましたが、ビューボックスが重要でした。あなたがた両方に感謝します!
ジェニー

26
他の人に明らかでない場合、 'viewBox'は大文字と小文字を区別します。また、画像をトリミングする場合、最初の2つの座標は左上隅、2番目の2つの座標はスケーリング前の幅と高さです。
Big McLargeHuge 2013年

1
<div style = "width:50px; height:50px"> <svg viewBox = "0 0 1000 1000"> ... </ svg> </ div>と<svg viewBox = "0 0 1000 1000"の両方に注意してくださいstyle = "width:50px; height:50px"> ... </ svg>が機能します。
2014年

48

これらを試してください:

  1. 設定して不足しているビューボックス SVGタグに設定した高さと高さの属性の高さと幅の値でフィルを

  2. 次に、高さと幅目的のパーセント値に設定するだけで、画像を拡大縮小できます。幸運を。

  3. 固定縦横比preserveAspectRatio="X200Y200 meet(例:200px)を設定しますが、必須ではありません

例えば

 <svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="10%" 
   height="10%"
   preserveAspectRatio="x200Y200 meet"
   viewBox="0 0 350 350"
   id="svg2"
   version="1.1"
   inkscape:version="0.48.0 r9654"
   sodipodi:docname="namesvg.svg">

24

画像タグにsvgを表示し、画像タグのサイズを変更することで、サイズを変更できます。

<img width="200px" src="lion.svg"></img>

1
<img>を使用する上で私が思う問題は、<object>タグのフェイルオーバー機能を失うことです(バージョン8以下のIEユーザーに関連する可能性があります)。
Nathan Crause 2012

10

コンテナの幅を変更すると、ソースファイルの幅と高さを変更するのではなく、コンテナも修正されます。

.SvgImage img{ width:80%; }

これにより、svgのサイズ変更に関する問題が修正されます。あなたの要件に基づいて任意の%を与えることができます。


8

SVGに属性viewBoxpreserveAspectRatio属性を追加するのが最善の方法です。ビューボックスは、SVGの幅と高さ全体を次の形式で記述します0 0 w h

<svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 700 550"></svg>

2
これは正直に言って最良のオプションです。魅力のように機能します。
ジャスティン


4

使用して境界を取得する例を次に示します。httpssvg.getBox()//gist.github.com/john-doherty/2ad94360771902b16f459f590b833d44

最後に、svgにプラグインしてビューボックスを適切に設定できる数値を取得します。次に、親divのcssを使用すれば完了です。

 // get all SVG objects in the DOM
 var svgs = document.getElementsByTagName("svg");
 var svg = svgs[0],
    box = svg.getBBox(), // <- get the visual boundary required to view all children
    viewBox = [box.x, box.y, box.width, box.height].join(" ");

    // set viewable area based on value above
    svg.setAttribute("viewBox", viewBox);

1

HTMLのSVGファイルがあります[....] SVG画像を実際にファイルシステムに格納されているものよりも小さくまたは大きく表示することを指定する方法はありますか?

SVGグラフィックスは、他のクリエイティブ作品と同様に、ほとんどの国で著作権法により保護されています。管轄区域、作品のライセンス、またはあなたが著作権者であるかどうかに応じて、著作権法違反せずにSVGを変更できない場合があります。

しかし、法律はトリッキーなトピックであり、時にはあなたはたわごとをやりたいだけです。したがって、HTML内の属性を持つタグを使用して、作品自体を変更せずにグラフィックのスケール調整できます。imgwidth

外部HTTPリクエストを使用してサイズを指定する:

<img width="96" src="/path/to/image.svg">

データURIを使用してマークアップでサイズを指定する:

<img width="96" src="data:image/svg+xml,...">

SVG をデータURI用最適化して、任意のサイズに適したSVG Favicon画像を作成できます

<link rel="icon" sizes="any" href="data:image/svg+xml,%3Csvg%20viewBox='0%200%2046%2045'%20xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle%3EAfter%20Dark%3C/title%3E%3Cpath%20d='M.708%2045L23%20.416%2045.292%2045H.708zM35%2038L23%2019%2011%2038h24z'%20fill='%23000'/%3E%3C/svg%3E">
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.