SVG viewBox計算

このツールでできること

• SVG viewBox計算では、幅と高さの数値からviewBox、アスペクト比、50%/2xのwidth・height例、preserveAspectRatio候補を出力します。
• 関連する観点として SVG viewBox、SVGサイズ、viewBox計算 を確認し、結果をコピーして別の作業に使えます。

使い方

1. 入力欄に`1200 800`や`width=1200 height=800`のように幅と高さを含む文字列を入れます。
2. 結果欄でviewBoxの4値とアスペクト比を確認します。
3. 50%と2xのリサイズ例から、widthとheightの派生値を控えます。
4. preserveAspectRatio欄でmeet、slice、noneの違いを選ぶ前の候補として確認します。
5. Copyボタンで結果全体をコピーします。

入力例・出力例

よくある利用シーン

• SVGのwidth/heightだけ分かっていて、viewBoxの4値をすぐ作りたいとき。
• 1200x800のような画像比率を3:2などの簡潔な比で確認したいとき。
• 同じviewBoxのまま50%や2xへ表示サイズを変える例をチームに示すとき。

結果確認のポイント

• 生成したCSSや設定値を実際のコンポーネントに入れ、レスポンシブ表示も確認してください。
• SVG viewBox、SVGサイズ、viewBox計算の観点で、入力内容と出力内容がずれていないか見直してください。
• コピーした結果を利用先に貼り付けたあと、改行や記号が変わっていないかも確認してください。

注意点

• ブラウザ差や既存CSSとの競合があるため、公開前に対象環境で確認してください。
• 結果を公開・送信する前に、用途に合う形式かを必ず確認してください。

データの扱い / プライバシー

• SVG viewBox計算の主要な処理はブラウザ内で実行されます。
• 入力内容を保存するアカウント機能はなく、ページを閉じると作業内容は手元のブラウザから離れます。
• 本番の秘密情報や個人情報を扱う場合は、入力前に必要性を確認してください。

よくある質問

関連ツール