SVGビューア
オンラインSVGコードエディタ＆ライブプレビュー
SVGビューアとは？
SVGビューアは、SVGコードの編集とライブプレビューができるオンラインツールです。SVGコードを直接入力または貼り付けると、レンダリング結果をリアルタイムで確認できます。SVG（Scalable Vector Graphics）はXMLベースのベクター画像フォーマットで、Webデザイン、アイコン作成、データビジュアライゼーションに広く使用されています。
このツールはリアルタイムプレビュー、ソースコード表示、SVGファイルダウンロードなどをサポートしています。
使い方
使い方
- 左側のエディタにSVGコードを入力または貼り付けます
- 右側のパネルにSVGがリアルタイムでレンダリングされます
- 入力したSVGはシンタックスハイライト付きで見やすく表示されます
- 「ダウンロード」ボタンでSVGをファイルとして保存します
- 「SVGコピー」ボタンでコードをクリップボードにコピーします
SVGのセキュリティ
- 可能な限り信頼できるソースからのSVGのみ貼り付けてください。SVGにはスクリプト、外部参照、予期しないスタイルが含まれる場合があります。
- ダウンロードや埋め込みの前に、viewBox、サイズ、塗り、線、テキストのレンダリングを対象サイズで確認してください。
利用シーン
仕組み
SVGソースは new DOMParser().parseFromString(source, 'image/svg+xml') で解析され、HTMLの寛容なパーサーではなくXMLルールに基づいて構築されたDocumentを返します。パーサーは整形式性をチェックし、無効なマークアップでは <parsererror> ノードを表示し、SVGツリーをDOMの他の部分と同様にスクリプトやCSSから操作できるように公開します。<path>、<circle>、<rect>、<g>、<text>、<defs>、<linearGradient>、<filter> などの要素は、独自の属性とイベントターゲットを持つ第一級ノードです。 座標系はviewBox属性によって制御されます。viewBox="minX minY width height" は内部座標空間を定義し、preserveAspectRatio（デフォルトはxMidYMid meet）はその空間をレンダリングビューポートにどうマッピングするかを決定します。meetはレターボックスを追加してviewBox全体を保持し、sliceはクロッピングでビューポートを埋め、noneは非均一にストレッチします。d属性内のパスコマンドはM（moveTo）、L（lineTo）、C（三次ベジェ）、Q（二次ベジェ）、A（楕円弧）、Z（パス閉じ）を使用し、各コマンドには絶対大文字形式と相対小文字形式があります。 SVGのセキュリティは明示的な対応が必要です。このフォーマットは実行可能なためです。<script>、HTMLを含むforeignObject、外部URLへのxlink:href、onloadやその他のイベントハンドラ属性はすべて、SVGがインラインで挿入された場合にページコンテキストでJavaScriptを実行できます。第三者のSVGを受け入れる際の標準的な緩和策は、SVGプロファイル付きのDOMPurifyまたはサーバーサイドのサニタイザです。PNGへのラスタライズは、SVGをBlob URLからHTMLImageElementとして読み込み、drawImageでキャンバスに描画し、canvas.toBlob('image/png')でダウンロード用に出力することで行われます。
- パーサー：new DOMParser().parseFromString(source, 'image/svg+xml') は厳密なXML Documentを返し、失敗時は <parsererror> ノードを表示する
- viewBox："minX minY width height" は内部座標空間を設定し、preserveAspectRatio xMidYMid meet/slice がフィットとクロップを制御する
- パスコマンド：M moveTo、L lineTo、C 三次ベジェ、Q 二次ベジェ、A 弧、Z パス閉じ。大文字 = 絶対座標、小文字 = 相対座標
- セキュリティ面：インラインの <script>、foreignObject、外部URLへのxlink:href、onload/onclickハンドラはJavaScriptとして実行される
- サニタイズ：USE_PROFILES: { svg: true } を指定したDOMPurifyは、第三者SVGの挿入前にスクリプトとイベントハンドラを除去する
- PNGエクスポート：Blob URLでHTMLImageElementにSVGを読み込み、drawImageでキャンバスに描画し、canvas.toBlob('image/png')でダウンロード
- ブラウザベースライン：2011年以降のすべてのエバーグリーンブラウザでSVG 1.1をサポート。SVG 2の機能（パス上のテキスト改善など）は部分的
使用例
円
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="40" fill="#2563eb" />
</svg>矩形
<svg width="120" height="80" xmlns="http://www.w3.org/2000/svg">
<rect x="10" y="10" width="100" height="60" rx="8" fill="#10b981" />
</svg>星
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<polygon points="50,5 61,35 95,35 68,57 79,91 50,70 21,91 32,57 5,35 39,35" fill="#f59e0b" />
</svg>よくある質問
このビューアでは何ができますか？
貼り付けた SVG マークアップを描画し、ズームやパン、シンタックスハイライト付きのソースコード表示、画像サイズや viewBox の確認ができます。サードパーティ製 SVG の調査、パスデータのデバッグ、プロジェクトに追加する前のアイコンのプレビューに便利です。
SVG はアップロードされますか？
いいえ。ページはブラウザ内で SVG をパースおよび描画します。SVG は単なるマークアップであり、ブラウザは元から表示方法を知っています。貼り付けたコードがネットワークを越えることはありません。
デザインソフトで見たときと表示が違うのはなぜ？
SVG はユーザーエージェントによって描画方法が異なります。ブラウザ、Figma、Illustrator、Inkscape は一部のエッジケース（テキスト描画、フィルタ効果、メッシュグラデーション、クリップパスなど）の解釈が異なります。このビューアはブラウザによる描画結果を表示するため、HTML 上でエンドユーザーが目にするものと同じです。
ここで SVG を編集できますか？
左側でソースを編集し、再描画することは可能です。視覚的な編集（点をドラッグして移動する、パスを変更するなど）には、Inkscape、Figma、Boxy SVG などの本格的な SVG エディターを使用してください。本ページはビューアと簡易テキスト編集を兼ねたものです。
SVG をプロジェクトに取り込むには？
ソースをコピーしてください。多くのフロントエンドフレームワークは JSX/HTML 内のインライン SVG を直接受け付けます。背景として使う場合はアセットフォルダに置いて url(...) で参照します。アイコンフォントとして使うには、svgo などのビルドステップとスプライトジェネレーターを通す必要があります。
SVG のサイズが大きいのはなぜ？
多くの SVG 出力にはエディターのメタデータ（Adobe Illustrator の XMP、Inkscape の :inkscape: 名前空間）、未使用の defs、コメント、冗長なパスデータが含まれます。SVGO（オンラインまたは CLI）を通すと、見た目を変えずに通常 30〜70% 縮小できます。
外部リソースは読み込まれますか？
ほとんどのビューアは安全のため外部読み込みをブロックします（外部の <image href> や <use href> URL は取得されません）。SVG が依存している場合は、参照しているビットマップを data: URI として埋め込み、外部 href を持つ <use> はインラインのコピーに変換してください。