このツールについて
内部座標と外側の表示サイズの関係を確認できます。既存の viewBox を入力して起点とサイズを調べるか、4 つの値から属性を作成できます。SVG ファイルはなくても使えます。
使い方
- 既存の viewBox を入力するか、SVG ファイルやソースから座標範囲を読み込みます。
- 最小 X、最小 Y、内部の幅と高さを確認します。
- 必要に応じて座標範囲を変更し、表示幅と高さを入力して比率を比較します。
- 生成した viewBox 属性をコピーし、図形全体が見えるか確認します。
機能
- 起点は正負の値に対応し、内部の幅と高さは 0 より大きい値が必要です。
- 縦横比を表示します。例えば 0 0 800 600 は 4:3 です。
- 内部範囲と表示サイズを比較し、縦横比が一致するか確認できます。
座標系について
- viewBox の順序は min-x、min-y、width、height です。最初の 2 つは表示座標範囲の起点、残りはその幅と高さです。
- 例えば -100 -50 200 100 は、(-100, -50) を起点に幅 200、高さ 100 の範囲を表し、比率は 2:1 です。
- 表示領域が 400 × 300、viewBox が 0 0 800 600 なら、縦横とも内部 1 単位は 0.5 CSS ピクセルです。比率が違う場合、余白や切り抜きは preserveAspectRatio にも左右されます。
SVG の安全性について
プレビューには安全処理済みの静的コピーを使います。スクリプト、クリック時の動作、アニメーションは実行せず、外部画像、フォント、スタイルも読み込みません。外部参照、埋め込み Web ページ、未対応の内容を除去するため、元の表示と異なる場合があります。DOCTYPE や独自の実体を含む文書には対応していません。
SVG ファイルや UTF-8 ソースは最大 2 MiB、ノード数は要素とテキストを含め 20,000 個、入れ子は 96 階層までです。大きすぎる場合や構造が複雑な場合は、先にファイルを簡略化してください。
プライバシー
SVG はお使いのブラウザー内で処理され、サーバーにはアップロードされません。
入力や結果は自動保存されません。クリアやページ移動の前に必要なファイルを保存し、元のファイルも保管してください。
よくある質問
viewBox の 4 つの数値は何ですか？
最小 X、最小 Y、内部幅、内部高さの順です。起点は負数でも構いませんが、幅と高さは 0 より大きい値にします。
viewBox="0 0 100 100" の意味は？
座標 (0, 0) を起点とする 100 × 100 の範囲で、縦横比は 1:1 です。実際のピクセル表示サイズは外側のサイズで決まります。
viewBox と width、height の関係は？
viewBox は内部座標の範囲、width と height は表示領域です。ブラウザーが内部範囲を表示領域に対応させます。
preserveAspectRatio とは何ですか？
比率が違うときの配置と拡大・縮小方法を指定します。meet は全体表示で余白ができる場合があり、slice は領域を埋めて一部を切り抜きます。none は縦横を別々に伸縮します。