Metric ConverterMetricConverter

Scalable Vector Graphics

SVGファイル形式（.svg）完全ガイド

SVGとは何か？概要と歴史

SVG（Scalable Vector Graphics）は、XMLベースの2次元ベクターグラフィック形式です。ラスター画像（ピクセルの集合）とは異なり、SVGは数学的な図形・曲線・テキストの定義によって画像を表現します。そのため、どんな解像度に拡大・縮小しても画質が劣化しないという大きな特徴を持っています。

SVGの歴史は1990年代後半に遡ります。World Wide Web Consortium（W3C）が1998年にSVGの仕様策定を開始し、2001年にSVG 1.0が正式勧告として公開されました。その後、2003年にSVG 1.1がリリースされ、モバイル向けの「SVG Tiny」や「SVG Basic」といったサブセットも定義されました。2011年にはSVG 1.1の第2版が公開され、現在最も広く利用されているバージョンとなっています。また、より高機能なSVG 2.0の仕様策定も進められており、CSSやHTMLとの統合がさらに深まっています。

SVGはWebブラウザのネイティブサポートが充実しており、現在ではすべての主要ブラウザでSVGの表示が可能です。ロゴ、アイコン、インフォグラフィック、地図など、さまざまな用途で活用されています。

技術仕様

SVGは他の画像形式と比較して独自の技術的特性を持っています。以下に主要な仕様をまとめます。

  • ファイル形式：XMLテキスト形式。テキストエディタで直接内容を確認・編集可能です。
  • 圧縮：SVGファイル自体は非圧縮のテキストですが、GZIP圧縮を適用したSVGZ（.svgz）形式も存在し、ファイルサイズを大幅に削減できます。
  • 解像度：ベクターデータのため、解像度に依存しません。印刷用途からスマートフォンの高解像度ディスプレイまで、あらゆる環境で鮮明な表示が可能です。
  • カラーサポート：RGB、RGBA、HSL、HEXなどの色指定をサポートしています。また、グラデーションやパターン塗りつぶしも標準仕様に含まれています。
  • 透明度：アルファチャンネルによる透明度表現に対応しており、複雑な透過効果も実装できます。
  • アニメーション：SMIL（Synchronized Multimedia Integration Language）を使ったネイティブアニメーションや、CSSアニメーション、JavaScriptによる動的操作が可能です。
  • フィルター効果：ぼかし、影、カラーマトリクスなどのフィルター効果をXMLで定義できます。
  • テキスト埋め込み：テキスト要素をそのまま含められるため、検索エンジンのインデックスやアクセシビリティ対応が容易です。
  • MIMEタイプ：image/svg+xml

主な用途

SVGはその特性から、以下のような場面で広く活用されています。

  • Webサイトのロゴ・アイコン：あらゆる画面解像度で鮮明に表示されるため、ブランドアイデンティティを一貫して表現できます。
  • インフォグラフィック・チャート：データビジュアライゼーションツール（D3.jsなど）がSVGを出力形式として採用しています。
  • 地図・フロアプラン：ズームやパンに対応した高品質な地図表示に最適です。
  • UIコンポーネント：ボタン、バッジ、アイコンセットなど、レスポンシブデザインに欠かせない素材として使用されます。
  • 印刷物・出版：IllustratorなどのDTPソフトウェアとの互換性があり、高品質な印刷物の制作に利用されます。
  • ゲーム・インタラクティブコンテンツ：CSSやJavaScriptと組み合わせたアニメーションや、インタラクティブな操作が可能です。

SVGのメリットとデメリット

SVGは多くの強みを持つ一方、特定の用途には向かない場合もあります。以下の比較表を参考にしてください。

メリット デメリット
拡大・縮小しても画質が劣化しない 写真など複雑なラスター画像の表現には不向き
テキストベースのため、ファイルサイズが小さくなる場合がある 複雑なパスや要素が多いとファイルサイズが大きくなる
CSSやJavaScriptで動的に操作できる 複雑なSVGはレンダリング負荷が高くなることがある
検索エンジンがテキストコンテンツをインデックス可能 悪意あるスクリプトが埋め込まれるセキュリティリスクがある
アニメーション・インタラクションが容易 古いブラウザや一部環境では完全に対応していない場合がある
すべての主要ブラウザでネイティブサポート フォントの扱いが環境によって異なる場合がある

