SVGビューア・エディタ

SVGファイルはコードなので、絵だけを表示するビューアでは半分しか分かりません。ここでSVGを開くか貼り付けると、描画結果の確認、宣言されたサイズとviewBoxの確認、要素数のカウントができ、編集用に整形したコードや本番用に圧縮したコードも得られます。欄のコードを書き換えてもう一度実行すれば、編集結果を確認できます。SVGを単独で開くとJavaScriptが実行されることがあるため、スクリプト、イベントハンドラ、外部リンクを先に削除することもできます。何もアップロードされません。

使い方

1. SVGファイルを選ぶか、SVGコードを欄に貼り付けます。
2. コードの形式を選びます。整形、圧縮、そのままのいずれかです。
3. 自分で作っていないファイルでは安全オプションをオンのままにします。
4. プレビュー、サイズ、viewBox、要素の表を確認し、コードをコピーします。
5. 欄でコードを編集してもう一度実行します。必要なら好きな幅でPNGに書き出せます。

計算式

表示サイズ = width × height属性（px、pt、mm、cm、inは1インチ = 96 pxで換算）。どちらかがなければviewBoxの比率に従います

viewBoxだけのSVGには固定サイズがなく、配置された枠に合わせて拡大縮小されます。PNG書き出しでは指定した幅を設定し、高さはviewBox（またはwidthとheight）から求めるため、小さなビットマップを拡大したものではなく、鮮明に描き直した画像になります。

計算例

<svg width="2in" viewBox="0 0 40 20">と書かれたアイコンは、幅が2 × 96 = 192 pxで、viewBoxの比率20 ÷ 40から高さは96 pxになります。これを幅1024 pxのPNGに書き出すと、1024 × 512の画像になります。