SVGを貼り付けるか開くと、コードの横に画像が表示されます。その場で編集し、明るい背景・暗い背景・市松模様で確認、パスコマンドを調べ、整理してPNGやReactコンポーネントとして書き出せます。
SVGコードを貼り付けるか .svg ファイルを開くと、コードの横に画像が表示されます。コードを編集すると、入力に合わせてプレビューが再描画されます。背景を切り替えて透明部分を確認し、ズームし、すべてのパスコマンドを一覧表示し、エディター由来の余計な情報を取り除いたうえで、SVG、PNG、Reactコンポーネントとしてダウンロードできます。
書き出せる形式
コード表示とライブプレビューを並べて表示します。何もアップロードされません。ファイルはあなたのブラウザーで読み込まれて描画され、プレビューは画像として表示されるため、SVG内のスクリプトが実行されることはありません。
最近のブラウザーならSVGファイルを直接開けますが、表示されるのは画像だけです。コードと画像を一緒に見たい場合は、このビューアーの「ファイルを開く」ボタンを使うか、ファイルをコード欄にドラッグしてください。
いいえ。ファイルはブラウザーで読み込まれ、ローカルで描画されます。ここで開いたものや入力したものがサーバーに送信されることはありません。
よくある原因は、svg 要素に xmlns="http://www.w3.org/2000/svg" 属性がない、viewBox が描画のない場所を指している、白い背景の上に白い図形がある、のいずれかです。市松模様の背景を試し、プレビューの下のエラー行を確認してください。
コメント、XML宣言、doctype、メタデータブロック、Inkscape、Sketch、Serif などのツール固有の属性、空のグループです。小数も選んだ精度に丸めます。パスの結合や図形の変更は行わないため、見た目は変わらないはずです。
JSXの出力をコピーしてください。stroke-width を strokeWidth に、class を className にするなど属性をReactの名前に変換し、style の文字列をオブジェクトに変え、コンポーネントに渡した props を svg 要素にそのまま引き渡します。
移動
直線
水平線
垂直線
3次曲線
滑らかな3次曲線
2次曲線
滑らかな2次曲線
円弧
パスを閉じる
<script> 要素
on… イベント属性
javascript: リンク
HTMLを含む <foreignObject>
白
ダーク
市松模様
マークアップが有効なXMLではありません。
ルート要素が <svg> ではありません。
<svg で始まり </svg> で終わるマークアップを貼り付けてください。
ファイルが5 MBを超えています。もっと小さいSVGを開いてください。
{name} を開きました。
プレビューが読み込まれていないため、まだ書き出せるものがありません。
{w} × {h} のPNGを保存しました。
コード
ファイルを開く
サンプル
SVGコード
{bytes} バイト · パス {n} 個
{bytes} バイト · パス {n} 個
このSVGには {parts} が含まれています。ここでのプレビューは安全ですが、それを取り除かずにページへインラインHTMLとして貼り付けないでください。
プレビュー
ズーム
SVGのプレビュー
ブラウザーで描画しています。SVG内のスクリプトはここでは実行されません。
パスインスペクター
このSVGには path 要素がありません。
パス {n}
パス {n} のコマンド
コマンド
数値
（相対）
パスを選ぶと、プレビューで強調表示され、そのコマンドが一覧表示されます。
整理と書き出し
小数点以下の桁数
整理しました：{before} バイトから {after} バイトへ。
整理する
SVGをダウンロード
JSXとしてコピー
無料で始める · クレジットカード不要