このSVGビューアは無料ですか？

はい、個人・商用利用ともに完全無料でご利用いただけます。

SVGファイルは保存されますか？

いいえ。すべての処理はブラウザ内でクライアントサイドで行われ、ファイルはいかなるサーバーにもアップロードされません。

SVGビューアとは何ですか？何ができますか？

SVGビューアはSVGベクターグラフィックスファイルを表示・検査するためのツールです。このツールではコードのフォーマット・圧縮・ライブ編集も行えます。

SVGコードを編集してリアルタイムで変更を確認できますか？

はい。コードエディタでの編集内容はプレビューパネルに即座に反映されるため、パス・色・サイズをリアルタイムで調整しながらベクターグラフィックの変化を確認できます。

SVGをオンラインでPNGに変換するには？

このツールはSVGの表示・編集・整形・縮小用で、PNGの書き出しには対応していません。当サイトの画像変換ツールもSVGの入力には対応していません。PNGにするには、rsvg-convert (rsvg-convert -w 512 -o icon.png icon.svg)やInkscape (inkscape icon.svg --export-type=png)などのコマンドラインツールを使ってください。

URLからSVGを読み込めますか？

直接は読み込めません（URLの入力欄はありません）。ブラウザでリンクを開いて.svgファイルを保存するか、ソースを表示してマークアップをコピーし、ここでファイルを開くかコードを貼り付けてください。

無料オンラインSVGビューアー＆エディター

SVGをオンラインで開き、ライブプレビューを見ながらコードを編集・整形・最適化。ズームや書き出しに対応し、すべてブラウザ内で安全に処理します。

SVGファイルを開くか、SVGコードを貼り付けると、ライブプレビューパネルに即座に表示されながらコードを左右並べて編集できます。このオンラインSVGビューア・エディタはブラウザ内でベクターグラフィックスをレンダリングし、ファイルをアップロードせずにパスや図形をズームして検査したり、コードをフォーマット・圧縮したりでき、すべてローカルで処理されます。

SVGファイルをここにドラッグ＆ドロップ

またはクリックして参照

コード

sample.svg • 673

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="200" height="200">
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" style="stop-color:#3b82f6;stop-opacity:1" />
      <stop offset="100%" style="stop-color:#8b5cf6;stop-opacity:1" />
    </linearGradient>
  </defs>
  <circle cx="100" cy="100" r="90" fill="url(#grad1)" />
  <path d="M60 100 L90 130 L140 70" fill="none" stroke="white" stroke-width="20" stroke-linecap="round" stroke-linejoin="round" />
  <text x="50%" y="180" text-anchor="middle" fill="white" font-family="Arial, sans-serif" font-size="24" font-weight="bold">SVG Viewer</text>
</svg>

プレビュー

100%

なぜオンラインでSVGビューアーを使うのですか？

SVGファイルを開くかコードを貼り付けて、描画結果を見ながら編集し、ベクターのマークアップを整形・縮小できます。デザインソフトやデスクトップアプリのインストールは不要です。

SVGビューアーについて

SVG（Scalable Vector Graphics）は、インタラクションやアニメーションにも対応したXMLベースの2次元ベクター画像形式です。このツールはSVGのコードと描画プレビューを並べて表示するので、コードの修正、見た目の確認、ファイルサイズの削減をブラウザ内で行えます。アイコンのデバッグやベクターイラストの微調整に便利です。

SVGビューアーの主な機能

編集と同時にプレビュー

コードエディタでの変更は、その場でプレビューに描画されます。プレビューは10%〜500%で拡大縮小でき、拡大した状態でスクロールしてパスや図形、スタイルを確認できます。

ブラウザ内で処理

SVGの読み込み・描画・整形はブラウザ上のJavaScriptで行われます。開いたファイルや貼り付けたコードがサーバーにアップロードされることはありません。

整形・縮小・ダウンロード

「SVGを整形」はマークアップを4スペースでインデントし直し、「SVGを縮小」はコメントとタグ間の空白を取り除きます。結果はコピーするか、.svgファイルとしてダウンロードできます。

SVGビューア＆エディタの使い方

1
SVGを読み込む
.svgファイルを開くかエディタにドラッグ＆ドロップするか、SVGコードをエディタに直接貼り付けます。
2
リアルタイムプレビュー
右側のパネルが入力に合わせてSVGをすぐに描画します。拡大・縮小し、プレビューをスクロールして図形やパス、スタイルを確認できます。
3
コードをフォーマット・圧縮する
「SVGを整形」で4スペースのインデントに整え、「SVGを縮小」でコメントや空白を除去してファイルサイズを減らします。
4
コピーまたはダウンロード
最適化されたSVGコードをクリップボードにコピーするか、プロジェクト用に.svgファイルをダウンロードします。

参考文献

W3C — SVG 2
SVGベクターグラフィックス形式・要素・属性を定義するW3Cの公式仕様。
MDN — SVG
SVG要素・属性およびブラウザでのベクターグラフィックスレンダリングに関するMDNリファレンス。

よくある質問

このSVGビューアは無料ですか？: はい、個人・商用利用ともに完全無料でご利用いただけます。
SVGファイルは保存されますか？: いいえ。すべての処理はブラウザ内でクライアントサイドで行われ、ファイルはいかなるサーバーにもアップロードされません。
SVGビューアとは何ですか？何ができますか？: SVGビューアはSVGベクターグラフィックスファイルを表示・検査するためのツールです。このツールではコードのフォーマット・圧縮・ライブ編集も行えます。
SVGコードを編集してリアルタイムで変更を確認できますか？: はい。コードエディタでの編集内容はプレビューパネルに即座に反映されるため、パス・色・サイズをリアルタイムで調整しながらベクターグラフィックの変化を確認できます。
SVGをオンラインでPNGに変換するには？: このツールはSVGの表示・編集・整形・縮小用で、PNGの書き出しには対応していません。当サイトの画像変換ツールもSVGの入力には対応していません。PNGにするには、rsvg-convert (rsvg-convert -w 512 -o icon.png icon.svg)やInkscape (inkscape icon.svg --export-type=png)などのコマンドラインツールを使ってください。
URLからSVGを読み込めますか？: 直接は読み込めません（URLの入力欄はありません）。ブラウザでリンクを開いて.svgファイルを保存するか、ソースを表示してマークアップをコピーし、ここでファイルを開くかコードを貼り付けてください。

コード