歴史レッスン:.svg ファイルとは? ブラウザーで開く理由

.svg ファイルとは?

.svg ファイルは Scalable Vector Graphics 画像です。JPG、PNG、BMP など、なじみのある画像形式の多くはラスター画像、つまり色のついた点(ピクセル)の固定された格子です。十分に拡大すると輪郭は階段状になります。SVG はベクター形式で、「ここへ移動し、そこまで曲線を引き、この図形をターコイズで塗る」といった命令を保存し、ソフトウェアが画面やプリンターに必要なサイズで毎回図形を描き直します。W3C の仕様自体も、SVG を 2 次元のベクター画像およびベクターとラスターを組み合わせた画像を XML で記述する言語と説明しています。

XML(Extensible Markup Language)はタグで構成されたプレーンテキスト形式で、Web ページの HTML によく似ています。つまり .svg ファイルの中身は、本質的にはメモ帳で開けるテキストです。外側に svg タグがあり、その中に path、circle、rect などの図形が座標や色を属性として並んでいます。「.svg ファイルとは」と検索する人の多くは、デザイナーから届いたロゴ、アイコンパック、何かのツールから書き出した図などを受け取ったばかりで、それが写真のようにふるまわないことに気づいたところです。

なぜ .svg はブラウザーで開くのか?

多くの PC では、Web ブラウザーが SVG を描画するのに最も適したプログラムだからです。現在は主要なブラウザーすべてが標準で表示するため、ダブルクリックすると Windows は .svg ファイルを Edge、Chrome、Firefox に渡すことがよくあります。ピクセルベースのツールはラスター画像向けで、Windows のエクスプローラーも長く助けを必要としてきました。Microsoft の無料アドオン PowerToys には、エクスプローラーに SVG のプレビューと縮小版を表示させる目的もあります。

新しい Office はもっと親切です。Microsoft によると、Microsoft 365 と Office 2019、2021、2024 の Word、PowerPoint、Excel、Outlook は SVG 画像を挿入・編集でき、Microsoft 365 アプリに組み込まれたアイコンライブラリは SVG 画像でできています。それでも古い Office、多くの Web サイト、その他たくさんのプログラムはいまも PNG か JPG を前提にしています。

1998 年:Web で描くための 6 つの提案

初期の Web にも画像はありましたが、ピクセルとしてだけでした。W3C 自身の歴史ページ「The Secret Origin of SVG」によると、W3C の Chris Lilley が 1996 年に Web 向けベクター画像の一般要件をまとめました。1998 年までに、6 つの競合提案が寄せられました。そのうち 2 つは大手からでした。Adobe、IBM、Netscape、Sun による PGML(Precision Graphics Markup Language)は 1998 年 4 月 10 日に W3C Note として公開され、Autodesk、Hewlett-Packard、Macromedia、Microsoft による VML(Vector Markup Language)は 1998 年 5 月 13 日に公開されました。残りは Web Schematics、Hyper Graphics Markup Language、WebCGM、DrawML です。

新たに発足した SVG ワーキンググループは、どれか 1 つを土台にすることはしませんでした。代わりに、各提案に「影響を受けつつも、実際にはそれに基づいていない」新しい言語を設計しました。Microsoft の Office グループで生まれ Internet Explorer に搭載された VML は、SVG のコンパクトなパス構文に影響を与えました。グループは、短いパスコードを使うと圧縮後でもファイルが目に見えて小さくなることを確認したのです。Adobe の PostScript と PDF の描画モデルに基づく PGML は、主に SVG の座標系と変換、そして色の扱いを形づくりました。

SVG 1.0、SVG 1.1、そして携帯電話

SVG 1.0 は 2001 年 9 月 4 日に W3C 勧告(完成した標準を指す W3C の用語)となりました。編集者は Adobe の Jon Ferraiolo で、著者には Microsoft、Sun、Netscape、Kodak、Corel、Canon、Opera など幅広い企業の人々が名を連ねています。SVG 1.1 は 2003 年 1 月 14 日に続き、言語を再利用可能なモジュールに分割しました。

同じ日に W3C はモバイル SVG プロファイルを公開しました。携帯電話向けの SVG Tiny と PDA(携帯情報端末)向けの SVG Basic で、どちらも SVG 1.1 の真部分集合です。W3C のプレスリリースは、モバイル標準化団体 3GPP がすでに第 3 世代携帯電話にモバイル SVG を採用しつつあると述べています。その後、SVG Tiny 1.2 が 2008 年 12 月 22 日に勧告となりました。

プラグインの時代:Adobe SVG Viewer と Internet Explorer

