SVG
Scalable Vector Graphics
概要（サマリー）
SVG（Scalable Vector Graphics）とは、図形や文字をXMLベースの記述で表し、さまざまな大きさで鮮明に表示できる画像形式である。
点、線、曲線、塗りなどの情報を使って描画するため、ロゴやアイコン、図表のような形が明確な画像に向いている。HTMLへ直接埋め込めば、CSSやJavaScriptで色や動きを制御できる。
ただし、SVGはベクター要素だけでなくラスター画像も含められる。すべての内容が無制限に高品質で拡大できるわけではない。
詳細解説
1. ベクター画像とラスター画像
JPEGやPNGなどのラスター画像は、格子状に並んだ画素の色を記録する。元の解像度を大きく超えて拡大すると、輪郭がぼやけたり画素が目立ったりする。
SVGの図形は、座標、寸法、曲線、色などの情報から表示時に描画される。そのため、ロゴやアイコンを異なる画面サイズで表示しても輪郭を保ちやすい。
一方、写真や複雑な質感はラスター画像の方が効率的なことが多い。SVG内にJPEGやPNGを埋め込んだ場合、その部分は拡大による画質低下を避けられない。
2. XMLベースで記述する
SVGは要素と属性を組み合わせて図形を記述する。次の例は、赤い円を描く最小限のSVGである。
<svg
viewBox="0 0 100 100"
width="100"
height="100"
role="img"
aria-labelledby="circle-title"
xmlns="http://www.w3.org/2000/svg"
>
<title id="circle-title">赤い円</title>
<circle cx="50" cy="50" r="40" fill="#d92d20" />
</svg>
viewBoxはSVG内部の座標範囲を定める。circleのcxとcyは中心位置、rは半径、fillは塗り色を表す。
SVGファイルはテキストとしてVS Codeなどで編集できるが、複雑なパスはデザインツールで作成して最適化する方が扱いやすい場合もある。
3. 表示方法による違い
SVGをWebページで使う代表的な方法には、img要素で読み込む方法と、HTML内へ直接記述するインラインSVGがある。
img要素は通常の画像と同様に扱いやすく、同じファイルを再利用しやすい。インラインSVGはページのDOMの一部になるため、内部の図形をCSSやJavaScriptから細かく操作できる。
ただし、インラインSVGはHTMLの量を増やす。同じ画像を多数のページで使う場合は、外部ファイルやSVGスプライトなども検討する。
4. CSSとJavaScriptによる制御
インラインSVGでは、クラス名を付けた図形の色や透明度をCSSで変更できる。
<button class="favorite-button" type="button" aria-pressed="false">
<svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true">
<path
class="favorite-icon"
d="M12 21s-7-4.35-9.33-8.36C.7 9.25 2.18 5 6.5 5A5.4 5.4 0 0 1 12 8.09 5.4 5.4 0 0 1 17.5 5c4.32 0 5.8 4.25 3.83 7.64C19 16.65 12 21 12 21Z"
/>
</svg>
お気に入り
</button>
装飾目的のSVGではaria-hidden="true"を使い、ボタンの文字で意味を伝えられる。単独で意味を持つ画像の場合は、titleやラベルを使って内容を説明する。
5. サイズと表示領域
レスポンシブ表示では、viewBoxを設定したうえでCSSから幅を調整する方法がよく使われる。viewBoxがないと、拡大縮小や内部座標の扱いが意図どおりにならない場合がある。
線の太さも通常は画像と一緒に拡大縮小される。線幅を一定に保ちたい場合は、用途に応じてvector-effect="non-scaling-stroke"を検討できる。
表示領域の外に図形がある場合や、縦横比の設定が合わない場合は、一部が切れたり余白が増えたりする。SVGだから自動的に最適なレスポンシブ表示になるわけではない。
6. SVGが向いている場面
SVGは、ロゴ、アイコン、地図、グラフ、簡潔なイラストなどに向いている。形状が単純なら、ラスター画像より小さなファイルにできる場合もある。
写真、細かなノイズ、非常に複雑なパスを大量に含む画像では、ファイルが大きくなり描画負荷も増えることがある。この場合はJPEG、WebP、AVIF、PNGなどと比較して選ぶ。
ファイル形式だけで軽さは決まらない。不要なメタデータや座標を削除し、見た目を確認しながら最適化する必要がある。
7. セキュリティ上の注意
SVGは文書形式であり、利用方法によってはスクリプト、イベント属性、外部参照などを含められる。信頼できないSVGをHTMLへ直接挿入すると、XSSなどの原因になる可能性がある。
一方、img要素で読み込まれたSVGにはブラウザによる制限が適用される。危険性は表示方法やブラウザの処理モードによって異なるため、「SVGファイルなら常にスクリプトが実行される」とは限らない。
ユーザーがアップロードしたSVGを公開する場合は、許可する要素と属性を限定してサニタイズし、適切なContent Security Policyや配信方法も検討する。拡張子やMIMEタイプの確認だけでは不十分である。
AIコーディングとの関係
AIは、単純なアイコン、図表、ローディング表示などのSVGコードを作成する際に利用できる。viewBox、使用色、線幅、用途、アクセシビリティ要件を指定すると、目的に近い出力を得やすい。
生成されたSVGでは、不要に複雑なパス、重複した要素、固定サイズ、ラベル不足を確認する。見た目が正しくても、座標が過剰でファイルサイズが大きい場合がある。
また、外部から取得したSVGやAI生成SVGをそのまま信頼せず、script、イベント属性、外部URL参照などが含まれていないか確認する。ユーザー入力と組み合わせる場合は特にサニタイズが必要である。
よくある勘違い
SVGならどんな画像でも劣化しない？
ベクター図形は拡大に強いが、SVG内へ埋め込んだラスター画像は元の解像度に依存する。複雑なフィルターも拡大時の見え方や性能に影響する。
SVGは必ずPNGやJPEGより軽い？
必ずではない。単純な図形では軽くなりやすいが、パスや効果が複雑になるとファイルサイズや描画負荷が増える。
SVGはCSSやJavaScriptから常に内部操作できる？
インラインSVGなら操作しやすいが、img要素で読み込んだ外部SVGの内部は、ページのCSSやJavaScriptから同じようには操作できない。
SVGは画像なので安全？
単純な画像データとは限らない。利用方法によって実行可能な内容を含められるため、信頼できないSVGは検査とサニタイズが必要である。
まとめ
- SVGはXMLベースでベクター図形や文字を表現できる画像形式である
- ロゴやアイコンの拡大縮小に向くが、写真や複雑な画像には適さない場合がある
- インラインSVGはCSSやJavaScriptで内部を操作できる
viewBox、アクセシビリティ、ファイルサイズを確認する必要がある- 信頼できないSVGを公開する場合はセキュリティ対策が必要である
情報ソース
より詳しくAIに聞いてみよう
- SVGとPNG、JPEG、WebPの使い分けを表で整理してください。
- SVGの
viewBoxとwidth、heightの関係を説明してください。 - インラインSVGと
img要素での読み込みを比較してください。 - アクセシブルなSVGアイコンの実装例を作成してください。
- ユーザー投稿SVGを安全に公開するための確認項目を作成してください。