開発者 / SVG検査
SVGビューアー：SVGの確認、サイズ変更、コピー
ズームと背景の設定を使って、SVGコードをローカルで表示できます。寸法や色の指定を確認し、幅と高さを編集、viewBoxを修正して、data URIをダウンロードまたはコピーできます。
SVGビューアー：SVGの確認、サイズ変更、コピー: SVGの寸法、viewBox、要素数、バイト数、明示的な色の使用状況を読み取ります。サニタイズ後、指定されたルート要素のサイズ属性のみを編集します。viewBoxがない場合は、元の寸法から補完できます。レスポンシブモードではviewBoxを維持し、幅と高さの属性を削除します。 サーバーへのファイルアップロードは一切なく、100%ブラウザ内でローカル実行します。
- カテゴリ
- 開発者ツール
- 実行回数
- ブラウザ内で
- コスト
- 無料 · 登録不要
- 提供状況
- すぐに使えます
完全にブラウザ内で実行します
SVGのビューポートとviewBox
viewBoxは、最小x、最小y、幅、高さの4つの数値で構成されます。幅と高さは正の値でなければなりません。仕様: https://www.w3.org/TR/SVG2/coords.html
サイズとローカルプレビュー
絶対長は、1インチあたり96 CSSピクセルとして変換されます。プレビューのズームと背景は、エクスポートされるマークアップに影響しません。SVG画像の処理規則: https://www.w3.org/TR/SVG2/conform.html
使い方
- SVGをドロップするかコードを貼り付け、サニタイズ済みのプレビューを確認します。
- 縦横比の固定を任意で設定して寸法を指定し、viewBoxを調整するか、レスポンシブ表示のために寸法を削除します。
- SVGをダウンロードするか、コードまたはエンコード済みのdata URIをコピーします。
プライバシーと制限事項
SVGはローカルで処理され、分離された画像として描画されます。スクリプト、イベントハンドラー、外部リソースは削除されます。
関連ツール
よくある質問
viewBoxを変更するとアートワークも変わりますか？
表示される座標領域が変わります。表示サイズだけを変更する場合は既存のviewBoxを使用してください。別のviewBoxを指定すると、表示される描画が切り取られたり、位置がずれたりすることがあります。
寸法がない場合はどうなりますか？
ビューアーはviewBoxの寸法を使用し、それもない場合は300 × 150ピクセルを代替値として使用します。絶対的な物理長は1インチあたり96ピクセルとして扱われます。相対長を正確に解決するには、包含するページが必要です。
レスポンシブモードで幅と高さが削除されるのはなぜですか？
viewBoxが座標系を維持し、周囲のレイアウトが表示サイズを制御できるようにするためです。
data URIをコピーできますか？
はい。data URIには、URIエンコードされたサニタイズ済みの出力SVGが含まれます。
無料ツール · ブラウザ内で · アカウント不要