標準には、それを描画するものが必要です。2000 年代初め、最も一般的な手段は無料のブラウザープラグイン Adobe SVG Viewer でした。W3C は Adobe について「人気のある SVG ビューアー」と Illustrator などの製品での SVG サポートを挙げています。当時主流だった Internet Explorer は自力では SVG を描画せず、Internet Explorer 8 以前には標準サポートがありませんでした。そのため多くの人は、このプラグインを通してしか SVG を目にしませんでした。

2005 年 12 月、Adobe は Web にベクターアニメーションを載せるもう 1 つの方法 Flash を開発していた Macromedia の買収を完了しました。その後 Adobe は 2009 年 1 月 1 日に Adobe SVG Viewer のサポートを終了し、SVG とその普及が十分に成熟したため、Adobe がビューアーを提供する必要はなくなったと説明しました。SVG コミュニティの一部はこの決定を Adobe が Flash を所有するようになったことと結びつけましたが、Adobe の告知はそう述べていません。

ブラウザーはすでにその穴を埋めつつありました。Opera、Firefox、そして WebKit ベースの Safari と Chrome は、2000 年代のうちに SVG を標準でサポートするようになりました。2010 年 3 月 16 日、Microsoft は MIX10 カンファレンスで Internet Explorer 9 が SVG をサポートすると発表し、IE9 は 2011 年 3 月 14 日に公開されました。W3C の歴史ページはその皮肉を指摘しています。Internet Explorer でのサポートによって、SVG のルーツの 1 つである VML へと一周して戻ったのです。

Inkscape、Illustrator、そしてディスクの中のファイル

描画ソフトが SVG を日常的な書き出し形式にしました。2003 年 11 月 5 日、4 人の開発者が描画ソフト Sodipodi のフォークとして Inkscape を発表し、完全に SVG に準拠した 2D グラフィックエディターを目標に掲げました。Inkscape は SVG を独自の保存形式として使います。Adobe Illustrator などの商用イラストソフトも SVG を保存でき、多くの図表・グラフ・デザインツールも同様です。

だからこそ 2026 年のごく普通の PC にも .svg ファイルがたまっていきます。デザイナーから届いた会社のロゴ、Web サイトやプレゼン用にダウンロードしたアイコンセット、他のツールから書き出した図やグラフ、サイトから保存した Web 素材などです。多くは何年も前のもので、終わったプロジェクトのレガシーファイルが、いまになってピクセルしか受け付けない文書やメール、アップロードフォームに入れる必要が出てきます。SVG 以前の Windows 時代のベクター形式については、歴史レッスン:.wmf ファイルとは? をご覧ください。

.svgz:同じ図面を gzip で圧縮したもの

SVG は繰り返しのタグが多いテキストなので、広く使われている可逆圧縮方式 gzip(何も失われません)で大きく縮みます。圧縮した SVG には .svgz という拡張子が付きます。SVG 1.1 仕様は、準拠ビューアーが gzip や deflate で圧縮されたコンテンツを扱えることを求め、svgz 拡張子で保存されたファイルを圧縮済みとして示すよう Web サーバーに求めています。そうすればブラウザーが正しく展開できるからです。

ブラウザーの外では、.svgz は通常の .svg よりも多くのプログラムを困らせます。先に展開しないプログラムには、圧縮されたバイト列しか見えません。図面はちゃんと中にあり、描画の前に展開することを知っている読み手が必要なだけです。

SVG 2:いまだ完成せず

これほど普及していても、完成した最新の SVG 標準はいまだに SVG 1.1 Second Edition で、これは 2011 年 8 月 16 日に公開された整理版です。SVG 2 は 2016 年 9 月 15 日に初めて勧告候補(Candidate Recommendation)の段階に達しました。W3C における SVG 2 の最新の勧告候補スナップショットは 2026 年 10 月 6 日付けで、正式な勧告になるのは早くても 2026 年 12 月 1 日以降とされています。

PNG や JPG が必要なとき

SVG を普通の画像に変えることをラスタライズと呼びます。ソフトウェアが選んだサイズで図形を一度だけ描き、そのピクセルを保存します。いったんピクセルになるときれいには拡大できないので、余裕のあるサイズを選びましょう。ロゴやアイコンに透明な背景が必要なら PNG、単色の背景の上の平らな画像なら JPG です。拡張子を .svg から .png に変えても何も変わりません。中身は XML テキストのままです。変換先の形式については 歴史レッスン:.png ファイルとは? をご覧ください。

Legacy File Converter は、ご自身の Windows PC 上で .svg と .svgz ファイルを開き、PNG または JPG 画像として保存します。何もアップロードされないので、ロゴが顧客のものでも安心です。SVG エディターではなく、ベクター形式での出力もしません。どのアプリやアップロードフォームでも受け付けられる画像を用意するためのものです。関連する画像のレッスンは PNG、WMF と EMF、WebP をご覧ください。