SVG ファイル形式とは？
.svg という略称は Scalable Vector Graphics を指し、2D グラフィックファイル用のフォーマットです。SVG は、プレーンテキストで 2D グラフィックスを記述するために設計された XML ベースの言語です。.svg フォーマットは *World Wide Web Consortium (W3C)* によって開発され、ウェブ上でベクターグラフィックスを表示するための標準フォーマットとなっており、2001年に W3C 勧告となりました（2011年には SVG 1.1 が続きました）。
ベクターグラフィックスの記述にテキストが使用されているため、.svg ファイルのスケールは品質を損なうことなく変更できます。簡単に言えば、ファイルの内容である画像は、ピクセル化することなく任意のサイズで表示できるため、.svg はアイコン、ロゴ、イラスト、およびあらゆる解像度で鮮明に見える必要がある UI 要素に最適です。
.svg ファイルは GZIP 圧縮を使用して圧縮することもでき、その場合フォーマットは .svgz に変わり、最終的なサイズは約 50-80% 削減されます。
テキストベースの XML 性質により、.svg ファイルは検索、インデックス作成、圧縮、スクリプト作成が可能であり、ウェブ上でのグラフィックス共有に完全に適しています。すべての最新ブラウザは、プラグインなしでネイティブに .svg 画像をレンダリングします。.svg ファイルは、プレーンテキストエディタと Inkscape や Adobe Illustrator などの高度なベクターエディタの両方で等しくサポートされており、PNG ラスター画像、アニメーション、CSS スタイリング、およびインタラクティブな JavaScript をファイル内に直接埋め込むことができます。MIME タイプは image/svg+xml です。
セキュリティと安全性
リスク： MEDIUMSVG は XML であり、CSS や JavaScript を「埋め込む」ことができるため、ブラウザで開かれた .svg はスクリプトを実行できます。これにより、悪意のある SVG はクロスサイトスクリプティング、リダイレクト、フィッシングのベクトルとなる可能性があり、SVG のメール添付ファイルがマルウェアキャンペーン（実際にはスクリプトや HTML フォームを含む「無害な画像」）に使用された事例もあります。未承諾の .svg ファイルは画像ではなくウェブページのように扱い、不明な送信者からは開かないでください。また、ウェブサイトではアップロードされた SVG を提供する前にサニタイズ（スクリプトやイベントハンドラーの削除）を行う必要があります。スクリプトを実行しないビューアやコードエディタで SVG を開いて XML を検査することは安全です。アドウェアを同梱するような怪しい「無料 SVG オープナー/コンバーター」のダウンロードサイトは避け、ブラウザや Inkscape を使用してください。
形式の詳細
概要SVG ファイルを開くプログラム
Windows4 apps
macOS3 apps
Linux3 apps
SVG-Edit / boxy-svg (online editors)
フリーミアム インストール不要でブラウザ上で SVG を開き編集します（Boxy SVG やオープンソースの SVG-Edit など）。 技術的詳細
詳細仕様| ファイル構造 | プレーン XML テキスト。特別なソフトウェアなしで、あらゆるテキストエディタで人間が読み取り、編集可能 |
| MIME タイプ | image/svg+xml |
| 文字エンコーディング | UTF-8（XML ヘッダーで宣言）。バイナリコンテンツを含まないプレーンな Unicode テキスト |
| スケーラビリティ | 無限のロスレススケーリング。ジオメトリが数学的に定義されているため、どのようなサイズでもピクセル化が発生しない |
| 圧縮バリアント | .svgz - 同じ SVG XML を gzip でラップしたもの。ファイルサイズは通常 50-80% 小さくなる |
| アニメーションのサポート | 宣言的な SMIL アニメーションと CSS アニメーション/トランジションの両方をサポート |
| スクリプティング | JavaScript が標準の DOM API を介して SVG 要素を照会および変更でき、インタラクティブ性を実現 |
| スタイリング | インラインの style 属性、埋め込まれた <style> ブロック、または外部スタイルシートを介して CSS を適用可能 |
| 座標系 | ユーザー定義の単位を持つ無限のキャンバス。viewBox 属性がドキュメント座標をビューポートにマッピングする |
| 基本図形 | path, circle, rect, ellipse, polygon, polyline, line。さらにグラデーション、パターン、マスク、フィルター効果 |
| ブラウザのレンダリング | すべての最新ブラウザ（Chrome, Firefox, Edge, Safari）でネイティブサポート。プラグイン不要 |
| HTML への埋め込み | <svg> としてインラインで使用、または <img>, <object>, <embed>、あるいは CSS の background-image として参照可能 |
| アクセシビリティ | テキストノードはマシンリーダブル。<title> および <desc> 要素に加えて ARIA 属性をサポート |
| ラスターの埋め込み | 外部ラスター画像（PNG, JPEG）を <image> 要素を介してファイルパスまたはデータ URI で埋め込み可能 |
| ファイルの識別 | バイナリのマジックバイトはなし。<svg ルート要素によって識別され、オプションで XML 宣言や DOCTYPE が先行する |
| リリース日 | 2001 (SVG 1.0 W3C Recommendation); SVG 1.1 (2011); SVG 2 in development |
| オープンスタンダード | はい · ロイヤリティフリー |
| 仕様書 | www.w3.org |
SVG の変換
コミュニティ Q&A
ユーザーからの質問まだ質問はありません。SVG ファイルについて最初の質問をしてみましょう。