SVGファイルを開く・表示するには

SVGファイルはさまざまなアプリケーションで開くことができます。用途に応じて最適なソフトウェアを選びましょう。

  • Webブラウザ：Google Chrome、Mozilla Firefox、Microsoft Edge、Apple Safariなど、すべての現行ブラウザでSVGをそのまま表示できます。
  • Adobe Illustrator：プロフェッショナルなベクターグラフィック編集ソフト。SVGの読み込み・編集・書き出しに完全対応しています。
  • Inkscape：無料・オープンソースのベクターグラフィックエディター。SVGをネイティブ形式としてサポートしており、高度な編集が可能です。
  • Figma：Webベースのデザインツール。SVGのインポート・エクスポートをサポートし、チームでの共同作業に適しています。
  • Adobe XD：UIデザイン・プロトタイピングツール。SVGの扱いに長けています。
  • Affinity Designer：Adobe Illustratorの代替として人気のあるベクターグラフィックソフト。SVGへの完全対応が特徴です。
  • テキストエディター（VS Code、Notepad++など）：SVGはXMLテキストのため、コードとして直接編集できます。
  • CorelDRAW：幅広いベクター形式に対応したグラフィックスイート。SVGの編集もサポートしています。

SVGファイルをオンラインで変換するには

SVGを別の形式に変換したい場合、あるいは他の形式のファイルをSVGに変換したい場合には、オンライン変換ツールが便利です。Metric Converter（metric-converter.com）では、SVGをPNG、JPG、WebP、PDFなど多様な形式に変換したり、逆にPNGやJPGからSVGへの変換もブラウザ上で簡単に行えます。ソフトウェアのインストールは不要で、ファイルをアップロードするだけで変換が完了します。

変換時には、透明度の保持やファイルサイズ、出力品質などを考慮した形式を選ぶことが重要です。たとえばWebで写真と組み合わせて使用する場合はPNG、文書に挿入する場合はPDFへの変換が適しています。

よくある質問（FAQ）

SVGとPNGはどちらを使うべきですか？

ロゴ、アイコン、図形など拡大縮小が必要なグラフィックにはSVGが最適です。一方、写真や複雑な色調のグラデーションを含む画像はPNGまたはJPGが適しています。WebでのアイコンやバナーにはSVGを積極的に活用することで、高解像度ディスプレイでも鮮明な表示が実現します。

SVGファイルはセキュリティ上の問題がありますか？

SVGはXMLテキストのため、悪意あるJavaScriptやリンクを埋め込むことが可能です。信頼できないソースから取得したSVGファイルをWebサイトに直接埋め込む場合は、サニタイズ処理を行うことが推奨されます。ブラウザで単に表示する分には一般的に問題ありませんが、ユーザーがアップロードしたSVGを処理するシステムでは注意が必要です。

SVGファイルのサイズを小さくするにはどうすればよいですか？

SVGの最適化には、SVGO（SVG Optimizer）などのツールが有効です。不要なメタデータ、コメント、冗長なパスデータを削除することでファイルサイズを大幅に削減できます。また、GZIPまたはBrotli圧縮を適用してSVGZとして配信する方法もあります。WebサーバーでGZIP圧縮を有効にしているだけでも、SVGの転送サイズを70〜80%削減できる場合があります。

SVGはすべてのブラウザで表示できますか？

現在のすべての主要ブラウザ（Chrome、Firefox、Edge、Safari）はSVGをネイティブサポートしています。Internet Explorer 9以降でも基本的なSVG表示は可能ですが、アニメーションやフィルターなど高度な機能は対応していない場合があります。Internet Explorer 8以前はSVGをサポートしていないため、古いブラウザへの対応が必要な場合はPNGのフォールバックを用意することが推奨されます。