SVGビューア

SVG入力
0文字
ローカルプレビュー、信頼できないソースからのスクリプト内容を貼り付けないでください

オンラインSVGビューア。SVGコードを貼り付けるだけでベクター画像をリアルタイムでレンダリングしてプレビュー、コピーと.svgファイルのダウンロードに対応。ローカル処理で安全に使用できます。

関連おすすめ

画像変換

画像圧縮

画像サイズ変更

画像切り抜き

画像編集

ICO生成

SVGとは？

SVG（Scalable Vector Graphics、スケーラブルベクターグラフィックス）は、XMLで幾何学的形状を記述する画像形式です。JPGやPNGのようなビットマップ（ピクセルマトリックス）とは異なり、SVGは<rect>、<circle>、<path>などのタグで図形の数学的パスを記述するため、どのようなサイズに拡大縮小してもぼやけることがありません。

**SVGはどのような場面に適していますか？** ロゴ、UIアイコン、フローチャート、地図マーカー、チャート、アニメーション装飾、再利用可能なイラスト——これらは鮮明さ、色変更、スケーラビリティ、CSSによる制御が求められる場面であり、SVGが最適です。

**Canvasとの違い：** Canvasは命令的な描画APIで、描画後はピクセルになります；SVGは宣言的なDOMノードで、属性、CSSスタイルをいつでも変更したりイベントをバインドしたりできます。そのため、アイコン、UI、インタラクティブな場面にはSVGを、ゲーム、パーティクル、ピクセルアートにはCanvasを使用します。

**一般的な構成要素：** &lt;svg&gt;ルート要素、&lt;g&gt;グループ、&lt;path&gt;パス（d属性を持つ最も一般的な要素）、グラデーション（&lt;linearGradient&gt;/&lt;radialGradient&gt;）、フィルター（&lt;filter&gt;）、アニメーション（SMIL/CSS/JS）。

**プレビュー方法：** このツールでSVGソースコードをエディタに貼り付けると、右側にリアルタイムでレンダリングされます。ドラッグ可能な分割ペインレイアウトにより、SVGコードが正しいか、表示効果が期待通りかを数秒で確認できます。

ユースケース

  • フロントエンド開発者がSVGアイコンコードのレンダリング効果をすばやくプレビュー
  • Figma、SketchなどのデザインツールからコピーしたSVGの表示効果を検証
  • SVGパス、色、viewBox属性をデバッグしながら変化をリアルタイムで確認
  • プロジェクトコードに統合する前にSVGコードを確認および検証

使い方

  1. SVGソースコードを左側のエディタに貼り付けるか、「サンプルを読み込む」をクリックしてデモを表示
  2. 右側にベクター画像のレンダリング結果が即座に表示されます。コードを編集するとリアルタイムでプレビューが更新
  3. 問題がなければコピーボタンをクリックしてコードをコピーするか、カスタムファイル名で.svgファイルとしてダウンロード

特徴

  • リアルタイムプレビュー：SVGコードを貼り付けまたは編集すると即座にベクター画像をレンダリング、WYSIWYG
  • 分割レイアウト：デスクトップでは左右ペインをドラッグして幅調整、モバイルではタブで入力とプレビューを切り替え
  • ワンクリックエクスポート：SVGソースコードをクリップボードにコピー、またはカスタムファイル名で標準.svgとしてダウンロード
  • ローカル処理：SVGの解析とレンダリングはすべてブラウザ内で実行、コードがデバイスから出ることはなく安全
  • 透明背景：チェッカーボード背景でSVGの透明領域とエッジのディテールを鮮明に表示
  • 文字数カウント：リアルタイムでコードの文字数を表示、内蔵サンプルですぐに使い始められる

よくある質問

オンラインでSVGコードの表示効果をプレビューするには？

SVGソースコードを左側のエディタに貼り付けると、右側にベクター画像が即座にレンダリングされます。エディタ内でコードを直接編集すると、プレビュー領域がリアルタイムで更新されるため、フロントエンドのアイコンデバッグや効果確認に便利です。

プレビューしたSVGをダウンロードして保存するには？

