SVGベクター画像 (.svg)
W3C勧告（SVG 標準Scalable Vector Graphics (SVG) は、インタラクティビティ、CSS スタイリング、アニメーションをサポートする、二次元グラフィックス用の XML ベースのベクター画像フォーマットです。
SVG を PNG に変換
無料のブラウザ内 SVG から PNG へのコンバーター。お使いのデバイスでファイルを即座に変換します。
SVGをオンラインで圧縮
プライベート - ファイルがデバイスの外に出ることはありません
調査とメタデータ
オペレーティングシステムやファイル解析ツールは、先頭のバイナリ列を検査してSVGファイルを識別します：
バイトレベルのヘッダーシグネチャ (マジックバイト)
オペレーティングシステムやファイル解析ツールは、先頭のバイナリ列を検査してSVGファイルを識別します：
16進数シグネチャ（オフセット0）：
3C 73 76 67ASCII表現: <svg
標準化： W3C勧告（SVG 1.1 / SVG 2）
技術仕様
| コンテナアーキテクチャ | 2Dベクタージオメトリを定義するXMLベースのテキストマークアップドキュメント |
| 圧縮 | Gzip / Brotli テキスト圧縮（SVGZ は gzip 圧縮を使用） |
| バイトエンディアン | 該当なし（テキストベースの UTF-8 / UTF-16 文字ストリーム） |
| 色空間 | sRGB, CSS Color Module 4（Display P3、lab、lch） |
| チャンネルと構造 | 無制限の解像度のベクターシェイプ、ベジエ曲線、タイポグラフィ、不透明度マスク |
| 最大寸法 | 解像度非依存（ピクセル化なしで任意のビューポートに無限に拡大縮小可能） |
| 透過性 | 完全な可変アルファ透過性と CSS ブレンドモード |
| ストリーミングとプログレッシブ | ブラウザの XML パーサーでサポートされるプログレッシブテキストストリーム解析 |
技術比較表：SVGと競合製品
| 技術属性 | SVG (現在) | HTML5 Canvas | PNG | |
|---|---|---|---|---|
| レンダリングモデル | 保持モードベクター DOM | 即時モードビットマップキャンバス | 保持モード固定ページコンテナ | ラスターピクセルグリッド |
| スタイリングと CSS | CSS クラスと変数で完全にスタイリング可能 | JavaScript canvas API による再描画が必要 | 動的な CSS スタイリングなし | 固定ラスターピクセル |
| 無限のスケーラビリティ | はい（数学的なベクター曲線） | 手動での解像度スケーリングが必要 | はい（ベクター要素） | いいえ（拡大するとピクセル化する） |
| インタラクティビティ | ネイティブ DOM イベント（ホバー、クリック、アニメーション） | 手動でのヒット判定の計算が必要 | 静的なドキュメント | イメージマップまたはキャンバスが必要 |
一般的な破損モードと16進数リカバリガイド
ブラウザに XML 解析エラーが表示される：閉じられていないトークンまたは不一致のタグ。
根本原因: XML 構文の誤り、終了タグの欠落、またはエスケープされていないアンパサンド（'&' の代わりに '&' が使用されていない）。
復旧: XML リンター（xmllint file.svg）で検証し、バランスの崩れたタグを修正する。
セキュリティ分析とパーサー攻撃ベクトル
SVG は '<script>' タグや外部エンティティをサポートする実行可能な XML であるため、信頼性の低い SVG が表示された場合、重大な XSS および SSRF のリスクをもたらします。
既知の攻撃ベクター
- 埋め込みの '<script>' タグまたは 'onload=' イベントハンドラーを通じた保存型クロスサイトスクリプティング (XSS)。
- バックエンドサーバーで解析された際にローカルサーバーファイルを読み取る XML 外部エンティティ (XXE) 攻撃。
- サービス拒否を引き起こす「Billion Laughs」XML エンティティ展開。
防御的ベストプラクティス: 埋め込む前に DOMPurify を使用して常に SVG をサニタイズするか、「Content-Security-Policy: default-src 'none'」を指定して SVG を提供するか、スクリプトを自動的に無効にする '<img>' タグとして配信してください。
歴史的背景とマイルストーン
主なメリット
- 無限の解像度非依存性：あらゆるディスプレイや印刷スケールでシャープな線とタイポグラフィを実現。
- ロゴ、アイコン、UI要素のファイルサイズを非常に小さくできる。
- ブラウザ DOM 内で CSS や JavaScript を使用して完全にスクリプト化およびスタイリングが可能。
技術的な制限とデメリット
- 写真や複雑な連続階調の画像には不向き。
- 数千のノードを持つ複雑なベクターパスは、CPU レンダリングの遅延や高いバッテリー消費を引き起こす可能性がある。
- XML の性質上、スクリプトの埋め込みが可能なため、信頼性の不明なアップロードをレンダリングする前に厳格なサニタイズが必要。
興味深い技術トリビア
- Gzipは一部のSVGファイルのサイズを大幅に削減できます。削減幅はドキュメントの内容や圧縮設定によって異なります。
- viewBox 属性は、物理的な画面ピクセルに動的にマッピングされる抽象的な座標キャンバスを定義します。
- 初期のウェブブラウザにはネイティブの SVG エンジンが備わっていなかったため、2011年頃にネイティブサポートが定着する前は、Adobe が Adobe SVG Viewer ブラウザプラグインを配布していました。
よくある技術的な質問
SVG ファイルに悪意のあるコードを含めることはできますか？
はい。SVG は有効な XML であるため、ブラウザに直接読み込まれたり、インラインの '<svg>' 要素内で開かれたりすると実行される、埋め込み JavaScript（'<script>'）が含まれる可能性があります。'<img>' タグを介して SVG を提供すると、スクリプトの実行が自動的に無効化されます。
PNG の代わりに SVG を使用すべきなのはどのような場合ですか？
すべての画面サイズでシャープなスケーリングと小さなファイルサイズが求められるアイコン、ロゴ、チャート、イラスト、タイポグラフィには SVG を使用してください。写真には PNG または WebP を使用してください。
大きかったり複雑な SVG ファイルを最適化するにはどうすればよいですか？
SVGO などのツールを使用するか SVG 圧縮を実行して、冗長なメタデータ、エディターのコメント（Inkscape や Illustrator からのもの）、非表示のグループ、未使用の名前空間宣言を削除することで、ベクターパスをクリーンアップできます。
関連するSVG変換ペア
SVGベクターファイルをPNGラスター画像に変換することで、スケーラブルなコードベースのグラフィックスを、あらゆるアプリケーションに対応する固定ピクセルグリッドへと変換します。
レスポンシブなWebスケーリングとベクター互換のレイアウト統合のため、ラスターPNG画像をSVG XMLベクターコンテナ内にカプセル化します。
従来の 16 ビット Windows GDI ベクター描画レコードを、解像度を損なわずに、最新の拡大縮小可能な SVG パスに変換します。
32 ビット Windows Enhanced Metafile グラフィックスを、ウェブやデザインソフトウェアで使える、すっきりとした拡縮可能な SVG ベクター画像に変換します。
DXF図面をCADのSVGエクスポートに変換することで、複雑なエンジニアリングベクターデータをWebブラウザやベクターエディタ向けの軽量なXMLグラフィックスに変換します。
スケーラブルベクターグラフィックスをDrawing Exchange Formatに変換することで、Web対応の視覚的ベクターをコンピュータ支援設計ソフトウェアで必要な正確な数式座標に変換します。
SVGのロゴやイラストを1ページのPDFとして共有できます。拡大縮小可能なパスは解像度が固定された画像になるため、拡大してもベクターの細部は復元できません。