カテゴリー: 開発ツール
SVG viewBox エディター
SVG の viewBox を読み取り、手動で書き換える
SVG マークアップを貼り付けて現在の viewBox(無ければ width と height)を読み込み、min-x、min-y、幅、高さを調整してアートワークをクロップ、余白追加、原点の移動を行い、書き換えられた SVG をコピーできます。
出力
<svg width="120" height="120" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg"> <rect width="120" height="120" rx="16" fill="#0f766e" /> <circle cx="60" cy="60" r="34" fill="#f4d35e" /> </svg>
アップロードは一切ありません。マークアップはこのページ内でのみ解析・書き換えられます。
このページの処理はすべてブラウザ内で行われます。アップロードは一切ありません。
このツールでできること
viewBox 属性は、SVG 内部の座標系を実際に描画される領域へどうマッピングするかを決めるものです。そのためこれを変更することで、アイコンの一部だけをクロップしたり、余白を追加したり、パスを一切触らずに原点をずらしたりできます。テキストエディターで4つの数値を手作業で編集するのは面倒でミスも起きやすいものです。このツールは貼り付けられた SVG を解析し、見つかった値を viewBox の4つの入力欄に自動で反映し、値を変更するたびにマークアップをその場で書き換えます。プレビューも表示されるので、コピーする前にクロップ結果を確認できます。
使い方
- <svg> タグを含む SVG マークアップを貼り付けます。
- 「現在の viewBox を読み込む」をクリックして4つの欄を自動入力するか、min-x、min-y、幅、高さを自分で入力します。
- プレビューを確認し、書き換えられた SVG マークアップをコピーします。
プライバシー
このツールはすべてブラウザ内で動作します。入力した内容がアップロード・保存・共有されることはなく、タブを閉じれば消えます。
よくある質問
- SVG はどこかにアップロードされますか?
- いいえ。マークアップはブラウザタブ内で単純な文字列処理によって解析・書き換えられるだけで、サーバーへ送信されることはありません。
- width と height 属性はどうなりますか?
- そのまま変更されません。viewBox を変更すると、ブラウザが実際に適用するのと同じ方法で、既存のビューポート内に描かれる内容が再スケーリングされるだけで、要素自体のサイズは変わりません。
- なぜプレビューが空に見えることがあるのですか?
- 幅や高さが0になっていたり、viewBox がアートワークと重なっていなかったりすると、何も表示されない状態までクロップされてしまいます。ボックスを広げるか、min-x・min-y の値を確認してください。