SVGコードやファイルを貼り付けるだけで、その場で描画を確認できます。viewBoxの欠落、id重複、スクリプト混入といった不具合を自動診断し、不要な記述を削除した軽量なコードとして書き出せます。
このツールはブラウザの中だけで動いています。入力した内容が、外部に送信されることはありません。入力内容は外部に送信されません。
詳しく入力ソース
ファイルをここにドロップ
プレビュー
SVGの待機中
最適化設定
削除・整形
カラーとid
空欄で元の色を維持。currentColor にするとCSSの文字色を継承します。グラデーション参照（url）は対象外です。
サイズ指定
px、%、rem、1em などが使えます。viewBoxは削除されないため、比率は保たれます。
座標の精度
座標を持つ属性の数値だけを丸めます。idやテキストの数字は書き換えません。曲線が角張って見える場合は桁数を増やしてください。
SVGビューア・コード検査ツールとは？
本ツールは、SVGコードやファイルを貼り付けるだけでその場で描画を確認できるオンラインビューアです。ファイルをアップロードする必要はなく、すべての処理がブラウザ内で完結します。背景を透明・白・黒・青から切り替えられるため、白いアイコンや透過部分の見え方も確認できます。
さらに、単に表示するだけでなくコードの不具合を自動診断します。viewBoxの欠落（拡大縮小できない原因）、width / heightのピクセル固定（CSSが効かない原因）、id属性の重複（複数配置で色が崩れる原因）、スクリプトやイベント属性の混入（セキュリティリスク）、外部URLへの参照、style要素の影響範囲などを検出し、それぞれ原因と対処法を日本語で提示します。
診断のうえで、不要なメタデータやエディタ固有属性の削除、座標の丸め、fill / strokeのcurrentColor化、idのユニーク化といった最適化まで一画面で行えます。
こんなシーンで便利です
SVGの中身をすぐ確認したいとき
ファイルをブラウザで開いたり、エディタに貼り直したりする手間なく、コードとプレビューを並べて確認できます。
「SVGが表示されない」の原因調査
拡大縮小しない、サイズが効かない、色が変わらないといった症状の原因を、診断パネルから切り分けられます。
複数配置で描画が崩れる問題の解消
id重複を検出し、接頭辞を付けてユニーク化。参照側のurl記法も同時に書き換えるため、貼り付けるだけで解決できます。
配布SVGの安全確認とクリーンアップ
script要素やon属性の混入を検出して除去。素材サイトから入手したSVGを社内サイトへ配置する前の検査に使えます。
使い方は簡単 4ステップ
- SVGコードを貼り付けるか、ファイルをドロップまたは選択して読み込みます。
- 右側のプレビューで描画を確認し、背景色を切り替えて透過部分もチェックします。
- 診断パネルで検出された問題と対処法を確認します。
- 最適化設定を調整し、「コードをコピー」または「SVGを保存」で書き出します。
※入力欄が空のときに表示される「サンプルのSVGで試す」から、動作をすぐに確認できます。
ご利用時の注意点
- 安全性：プレビューでは常にscript要素とイベント属性、javascript:形式のリンクを除去してから描画しています。書き出すコードからも既定で削除されます。
- 座標の丸め：座標を持つ属性（d、points、transform、viewBoxなど）の数値だけを対象としています。id名やテキスト内の数字は書き換えません。
- title要素の扱い：スクリーンリーダーでの読み上げに使われるため、既定では削除しません。装飾目的のアイコンでは削除したうえで、配置先の要素に aria-hidden="true" を付けてください。
- カラーの一括変更：fillとstrokeの属性値を書き換えます。url()によるグラデーション参照は壊さないよう対象外としています。元の色は保持されないため、必要な場合は変換前にバックアップしてください。
- 用途別の変換は専用ツールをご利用ください。CSSへ埋め込む形式はSVG→Data URI変換、Reactコンポーネント化はSVG→JSX変換、複数アイコンの集約はSVGスプライト生成に対応しています。
SVGでよく起きる不具合と、本ツールの診断項目の対応表
「表示されない」「サイズが効かない」「色が崩れる」といった症状の原因は、コード上のいくつかのパターンに集約されます。
| 症状 | 考えられる原因 | 対処法 | 自動診断 |
|---|---|---|---|
| CSSで幅を指定しても拡大縮小しない | viewBox属性の欠落 | viewBox="0 0 幅 高さ" を追加する | 検出する |
| 指定したサイズにならない | width / height のピクセル固定 | 属性を削除してCSSに委ねる | 検出する |
| 複数配置すると色やグラデが崩れる | id属性の重複 | idに接頭辞を付けてユニーク化する | 検出・修正可 |
| CSSで色を変えられない | fillがカラーコードで固定 | currentColorへ一括置換する | 修正可 |
| 読み込み時に一瞬レイアウトがずれる | アスペクト比が確定していない | viewBoxを保持し、CSSで比率を固定する | 検出する |
| JSXで属性の警告が大量に出る | xmlns:xlink など非標準属性 | エディタ固有属性を削除する | 修正可 |
| ページ全体のスタイルが崩れる | SVG内のstyle要素とクラス名の衝突 | クラス名を一意にするか属性形式へ変換 | 検出する |
| 表示されない・警告が出る | script要素やon属性の混入 | スクリプトとイベント属性を除去する | 検出・修正可 |
| 参照先が消えて表示が欠ける | 外部URLへの参照 | 画像を埋め込むか自サーバーへ配置する | 検出する |
viewBoxを消してはいけない理由
軽量化を優先してviewBoxまで削除すると、ブラウザは正しいアスペクト比を計算できなくなります。CSSで幅だけを指定しても高さが追従せず、読み込み時にレイアウトがずれるCLS（累積レイアウトシフト）の悪化にも直結します。width / heightはCSSで制御するために削除して構いませんが、viewBoxは必ず残してください。本ツールはviewBoxを削除しません。
React / Next.js 開発者へのヒント
Figmaなどからコピーしたコードには、JSX上で警告となる xmlns:xlink や xmlns:figma といった属性が含まれることがあります。本ツールのエディタ固有属性の削除を有効にすると、これらを取り除いた状態で書き出せます。属性名のキャメルケース変換まで必要な場合は、SVG→JSX変換ツールをご利用ください。
SVGをWebサイトへ配置する際の描画パフォーマンスとセキュリティの実務指針
コードを整えるだけでなく、配置方法の選択や安全性の担保まで含めて、実際のプロダクトで破綻させないための考え方を整理します。
インライン配置とimg配置の使い分け、そしてDOMノード数の上限
SVGをHTMLへ直接書くインライン配置はCSSで色を制御できる利点がある一方、パスの数だけDOMノードが増えます。アイコンを数十個並べるとノード数が膨らみ、Lighthouseの警告対象になるほか、ブラウザのパース処理そのものが遅くなります。
色の変更が不要なら <img src="icon.svg"> での配置がノード数を消費せず有利です。色を変えたいアイコンが多数ある場合は、SVGスプライト（useタグによる参照）へ集約する方法が、柔軟性と軽さを両立できます。
配布元が不明なSVGに潜むリスクと、受け入れ前に行うべき検査
SVGは画像形式でありながらscript要素やイベント属性を記述できるという特性を持ちます。素材サイトやユーザー投稿から受け取ったSVGをそのままインライン配置すると、スクリプトが実行される危険があります。
受け入れ前に、script要素、on属性、javascript:で始まるリンク、外部URLへの参照が含まれていないかを必ず確認してください。ユーザー投稿を受け付けるサービスでは、サーバー側でのサニタイズを併用し、可能であれば <img> 経由で配置してスクリプト実行を封じる設計が安全です。
Content Security Policyと衝突しないコードの書き方
厳格なContent Security Policy（CSP）を設定したサイトでは、インラインスタイルや外部リソースの読み込みが制限されます。SVG内部の style 要素や style 属性、外部URLへの参照はこのポリシーに抵触し、描画エラーやコンソール警告の原因となります。
対策としては、スタイルをプレゼンテーション属性（fill、stroke）へ展開し、外部参照は自サーバー上のリソースへ置き換えることです。本ツールはstyle要素の存在と外部参照を診断項目として検出します。
アクセシビリティを損なわずにSVGを配置するための最小限のルール
SVGの扱いは、意味を持つ図かどうかで二分されます。ロゴや説明図など意味のある場合は、role="img" と title 要素または aria-label を付けて内容を伝えます。
一方、テキストラベルが隣にあるアイコンなど純粋な装飾の場合は、aria-hidden="true" を付けて読み上げから除外してください。読み上げ対象と装飾が混在すると、スクリーンリーダーの利用者には冗長で理解しにくい画面になります。本ツールはtitle要素の有無を診断し、どちらの対応が必要かを判断する材料を提示します。
SVGの扱いでよくある失敗と対策
viewBoxを削除してしまい、拡大縮小できずレイアウトが崩れる失敗
軽量化のつもりで不要そうな属性を一括削除した結果、viewBoxまで消してしまうケースです。viewBoxがないとブラウザはアスペクト比を計算できず、CSSで幅を指定しても高さが追従しません。読み込み時に要素の高さが確定しないため、コアウェブバイタルのCLS（累積レイアウトシフト）が悪化する原因にもなります。
💡 対策・解決策を見る▼
id属性の重複に気づかず、同一ページで色やグラデーションが崩れる失敗
同じデザインツールから書き出した複数のSVGには、linearGradientやclipPathに同名のidが付いていることがよくあります。これらを同一ページへインライン配置すると、参照が先に現れた方へ向いてしまい、片方のアイコンだけ色が消える、別のアイコンの色に染まるといった不可解な描画バグが発生します。W3Cのバリデーションエラーにもなります。
💡 対策・解決策を見る▼
配布元が不明なSVGを検査せずに配置し、スクリプトを実行させてしまう失敗
SVGは画像でありながらscript要素やonload属性を記述できる形式です。素材サイトやユーザーからの提供物をそのままインライン配置すると、埋め込まれたコードが実行されます。画像だから安全という思い込みが、そのまま脆弱性につながる典型的なパターンです。
💡 対策・解決策を見る▼
fillを固定値のままにして、CSSやホバーで色を変えられなくなる失敗
書き出されたSVGのpathには、fill="#333333" のようにカラーコードが直接書き込まれていることがほとんどです。この状態ではCSSのクラスやホバー時の色変更が効かず、色違いのファイルを何枚も用意して読み込ませる非効率な設計に陥ります。リクエスト数の増加とソースの肥大化にも直結します。
💡 対策・解決策を見る▼
よくある質問（FAQ）
Q.SVGファイルをアップロードせずに中身を表示して確認できますか
A. できます。コードを貼り付けるか、ファイルをドラッグアンドドロップするか、ファイル選択ボタンから読み込むと、その場で描画結果が表示されます。すべての処理はお使いのブラウザ内で完結するため、ファイルが外部のサーバーへ送信されることはありません。背景は透明、白、黒、青から切り替えられるので、白いアイコンや透過部分の確認も容易です。
Q.SVGが表示されない、あるいは大きさが変わらない原因は何ですか
A. 最も多いのはviewBox属性の欠落です。viewBoxがないとブラウザがアスペクト比を計算できず、CSSで幅を指定しても拡大縮小されません。次に多いのがwidthとheightのピクセル固定で、CSS側の指定より優先されてしまうケースです。本ツールはコードを読み込むと両方を自動で検出して警告するため、原因の切り分けに使えます。
Q.同じページにSVGを複数配置すると色やグラデーションが崩れるのはなぜですか
A. SVG内部のid属性が重複していることが原因です。グラデーションやマスク、クリップパスはidで参照されるため、同じidが複数存在すると最初に見つかったものが優先され、意図しない描画になります。本ツールはid重複を自動検出し、接頭辞を付けてユニーク化する機能も備えています。参照側のurl記法も同時に書き換えるため、貼り付けるだけで衝突を解消できます。
Q.配布元が不明なSVGをそのまま使っても安全ですか
A. 注意が必要です。SVGはスクリプトを埋め込める形式のため、script要素やonloadなどのイベント属性を含むファイルが存在します。これらをそのままWebサイトへ配置すると、スクリプトが実行される危険があります。本ツールはこれらを自動検出して警告し、プレビュー時は常に除去した状態で描画します。書き出すコードからも既定で削除されます。
Q.座標の丸め処理を行うと形が崩れることはありませんか
A. 桁数を下げすぎると曲線が角張って見えることがあります。本ツールは座標を持つ属性の数値のみを対象としており、idやテキストの中の数字は書き換えません。一般的なアイコンであれば小数点2桁でほとんど劣化を感じずに軽量化できます。形状が崩れた場合はプレビューを見ながら桁数を増やしてください。
Q.デザインツールから書き出したコードを読み込むと何が削除されますか
A. 描画に影響しない記述が対象です。具体的にはXML宣言、コメント、metadata要素、desc要素に加え、Figma、Illustrator、Inkscape、Sketchなどが付与する独自の名前空間や属性、およびxml:spaceのような不要な指定が削除されます。これによりファイルサイズが小さくなるだけでなく、ReactやNext.jsのJSXへ貼り付けた際の属性警告も解消されます。
あなたの声で、
このツールをより鋭く。
「こんな機能が欲しい」「ここを直してほしい」といったご意見や、新しいツールのリクエストを募集しています。エンジニアが直接目を通し、開発の参考にさせていただきます。