ソフトのインストール不要で、.svgファイルや<svg>タグのソースコードをブラウザ内で即座にプレビュー。透過グリッド・白・黒背景での見え方チェックや、viewBox座標・XML構造の検査が100%ローカル環境で行えます。
またはクリックして参照
白いアイコンの確認やviewBox見切れの原因特定、不要なエディタコードの調査など、制作現場での活用例をご紹介します。
OSの標準フォルダや通常のブラウザタブは背景が白いため、ダークモード用の白い（#FFFFFF）SVGアイコンを開くと真っ白で何も見えない状態になります。背景切替で「黒」や「透過グリッド」を選ぶだけで、パスの形状や半透明グラデーションを一目で確認できます。
右側の「ファイル情報」パネルに、宣言されているWidth（幅）、Height（高さ）、ViewBox座標（min-x min-y width height）、ファイル容量を即座に表示。Web実装時にリサイズできない原因や見切れの原因を素早く特定できます。
CSS @keyframesやSMIL <animate>による動きをプレビュー画面でリアルタイム再生しつつ、下部のコード欄でXML構造を検査。ハードコードされた色指定やIllustratorの不要なメタデータを見つけたら、ワンクリックでSVG軽量化ツールへ送れます。
WindowsエクスプローラーでSVGのサムネイルが表示されなかったり、中身を1つ確認するだけのために重いAdobe Illustratorを起動したりする手間を解消します。
暗い背景用の白アイコンや薄いドロップシャドウ付きのSVGを、チェッカーボード（市松模様）・白・黒・任意のカスタム背景色の上で瞬時に切り替えながらプレビューできます。
ReactやVueコンポーネント、アプリ素材として組み込む前に、SVGが持つ正確な幅（Width）、高さ（Height）、viewBox属性の有無、およびファイルサイズをひと目で把握できます。
「文字がアウトライン化（<path>）されているか」「色が currentColor になっているか」「不要なスクリプトが含まれていないか」を下部のSVGコードパネルですぐに確認・コピーできます。
ブラウザ内のネイティブDOMパーサーにより、多様なベクターデータとXML構造のプレビューに対応しています。
Figma、Adobe Illustrator、Inkscape、Sketch、Affinity Designer、CADソフトから書き出されたあらゆる.svgファイルをドラッグ＆ドロップで開けます。
「SVGコードを貼り付け」タブを使えば、WebページのソースコードやJSXファイルからコピーしたインライン<svg>タグをファイル化せずに直接プレビューできます。
インライン<style>内の@keyframes、グラデーション（<linearGradient>）、クリッピングパス（<clipPath>）、SMIL（<animateTransform>等）の動的描画に対応しています。
<path>、<circle>、<rect>、<polygon>などの基本ベクター要素および data:image/*;base64 で埋め込まれたラスター画像を安全なローカル領域で描画します。
アップロード枠に.svgファイルをドラッグ＆ドロップするか、「SVGコードを貼り付け」タブに切り替えてコードを入力します（「サンプルSVGを読み込む」で即体験も可能）。
プレビュー領域上部の背景ボタンをクリックし、透明部分の抜け具合や白い線・黒い線の視認性を異なる背景色の上でテストします。
右側の情報パネルで、ファイル名、正確な容量、宣言されているWidth（幅）、Height（高さ）、およびViewBox座標の値を確認します。
下部の「SVGコード」欄でソースを確認・コピーするか、右側「アクション」内の「PNGに変換」「SVGを最適化」ボタンから次の作業へ直接進めます。
プレビューとコード検査が完了したら、そのまま制作・開発の次工程へ活用できます。
下部のコードパネルからXMLソースをコピーし、WebサイトのHTMLやJSXコンポーネントへ直接貼り付けて利用できます。
パスの見切れや透過漏れがないことをビューアで確認してから「PNGに変換」を実行することで、手戻りのない確実な画像変換が行えます。
コード欄にIllustratorのプライベートデータや不要なコメントが大量に残っていることを確認したら、「SVGを最適化」をクリックしてファイル容量を40%〜80%削減できます。
SVGを開いた際に「真っ白になる」「一部が切れる」「フォントが変わる」場合、元データのXMLに以下の原因が潜んでいます。
アイコン自体の塗りが白（#FFFFFF）で背景も白になっているか、あるいはパス座標が viewBox の表示領域外に描かれていることが原因です。
まず「プレビュー背景」を「黒」または「透過グリッド」に切り替えてください。それでも見えない場合は、下部コード欄で viewBox の数値と <path> の座標にズレがないか確認してください。
SVG内にアウトライン化されていない <text> タグが残っており、お使いの端末にインストールされていないフォント名が指定されています。
下部コード欄で <text> タグの有無を確認してください。どの環境でも同じ見た目にするには、デザインソフト側で文字をアウトライン化（パス化）してから再書き出ししてください。
ブラウザのセキュリティポリシー（CSP / CORS制限）により、サンドボックス化されたSVGプレビュー内からの外部画像通信がブロックされるためです。
外部リンクではなく、画像を Base64 データURI（data:image/png;base64,...）に変換してSVG内に直接埋め込んでください。
目的に応じて、当サイトの「SVG 軽量化ツール」や「SVG PNG 変換ツール」と使い分けることができます。
| 比較項目・用途 | SVG ビューア＆コード確認（このツール） | SVG 軽量化ツール (/svg-optimizer/) | SVG PNG 変換ツール (/) |
|---|---|---|---|
| 主な目的・役割 | 背景色切替による視覚プレビュー、viewBox・寸法の検査、XMLソースコードの確認 | 不要なメタデータ・コメント・小数点の削除によるSVGファイルの容量削減 | ベクターSVGファイルやコードを32ビット透過PNG画像へラスタライズ変換 |
| 出力される成果物 | 検査済みの元SVG保存、コピー可能なXMLコード、寸法・属性診断データ | 画質劣化なしで40%〜80%軽量化された本番用 .svg ファイル | 指定ピクセル解像度・300 DPIメタデータ付きの .png 画像ファイル |
| 背景コントラスト検証 | 透過チェッカーボード・白・黒・カスタム背景色をワンクリックでリアルタイム切替 | 最適化前と最適化後の2画面比較プレビュー | 選択した背景色（透過または単色）をPNG画像のピクセルとして合成出力 |
| サイズ・属性の表示 | ファイル名、容量、Width、Height、ViewBox座標文字列を専用パネルに一覧表示 | 元のファイルサイズ、圧縮後のサイズ、削減率（%）の表示に特化 | 出力先のピクセルサイズ（幅×高さ px）と印刷DPIの指定に特化 |
はい、100%安全です。当SVGビューアはお使いのブラウザ内のJavaScript（FileReaderおよびDOMパーサー）のみで動作し、外部サーバーへのファイル送信は一切行いません。読み込んだファイルや貼り付けたコードが外部に漏れることはありません。
viewBox="min-x min-y width height" はSVG内部の仮想キャンバス座標系（アスペクト比と描画範囲）を定義するもので、width と height は画面上に表示する際の初期サイズを指定する属性です。適切な viewBox が設定されていれば、CSSでどのようなサイズに拡縮しても見切れずに表示されます。
はい、可能です！OSのファイルマネージャーの静止画サムネイルとは異なり、当ツールのプレビュー画面ではCSSの @keyframes アニメーションやSVGネイティブのSMIL（<animate>、<animateTransform>）アニメーションがリアルタイムに再生されます。
Web制作用のレスポンシブなSVGアイコンでは、親要素のCSSサイズに合わせて伸縮できるよう、あえてルート<svg>タグの固定 width / height 属性を省略し viewBox のみを記述することがよくあります。viewBox が正しく表示されていれば問題ありません。
はい。プレビュー画面右側の「アクション」パネルにある「SVGを最適化」ボタンを押せばコードの軽量化ツールへ、「PNGに変換」ボタンを押せば高解像度PNG変換ツールへスムーズに移行できます。
用途ごとに特化したブラウザ完結型ツールと連携して作業を効率化できます。
不要なメタデータやコメントを削除してSVGコードを最適化し、画質を損なわずにファイルサイズを最大80%削減。
SVGを透明背景維持のまま高画質PNGへ変換。ピクセルサイズ指定・4倍拡大・印刷用300DPI設定に対応。
複数のSVGファイルを一度にPNG・JPG・WebPへ一括変換し、ZIPアーカイブとしてまとめてダウンロード。
1枚の画像からWeb用 favicon.ico や iOS/Android/Windows 用アプリアイコン一式を自動生成。