SVGビューボックスは常にそのサイズに関連していますか？

Question

かなり簡単な例私はこの広場SVG持っている場合：

<svg class="svg-correct-symbol" viewBox="0 0 442.533 442.533" 
    width="50px" height="50px"> 

をそして、私はそれを変更します。私は、画像の右の約四分の一が表示されます

<svg class="svg-correct-symbol" viewBox="0 0 200 200" 
     width="50px" height="50px"> 

？幅と高さがwindow(viewbox)の半分になっているので、SVGを見るためにあなたは「探している」です。

したがって、ビューボックスの番号：442.533は、常に画像の幅/高さの100％を意味します。

このデフォルトのビューボックス番号の設定方法を教えてください。このビューボックスのサイズは、エクスポートするときのファイルのサイズによって決まりますか？私はviewBox="0 0 16 16"のようなより丸みを帯びた何かのviewBoxを持っていたいと思います。

既にエクスポートされたイメージでは、私はそれを変更する方法はありません。

Answer 1

デフォルトはviewBoxです。これは、svgイメージの作成時に（手動またはIllustratorのようなソフトウェアを使用して）定義されます。それは4つの座標x y width heightを持っています。それが難しいのは、これらの座標が画像の次元とは無関係であり、言及したように、あなたが「見ている」領域だけを定義することです。

viewboxは、任意の値に設定できます。しかし、新しいビューボックスに合わせて、それに応じてのsvgイメージが必要になります。同様に、/x , y軸の画像をシフトして、中心に合わせるか、フレーム/ viewboxに合わせる必要があります。

ドキュメントからsvg transformをご覧ください。 Thisチュートリアルは、svgトランスフォームを理解するのにも役立ちます。

イラストレーターのようなソフトウェアを使用している場合は、ビューボックスを定義するアートボードの寸法を設定し、それに応じて拡大縮小するだけです。