SVGビューア&エディター

ブラウザで任意のSVGを開き、プレビュー、編集できます。入力すると変更がリアルタイムに反映され、キャンバスのズームやパン、コードの整形や最適化、回転や反転、SVGまたはPNGとしてダウンロードできます。無料、プライベート、即時。

プレビュー

SVGを貼り付けるかアップロードするとプレビューできます

SVGはブラウザ内でここに描画されます。共有を押さない限り、何もアップロードされません。

100%
SVGコード

このSVGを共有

安全にサニタイズされたコピーを保存し、誰でも7日間開ける公開リンクを取得します。7日を過ぎるとファイルは削除され、リンクは使えなくなります。スクリプト、イベントハンドラー、外部または埋め込み画像への参照は削除されるため、外部画像を参照していた共有ファイルは空白で表示される場合があります。

別の書き出しが必要ですか? SVGをBase64へ, SVGをReactへ, SVGオプティマイザー.

SVGを扱うためのすべて

Live Two-Way Editing

Edit the SVG code and the preview updates instantly. Upload or paste and the code panel fills in. The source and the canvas always stay in sync.

Inspect Any SVG

Zoom, pan, and switch the background between transparent, light, dark, or any custom color to check edges, anti-aliasing, and transparency.

Prettify and Optimize

Format messy SVG with clean indentation, or run SVGO to strip metadata and bloat and see the exact bytes saved before you download.

Rotate and Flip

Rotate 90 degrees or flip horizontally and vertically. The transform is baked into the SVG source, so your exported file reflects it exactly.

Export SVG or PNG

Download the edited SVG, or rasterize the canvas to a crisp PNG at intrinsic size or 2x, flattened onto your chosen background.

Private by Default

Viewing, editing and exporting run in your browser, so your file stays on your device. Only the optional Share button uploads a copy, to create a link.

SVGの表示と編集方法

1

Open your SVG

Upload an .svg file, paste SVG code, or load the sample. The preview and the code panel populate side by side.

2

Inspect and edit

Zoom, pan, and change the background to inspect the artwork. Edit the code directly and watch the preview update live as you type.

3

Clean it up

Prettify the markup for readable indentation, or optimize with SVGO to shrink the file. Rotate or flip if you need a different orientation.

4

Download

Copy the code, download the edited SVG, or export a crisp PNG at intrinsic size or 2x, ready for any app or platform.

適切なツールを選択

このページが存在する理由

Use the SVG viewer and editor to open, preview, and tweak a vector file in the browser, with a live two-way code editor, zoom and pan, prettify and SVGO optimize, rotate and flip, and SVG or PNG export.

最適な用途

  • Quickly inspecting an SVG without opening a design app
  • Editing paths, colors, and attributes with a live preview
  • Cleaning up, rotating, or re-exporting a vector file

SVGビューアー&エディター FAQ

Upload your .svg file, paste SVG code, or load the built-in sample. The SVG renders instantly on the preview canvas, where you can zoom, pan, and switch the background to inspect it. Nothing is uploaded to a server unless you press Share.

Yes. The code panel is fully editable. As you type, the preview updates automatically after a short debounce, so editing paths, colors, and attributes shows the result immediately. Uploading or pasting fills the code panel the other way.

Prettify reformats the SVG with clean indentation so it is easy to read and edit, without changing what it renders. Optimize runs SVGO to remove editor metadata, redundant attributes, and bloat, then shows the exact bytes and percentage saved.

Rotate 90 degrees and the horizontal and vertical flips are written directly into the SVG source, including a swapped viewBox for rotation, so the change is permanent and shows up in both the SVG and PNG you download, not just on screen.

Yes. Click Download PNG to rasterize the current canvas at the SVG's intrinsic size, or enable 2x for a higher-resolution export. The PNG is flattened onto your selected background, or kept transparent if that background is active.

Only if you press Share. Viewing, editing, optimizing, and exporting all happen in your browser, so your file stays on your device. Share uploads a cleaned copy of the SVG to our servers so we can host it at a link you can send to other people.

SVGを無料で表示・編集

ブラウザから離れずに、あらゆるSVGをプレビュー、編集、最適化、書き出しできます。