SVGビューアーとは？
SVGビューアーは、Scalable Vector Graphics（SVG）をブラウザ上で直接レンダリングし、プレビュー・検証・確認できるツールです。アイコンやイラスト、ベクターアセットを日常的に扱うデザイナーや開発者にとって、ソフトウェアのインストール不要で使える便利なツールです。
使い方
- 入力欄にSVGコードを貼り付けます。
- 「表示」ボタンをクリックしてSVGをレンダリングし、メタデータ（サイズ・viewBox・要素数・ファイルサイズ）を表示します。
- 出力の下にSVGのビジュアルプレビューが表示され、プロジェクトへの埋め込み前に正しく表示されることを確認できます。
基礎知識
SVG（Scalable Vector Graphics）は、2次元ベクター画像を記述するXMLベースのフォーマットです。PNGやJPEGなどのラスター形式とは異なり、ピクセルではなく数学的なパスで定義されるため、どの解像度でも完全にシャープな表示を維持します。viewBox属性は内部座標系を制御し、widthとheightはレンダリングサイズを設定します。viewBoxを正しく設定することで、あらゆる画面サイズで比例的にスケーリングされます。
よくある質問
ビューアー内でSVGコードを編集できますか？
はい。エディタパネルでSVGマークアップを直接編集できます。変更は即座にプレビューに反映され、ライブ編集体験が得られます。
viewBox属性とは何ですか？なぜ重要ですか？
viewBoxはSVGの内部座標空間（min-x, min-y, width, height）を定義します。これによりグラフィックがレスポンシブにスケーリングされます。正しいviewBoxがないと、異なるサイズで表示した際にトリミングや歪みが発生する可能性があります。
ファイルサイズの制限はありますか？
一般的なSVGファイルは問題なく処理できます。数千のパス要素を含む非常に大きなファイル（数MB）は描画が遅くなる場合がありますが、通常の制作用SVGは快適に動作します。