ここで実行 100% ブラウザ内で動作します。アップロードもログインも不要です。
SVG Editor
SVG コードを左に、サンドボックスプレビューを右に。ズームと PNG 書き出しに対応。
プレビュー(サンドボックス)
描画と書き出しはブラウザ内で完結します。プレビュー前にスクリプトタグとイベント属性を除去し、SVG は端末の外に出ません。
使い方
- SVG コードを左の編集欄に貼り付けます。入力を止めると自動でプレビューが描画されます。
- プレビュー倍率を 100%・200%・400% から選択。倍率はプレビューだけに効き、書き出しサイズは別です。
- 編集後は描画するで即座にプレビューを更新できます。
- PNG を出力で、現在の倍率に応じたサイズ(一辺 4096 px 上限)でラスタライズしてダウンロードします。
よくある用途
- 書き出したアイコンの微調整:デザインツールの出力を貼り、パスを直して即確認。
- 未知の SVG の確認:プロジェクトに採用する前に描画して中身を確かめる。
- ベクターから PNG:ビットマップしか受け付けないツール用にラスタターコピーを書き出す。
- SVG の学習:座標を変えてプレビューの動きを確かめる。
よくある質問
Q: スクリプトやアニメーションがプレビューから消えたのは? A: スクリプトは意図的に除去しています。任意コードを実行できる SVG エディタはセキュリティ上の穴になるため、静的ベクターのみ描画します。
Q: 書き出しで canvas の汚染(tainted)エラーが出ました。 A: SVG が外部画像やフォントを参照している場合に起きます。そのような canvas からピクセルを読み戻すことはブラウザが禁止します。素材を SVG にインライン化してから再度出力してください。
Q: PNG のサイズは? A: SVG 自身の width/height(なければ viewBox)に現在の倍率を掛けた値で、一辺 4096 px が上限です。サイズ指定がまったくない場合は 300x150 として扱います。
データはこのデバイス内にとどまります
SVG Editor は 100% ローカルで動作します。貼り付けたり、ドロップしたデータはすべてお使いのブラウザ内で処理され、送信されることはありません。当社のサーバーには何も保存されません——タブを閉じればすべて消えます。
入力された内容がサーバーへ送信・記録・解析利用されることはありません。初回読み込み後はネットワークを切断していてもこのページは動作します。