SVGスケール（アートボード）の変更方法

Question

イラストレーターでSVGを書き出すと、アートボードのサイズやエクスポートする要素のサイズと一致すると思うビューボックスが作成されます。私は現在イラストレーターにアクセスできないが、後で試してみる。

とにかく、何かをエクスポートするたびにviewBoxが要素サイズのアートボードに設定されていると思います。 160 x 160ピクセルのアートボードを持っていて、輸出とSVGのviewBoxがviewBox="0 0 160 160"になると言ってみましょう。

私がビューボックスを混乱させないなら、それを16x16のアイコンと言うことができます。私は多くの意味を作る私に可視画像の正確四分の一を得るviewBox="0 0 80 80"のようなものにビューボックスを変更した場合

viewBox="0 0 100% 100%"

：この場合viewBox="0 0 160 160"はまだ一種のに変換されます。

基本的なイメージを除いて、常にviewBoxが必要とするものは160x160です。私はおそらく160のviewBoxでデフォルトの160を変更できると思います。しかし、これをコードでどうやってやりますか？

うまくいけば、あなたはコンセプトを得るでしょう。

これは多少のことですが、それは別の問題です。

https://css-tricks.com/svg-artboard-sizing/

Answer 1

のみviewBoxを残します。 widthとheightの属性を<svg>タグに追加するだけです。ここでは簡単な例です：

<!-- little blue circle: --> 
 
<svg viewBox="0 0 160 160" width="16" height="16"> 
 
    <circle cx="80" cy="80" r="80" fill="blue" stroke="none"/> 
 
</svg> 
 

 
<!-- huge red circle: --> 
 
<svg viewBox="0 0 160 160"> 
 
    <circle cx="80" cy="80" r="80" fill="red" stroke="none"/> 
 
</svg>