プレビュー領域の右上にあるダウンロードボタンをクリックすると、ファイル名をカスタマイズして標準.svgファイルとして保存できます。コピーボタンをクリックしてSVGソースコードをクリップボードにコピーし、プロジェクトコードに直接貼り付けて使用することもできます。

SVGコードはサーバーにアップロードされますか？安全ですか？

いいえ。SVGの解析とレンダリングはすべてローカルブラウザ内で実行され、SVGコードがサーバーにアップロードされることはありません。処理後はメモリから破棄されるため、未公開のアイコン素材やデザイン案が流出するリスクを防ぎます。

デザインソフトからコピーしたSVGコードに対応していますか？

はい。Figma、Sketch、Adobe IllustratorなどのデザインソフトからコピーしたSVGコードを直接貼り付けてプレビューできます。プロジェクトに統合する前に、レンダリング結果を確認することをお勧めします。

SVGプレビューが表示されないのはなぜですか？よくある原因は？

よくある原因：①xmlns="http://www.w3.org/2000/svg"名前空間宣言の欠落；②コード内の閉じられていないタグ；③特殊文字の正しくないエスケープ；④SVG自体の構文エラー。これらの項目を確認してください。

ダウンロードするSVGファイル名をカスタマイズできますか？

はい。ダウンロードボタンをクリックするとファイル名入力ボックスが表示され、ファイル名をカスタマイズ（デフォルトはimage.svg）して、Enterキーを押すか確認をクリックするとダウンロードできます。ツールが自動的に.svg拡張子を追加します。

用語集

viewBox
SVG内部の座標系で、「x y width height」形式で指定します。一般的な「0 0 24 24」は幅と高さが24単位であることを意味します。SVGの実際の表示サイズはwidth/height属性または外部CSSで制御されます。
XML名前空間（namespace）
SVGはブラウザにSVGドキュメントとして正しく認識させるために、xmlns="http://www.w3.org/2000/svg"を宣言する必要があります。名前空間の欠落は、HTMLでSVGが表示されない最も一般的な原因です。MDN - SVG名前空間
path d属性
M/L/C/Q/H/V/Zなどの文字と座標で構成されるパスコマンドセットです。M=移動、L=線を引く、C=3次ベジェ曲線、Q=2次ベジェ曲線、Z=パスを閉じる。複雑なアイコンは多くの場合、単一のpath要素とそのd属性のみで表現されます。
currentColor
現在の要素のcolorプロパティを参照するCSSキーワードです。SVGでfillまたはstrokeをcurrentColorに設定すると、外部CSSのcolor変更でアイコンの色を変更できるようになり、デザインシステムで一般的に使用される手法です。

SVG主要要素クイックリファレンス

要素種類用途
<svg>ルート要素すべてのSVGのコンテナ、必須
<rect>基本図形長方形、角丸長方形
<circle> / <ellipse>基本図形円 / 楕円
<line> / <polyline>基本図形直線 / 折れ線
<polygon> / <path>パス多角形 / 任意曲線（d属性）
<text> / <tspan>テキストSVG埋め込みテキスト
<g>グループ要素をグループ化して一括変形
<defs> / <symbol>定義再利用可能な図形とグラデーション
<linearGradient> / <radialGradient>グラデーション線形 / 放射グラデーション塗り
<use>参照defs内の要素を参照
<filter>フィルターぼかし、ドロップシャドウなどの高度な効果

SVGとビットマップ形式の比較

項目SVG（ベクター）PNG（ビットマップ）JPG（ビットマップ）
構成方法XMLが幾何学的パスを記述ピクセルマトリックスピクセルマトリックス（DCT圧縮）
拡大効果どのサイズでも鮮明拡大するとぼやける拡大するとぼやけて圧縮痕が目立つ
ファイルサイズパスの複雑さによる、ロゴは通常<10KB中程度（無損失）小さめ（損失あり）
透明背景✅✅❌
アニメーション✅ SMIL / CSS / JS❌（APNGが必要）❌
CSSによる色変更✅ currentColor / fill変数❌❌
適した用途アイコン、ロゴ、UIベクター透明背景素材、スクリーンショット写真、大きなグラデーション

Authoritative References