web-dev-qa-db-ja.com

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

そのため、HTMLのSVGファイルがあります。このフォーマットについて聞いたことの1つは、ズームインするとすべてがピクセル化されないことです。

私はjpegまたは50×50アイコンとして保存できるものであれば何でも知っており、image_srcの高さと幅を手動で設定して、実際に（むしろピクセル化された）100×100のサムネイル（または10×10）としてそれを表示しますタグ。

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

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

htmlsvg
137
Jenny

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

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

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

153
Amadan

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

  1. missing viewboxを設定し、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">
41
Lorenz Lo Sauer

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

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

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

.SvgImage img{ width:80%; }

これにより、svgのサイズ変更の問題が修正されます。要件に基づいて任意の％を指定できます。

9
user2929588

svg.getBox()を使用して境界を取得する例を次に示します。 https://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);
3
Lawrence Whiteside

次のコードを使用します。

<g transform="scale(0.1)">
...
</g>
1
Chris P

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

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

しかし、法律は扱いにくいトピックであり、たまにやりたいだけの場合もあります。したがって、HTML内でimg属性を持つwidthタグを使用して作業自体を変更せずに、グラフィックの スケールを調整 することができます。

外部HTTP要求を使用してサイズを指定する：

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

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

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

SVGは データURI用に最適化 で作成できます SVGファビコン 任意のサイズに適した画像：

<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">
0
Josh Habdas

viewBoxおよびpreserveAspectRatio属性をSVGに追加するのが最適であることがわかりました。ビューボックスは、0 0 w hの形式でSVGの幅と高さ全体を記述する必要があります。

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