SVGファイルとは？開き方・使い方・画像からの作り方を解説
SVGはピクセルだけでなくコードで画像を記述するため、拡大しても鮮明です。その意味、SVGの用途、手元の画像から作る方法を分かりやすく解説します。
SVG（Scalable Vector Graphics）ファイルは、固定のピクセル格子だけではなく、XMLとベクター形状で記述された画像です。図形、パス、テキスト、塗りとして絵を保存できるため、それらのベクター要素はサイズを変えても鮮明です。ファイルサイズは、要素の数や複雑さ、ラスターコンテンツを埋め込んでいるかによって変わります。W3CのSVG 2標準を参照してください。
初めてSVGを見かけた方に向けて、SVGの正体、ファイルの中身、得意なことと苦手なこと、開き方、手元の画像から作る方法を分かりやすく説明します。ウェブ開発の知識は必要ありません。
要点
- SVGは画像をピクセルではなく、コードで記述した図形として保存するため、どのサイズでもぼやけずに拡大縮小できます。
- ロゴ、アイコン、単純なイラスト、Cricutや印刷の作業に適しています。写真には向きません。
- ウェブブラウザー、デザインアプリ（Illustrator、Inkscape、Figma、Canva）、通常のテキストエディターでも開けます。
- ベクターソフトでデザインするか、手元の画像を変換してSVGを作れます。
SVGと一般的な画像（PNGやJPG）の違い
PNGやJPGはラスター画像です。モザイクのように、色付きピクセルが固定の格子状に並んでいます。十分に拡大すると四角が見えるため、PNGで保存したロゴは大きくするとぼやけます。
SVGはベクター画像です。「ここに円を描いてオレンジで塗り、あちらにこの曲線を描く」といった指示の集まりです。毎回その指示から絵を描き直すため、どのサイズでも鮮明に見えます。その1つの違いが大きな魅力です。使い分けの詳細は、PNGとSVGの比較をご覧ください。
SVGファイルの中身
驚かれることもありますが、SVGはテキストです。メモ帳やコードエディターで開くと読めます。内部では、タグを使うテキスト形式のXMLであり、各図形をコードで記述します。オレンジ色の円だけのSVGは、次のようになります。
<svg viewBox="0 0 100 100">
<circle cx="50" cy="50" r="40" fill="orange" />
</svg>
これがファイル全体です。circleが図形を描き、cx/cyが位置、rが半径、fillが色を指定します。SVGはテキストベースのXMLなので中身を確認でき、このような単純なファイルなら属性を1つ編集するだけで色を変えられます。SVGは、現在のブラウザーが実装するW3Cのオープン標準です。W3CのSVG入門をご覧ください。
拡張子が.svgzのファイルを受け取った場合は、SVGZとSVGの比較で、マークアップを取り出す方法と、編集やウェブ配信に適した形式の選び方を確認できます。
SVGの用途
SVGは、異なるサイズでもグラフィックを鮮明に保ちたい場合や、図形として編集したい場合に役立ちます。
- ロゴ。 サイズごとに別のファイルを用意せず、1つのSVGを名刺にもバナーにも使えます。
- ウェブサイトのアイコンやグラフィック。 ボタン、矢印、単純なイラストは、画面のピクセル密度が違っても鮮明です。ただし、性能はファイルの複雑さと配信方法に左右されます。
- Cricutやカッティングマシン。 SVGは標準的なカットファイル形式です。機械がパスに沿ってカッティングシート、紙、熱転写シートを切ります。Cricut用SVGファイルの準備で全体の手順を説明しています。
- 印刷や看板。 ベクターは、ピクセルが粗くなることなく、どの実寸サイズにも拡大できます。
SVGが苦手なこと
SVGはフラットなグラフィック作品に向くため、写真には適していません。写真は、平坦な領域のない微妙に混ざった数百万の色からなります。無理に図形にすると、ポスタライズした絵画のような見た目か、巨大で複雑なファイルになります。写真をベクター化したい場合は、先に写真をSVGに変換すると実際に何が起こるかをご覧ください。写真本来の細部が必要なら、JPGやPNGのまま残します。
SVGファイルの開き方
目的に応じて、簡単な方法が3つあります。
- 見るだけなら： ファイルをウェブブラウザーにドラッグします。別のソフトを用意せず、すぐ表示できます。
- 見た目を編集するなら： Inkscape（無料）、Illustrator、Figma、Canvaなどのデザインアプリで開きます。SVGの編集方法で色や形の変更を説明しています。
- コードを見たり調整したりするなら： メモ帳やVS Codeなどのテキストエディターで開きます。
ファイルを開いても空白のキャンバスになる場合は、保存し直す前に空白のSVGの確認リストを使ってください。パスがキャンバス外にある、見えない、クリップされている、そのアプリだけで非対応になっている、といった可能性があります。
SVGの作り方
方法は2つあり、何から始めるかで適切な方が変わります。
最初からデザインします。 ベクターソフト（Inkscape、Illustrator、Figma、Canva）でロゴ、アイコン、イラストを描き、SVGで書き出します。最初からベクターなので、最もきれいな結果になります。
手元の画像を変換します。 多くの方が必要としているのはこちらです。ロゴや作品がPNGやJPGでしか残っていない場合は、ピクセルを編集可能な図形として描き直すベクター化によってSVGにします。画像のベクター化とは何かで、その仕組みを説明しています。
PerfectVectorでの例
PNGやJPGから本物のSVGが必要なら、変換する方法を使います。PerfectVectorは、適したロゴ、アイコン、フラットなイラストを、編集可能なSVGパスと色付き図形として再構築します。画像をSVGに変換し、無料プレビューを元画像と比較し、パスを確認してから、1クレジットで完成したファイルを取得してください。
得意な対象は、SVG自体が得意とするフラットなグラフィック作品やロゴです。細部の多い写真から、本当に写真らしいベクターを得られる変換ツールはありません。その点を曖昧にせず、お伝えします。
安全性について
SVGには<script>要素を含む能動的なコンテンツを入れられます。そのため、信頼できないSVGを画像形式というだけで自動的に安全と考えるべきではありません。MDNはSVGのスクリプト機能を説明しています。 ウェブサイトでアップロードを受け付ける場合は、ファイルの種類と内容を検証し、保存するアップロードの名前を変え、サイズ制限を設け、最小限の権限で配信します。OWASPは、信頼できないアップロードに対してこうした多層防御を推奨しています。OWASPのFile Upload Cheat Sheetを参照してください。
よくある質問
SVGファイルは何に使いますか？ ロゴ、ウェブサイトのアイコン、ボタン、単純なイラスト、Cricutなどの機械のカットファイルに使います。異なるサイズでも鮮明に保ちたい場合や、図形として編集したい場合に、SVGは有力な選択肢です。ファイルが小さく、品質を落とさず拡大縮小できるため、ウェブで広く使われています。
SVGファイルを開くにはどうすればよいですか？ 表示するには現在のウェブブラウザーにドラッグし、見た目を編集するにはInkscape、Illustrator、Figma、Canvaなどの対応デザインアプリで開きます。XMLを確認するには、メモ帳などのテキストエディターで開いてください。OSのサムネイルが表示されないだけでは、ファイルが壊れているとは判断できません。対応ビューアーで開いて確認します。
SVGファイルを作るにはどうすればよいですか？ ベクターソフト（Inkscape、Illustrator、Figma、Canva）でデザインしてSVGで書き出すか、PNGやJPGのロゴなど、手元の画像をベクター化してSVGにします。最初からデザインすると最もきれいになり、ラスターしかない場合は変換が手軽な方法です。
SVGファイルはベクターファイルですか？ はい。SVGはScalable Vector Graphicsの略であり、ピクセルではなくベクター図形として画像を保存します。そのため、どのサイズでも品質を落とさず拡大縮小できます。
SVGとPNGやJPGの違いは何ですか？ PNGやJPGはピクセルでできているため、解像度を超えて拡大するとぼやけます。SVGは図形でできており、どのサイズでも鮮明です。写真にはPNGやJPG、ロゴ、アイコン、グラフィックにはSVGが適しています。
Microsoft WordやOfficeでSVGファイルを開けますか？ はい。対応するMicrosoft 365およびOfficeのバージョンで開けます。Microsoftは、SVGファイルを挿入し、「グラフィックス形式」の設定で色やスタイルを変える方法を案内しています。利用できる設定はアプリやバージョンによって異なります。MicrosoftのSVG編集ガイドを参照してください。
出典
- W3C：Scalable Vector Graphics (SVG) 2：SVGの要素、形状、レンダリング、XML構文の規範的な定義です。
- W3C：SVGの埋め込みコンテンツ：SVG内に埋め込んだラスター画像やその他のコンテンツの標準的な動作です。
- MDN：SVGの
<script>：SVGが実行可能なスクリプトを含められることを示すリファレンスです。 - OWASP：File Upload Cheat Sheet：信頼できないアップロードを受け付け、配信する際のセキュリティ対策です。
- Microsoftサポート：Microsoft 365でSVG画像を編集する：SVGグラフィックに対するOfficeの公式対応状況と編集手順です。
SVGは、固定のピクセル格子ではなく、パスで作品を記述できます。適したフラットな作品がPNGやJPGでしか残っていないなら、PerfectVectorでトレースし、プレビューで図形を確認してから、取得したSVGを編集、印刷、カットに使うツールで試してください。
