ファイル形式
SVGとは？ベクター形式の基本ガイド
SVGは、どんなサイズでもくっきり表示されるXMLベースのベクター画像形式です。その歴史、構造、セキュリティ上のリスク、PNGへの変換を解説します。
著者: Hemen Dönüştür Editör Ekibi公開日: 11 分で読めます
SVGは、ピクセルではなく描画の命令でできた画像形式です。ロゴ、アイコン、グラフをSVGで保存すると、ファイルには「この点からあの点まで曲線を引き、この色で塗る」といった命令が入ります。だからSVGはどんなサイズでもくっきりしていて、多くの場合とても小さく、テキストエディターで開いて編集することもできます。この記事では、W3Cの規格の中でのSVGの位置づけ、ファイルの構造、ブラウザーやソフトの対応、セキュリティ上のリスク、SVGとPNGやJPGの相互変換について説明します。
SVGとは
SVG（Scalable Vector Graphics）は、2次元のベクター画像を記述するためのXMLベースのW3C規格です。拡張子は.svg、MIMEタイプはimage/svg+xmlです。gzipで圧縮した版は.svgzという拡張子を使います。
ラスター形式（JPG、PNG、WebP）は、画像を固定されたピクセルの格子として保存するため、拡大するとピクセルが見えてきます。SVGは図形を数学的に記述し、ブラウザーやソフトが画面の解像度に合わせて描き直します。MDNの画像形式ガイドは、SVGを描画命令で表現できる画像、特に表示サイズが分からない場合や変わる場合に理想的な選択肢とし、写真には一般に向かないとしています。
歴史：SVG 1.0、1.1、SVG 2
- 2001年9月4日：SVG 1.0がW3C勧告として公開されました。
- 2003年1月14日：SVG 1.1が勧告になりました。1.1では言語がモジュールに分割され、モバイル向けプロファイルのようなサブセットを定義しやすくなりました。
- 2011年8月16日：SVG 1.1第2版が公開されました。現在のブラウザーが土台にしている安定版です。
- SVG 2：W3Cの公開履歴によれば、2012年から作業草案が公開され、最初の勧告候補スナップショットは2016年9月15日に公開されました。最新のスナップショットは2026年10月6日付けで、文書はまだ勧告候補の段階です。
SVG 2は1.1第2版をもとに、HTMLやCSSとのよりよい統合を目指しています。フィルター、マスク、フォントといった一部のテーマは、CSSやFXの別モジュールに移されました。実際にはブラウザーはSVG 2の一部を実装しているので、すべての機能がどこでも動くとは考えないでください。
SVGファイルの構造
シンプルなSVGファイルは次のようになります。
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="200" height="200">
<circle cx="50" cy="50" r="40" fill="#0b6bcb"/>
<path d="M30 50 L45 65 L72 36" stroke="#fff" stroke-width="8" fill="none"/>
</svg>座標系：viewBox、width、height
viewBoxは描画の内部の座標系（ここでは0から100）を定めます。widthとheightは、描画がページ上で占める大きさを決めます。viewBoxのあるSVGは、CSSで指定したどんなサイズにも比率を保って拡大縮小します。viewBoxのないファイルはサイズを変えると切れてしまうことがあり、ロゴで最もよくある間違いの一つです。
主な要素
- 図形：
rect、circle、ellipse、line、polyline、polygon、そして何でも描けるpath。 - テキスト：
textとtspan。テキストは選択や検索ができるままですが、表示する端末にフォントがなければ代わりのフォントが使われます。 - グループ化と再利用：
g、defs、symbol、use。アイコンセットは、1つのファイルにsymbol要素としてまとめられることがよくあります。 - 塗り：単色、線形・放射状のグラデーション、パターン、クリッピングパス、マスク、フィルター（ぼかし、ドロップシャドウ）。
- スタイルとアニメーション：CSSでSVGにスタイルを付けられ、CSSアニメーションやSMILのアニメーション要素で動きを加えられます。
- 埋め込みコンテンツ：ラスター画像には
image、HTMLにはforeignObject、JavaScriptにはscript。
色、透明、レイヤー、ページ
SVGでは透明が標準です。何も描かれていない部分は空で、opacityやfill-opacityで半透明を指定できます。レイヤーはgグループで表され、InkscapeやIllustratorもレイヤーをこの方法で保存します。色は標準でsRGBで、数値で書かれるため、一般的な意味でのビット深度の制限はありません。SVGは複数ページの文書形式ではないので、複数ページの図面にはPDFのほうが向いています。
ブラウザー、システム、ソフトの対応
MDNによれば、Chrome、Edge、Firefox、Opera、SafariはどれもSVGに対応しています。<img>、CSSのbackground-image、HTMLへのインライン埋め込み、<object>や<iframe>で使えます。Inkscape、Adobe Illustrator、Affinity Designer、FigmaなどのベクターツールはSVGを読み書きでき、現在のMicrosoft OfficeでもSVG画像を挿入できます。
それ以外の場所では対応は弱く、多くのSNS、メールソフト、メッセージアプリ、アップロードフォームはSVGを受け付けないか、プレビューを表示しません。その理由の一つが、次に説明するセキュリティ上のリスクです。
セキュリティ：SVGは文書として扱う
SVGはXML文書で、script要素、イベント属性（onloadなど）、外部参照を含めることができます。MDNの「画像としてのSVG」のページによれば、<img>やCSSの背景としてSVGを使う場合、ブラウザーはJavaScriptを無効にし、画像やスタイルシートなどの外部リソースを読み込みません。ファイルを直接開いたときや、<iframe>、<object>、<embed>で埋め込んだときには、この制限は適用されません。
実際にはこういうことになります。ユーザーがSVGファイルをアップロードでき、サイトがそれを自分のドメインから直接配信していると、ファイルに埋め込まれたスクリプトがそのサイトのコンテキストで実行される可能性があります（格納型XSS）。代表的な対策は次のとおりです。
- アップロードされたSVGを、
script、イベント属性、foreignObject、外部リンクを取り除くサニタイザーに通す。 - ユーザーのファイルは別のドメインから、厳格なContent-Security-Policyを付けて、またはダウンロード（
Content-Disposition: attachment）として配信する。 - ベクターが不要なら、アップロードされたSVGをサーバー側でPNGに変換し、ラスター版だけを公開する。
主な用途
- ロゴやブランド素材：名刺から大型看板まで、1つのファイルでくっきり表示できます。
- UIのアイコン：CSSで色を変えられ、高密度の画面でもぼやけません。
- グラフ、地図、図表：D3.jsのようなライブラリは、データを直接SVG要素として描きます。
- ファビコン：現在のブラウザーは、
<link rel="icon" type="image/svg+xml">によるSVGのファビコンを受け付けます。 - カッティングと印刷：レーザーカッター、カッティングマシン、刺しゅうミシンはベクターのパスを使います。
長所と短所
| 長所 | 短所 |
|---|---|
| どんなサイズでもくっきり、解像度に依存しない | 写真や複雑な質感には向かない |
| シンプルな図ならファイルがとても小さい | パスの多い描画は重くなり、表示が遅くなる |
| テキストベースで編集しやすく、差分も見やすく、よく圧縮できる | スクリプトや外部参照がセキュリティ上のリスクになる |
| CSSとJavaScriptでスタイルや操作を加えられる | フォントや機能の対応がソフトによって違う |
アクセシブル：titleとdescで説明を持てる | SNSやメールソフトで受け付けられないことが多い |
よくあるトラブルと対処法
サイトやアプリがSVGを受け付けない
いちばん簡単なのはPNGのコピーを作ることです。当サイトのSVGからPNGへの変換ツールは、ブラウザー内で、選んだピクセル幅の透明なPNGに描画します。ファイルはアップロードされず、端末の外に出ることはありません。
テキストが別のフォントで表示される
SVGは標準ではフォントを埋め込まないため、表示するシステムにフォントがなければ代わりのフォントが使われます。画像として使う場合は外部フォントも読み込まれません。デザインツールでテキストをアウトライン化するか、フォントを埋め込んでください。
ページ上でSVGのサイズがおかしい、または切れる
viewBoxがなかったり、widthやheightが固定されていたりすると、拡大縮小が思いどおりになりません。ルートのsvg要素に描画全体を覆うviewBoxを追加し、サイズはCSSで指定しましょう。
ファイルが思ったより大きい
デザインツールは、エディターのメタデータ、過剰な小数点以下の桁、非表示のレイヤーをSVGに書き込みます。SVGOのような最適化ツールでこれらを取り除けます。サーバーでgzipやBrotliの圧縮を使えば、テキストベースのSVGはさらに小さくなります。
PNGのロゴをSVGにしたい
ラスター画像を本当の意味でベクターに「変換」することはできません。ツールが行っているのはトレースで、図形を検出して輪郭として描き直します。当サイトのPNGからSVGへの変換とJPGからSVGへの変換は、2色から8色でトレースします。シンプルなロゴやイラストではよい結果になりますが、写真では粗くなります。これらのツールでは、ファイルは安全な接続で当サイトのサーバーにアップロードされ、そこでトレースされ、遅くとも30分以内に削除されます。
変換のコツ
- 表示サイズを把握しましょう：SVGをPNGに描画するときは、画像を表示する最大のサイズを選び、高密度の画面向けにはその2倍にします。当サイトのツールでは長辺を最大4096ピクセルにでき、幅を空欄にすると、小さな描画は長辺が1024ピクセルになるよう拡大されます。
- 写真を含むならJPG：SVGに写真が埋め込まれていて透明が不要なら、JPGやWebPのほうがPNGより小さくなります。PNGにしたあと、画像変換ツールで変換できます。
- ファビコン：ロゴがSVGなら、ファビコン作成ツールがそのまま受け付け、パッケージに
icon.svgを加えます。 - トレースにはきれいな元画像を：PNGからSVGを作るときは、高解像度で、色が平坦で、ノイズのない画像から始めましょう。
よくある質問
SVGとPNGの違いは何ですか？
PNGはピクセル数が決まっていて、拡大するとぼやけます。SVGは図形を記述しており、どんなサイズでもくっきり描き直されます。ロゴやアイコンにはSVG、写真やスクリーンショットにはPNGやJPGが向いています。
SVGファイルにウイルスが入っていることはありますか？
SVGは実行可能なプログラムではありませんが、JavaScriptを埋め込めます。SVGを画像（<img>）として表示する場合スクリプトは実行されませんが、ブラウザーで直接開くと実行されることがあります。出どころの分からないSVGは、直接開かずにビューアーで確認するか、PNGに変換しましょう。
WordやPowerPointにSVGを挿入できますか？
現在のMicrosoft OfficeはSVGの挿入に対応しています。古いバージョンや、他のソフトとファイルを共有する場合は、PNGのコピーのほうが安全です。
SVGをPNGに変換すると画質は落ちますか？
PNGは可逆ですが、描画が特定のピクセルサイズに固定されます。十分大きな幅を選べば劣化には気づきませんが、あとからPNGを拡大するとぼやけます。
SVGはアニメーションに対応していますか？
はい。CSSアニメーション、SMILのアニメーション要素、JavaScriptで動きを付けられます。PNGに変換すると1フレームになります。
