本文へスキップ
ここで実行 100% ブラウザ内で動作します。アップロードもログインも不要です。

SVG Editor

SVG コードを左に、サンドボックスプレビューを右に。ズームと PNG 書き出しに対応。

プレビュー(サンドボックス)

描画と書き出しはブラウザ内で完結します。プレビュー前にスクリプトタグとイベント属性を除去し、SVG は端末の外に出ません。

使い方

  1. SVG コードを左の編集欄に貼り付けます。入力を止めると自動でプレビューが描画されます。
  2. プレビュー倍率を 100%・200%・400% から選択。倍率はプレビューだけに効き、書き出しサイズは別です。
  3. 編集後は描画するで即座にプレビューを更新できます。
  4. PNG を出力で、現在の倍率に応じたサイズ(一辺 4096 px 上限)でラスタライズしてダウンロードします。

よくある用途

よくある質問

Q: スクリプトやアニメーションがプレビューから消えたのは? A: スクリプトは意図的に除去しています。任意コードを実行できる SVG エディタはセキュリティ上の穴になるため、静的ベクターのみ描画します。

Q: 書き出しで canvas の汚染(tainted)エラーが出ました。 A: SVG が外部画像やフォントを参照している場合に起きます。そのような canvas からピクセルを読み戻すことはブラウザが禁止します。素材を SVG にインライン化してから再度出力してください。

Q: PNG のサイズは? A: SVG 自身の width/height(なければ viewBox)に現在の倍率を掛けた値で、一辺 4096 px が上限です。サイズ指定がまったくない場合は 300x150 として扱います。

データはこのデバイス内にとどまります

SVG Editor は 100% ローカルで動作します。貼り付けたり、ドロップしたデータはすべてお使いのブラウザ内で処理され、送信されることはありません。当社のサーバーには何も保存されません——タブを閉じればすべて消えます。

入力された内容がサーバーへ送信・記録・解析利用されることはありません。初回読み込み後はネットワークを切断していてもこのページは動作します。