SVG

SVG (Scalable Vector Graphics) is a standard format described in a text-based XML structure that allows vector images to be used on the web without losing quality when scaled.

SVG (Scalable Vector Graphics)

SVGとは何か

ベクター画像の概要
ベクター画像の特徴と、ビットマップ画像との違い。拡大縮小しても画質が落ちない理由。
SVGの役割
Webページで使われる画像フォーマットの一つとしての位置づけや利点。アイコン、ロゴ、チャートなどで使われるケース。
主なメリット
検索エンジンにテキストとして認識される、コードで編集が可能、ファイルサイズが小さくなる場合があるなど。
SVGとは
ウェブ上で高解像度で拡大・縮小できるベクター形式の画像ファイル形式です。
SVGの最適化
Illustrator、Vectornatorなどの各種ツールで生成した SVGファイルの不要なデータを取り除いて軽量化する。

SVGファイルの基本構造

SVG要素のルート要素
<svg> タグの書き方と基本的な属性 (width, height, viewBox など)。
XML形式としての構造
HTMLと同様のマークアップだが、XMLのルールに従うこと (閉じタグの厳格さなど)。
名前空間 (namespace)
xmlns 属性を指定する意義や他のXMLベース言語との区別。

基本的な描画要素

図形要素
circle
指定した中心点と半径で円を描くためのシンプルな要素です。
<rect> (四角形)、<ellipse> (楕円)、<line> (直線)、<polygon> (多角形)、<polyline> (折れ線)
パス要素 <path>
もっとも柔軟な図形描画要素。M, L, C などのコマンドの概要。
座標系の理解
SVG空間での座標の取り方。左上を原点とした2D座標。

塗り (fill) と線 (stroke)

基本的な属性
fill と stroke の使い方。色の指定方法(キーワード、16進数、rgbaなど)。
線幅や線の端点処理 (stroke-width, stroke-linecap, stroke-linejoin)
線の表現を変えるための設定方法。
描画の優先順位
塗りを先に指定するのか、線を先に指定するのかという流れの理解。

テキスト要素

テキスト描画 <text>
テキストをSVG上に直接配置する方法。座標設定と属性 (font-family, font-sizeなど)。
テキストのスタイリング
CSSを利用したテキスト装飾、インラインスタイルと外部CSSの使い分け。
テキストのパス配置 <textPath>
図形やパスに沿わせてテキストを配置する方法。

グラデーションとパターン

グラデーション <linearGradient> <radialGradient>
線形グラデーションと放射状グラデーションの設定、描画対象への適用方法。
パターン <pattern>
繰り返し模様などの背景やテクスチャとして活用する方法。

変形(Transform)と座標系

Transform属性
translate, rotate, scale, skew の利用方法と複数指定の順序。
座標系の変更 (viewBox など)
SVG全体の座標系の変更や、要素固有の座標系を設定するやり方。

フィルター効果

標準フィルター <filter>
ぼかし (blur)、影 (drop-shadow) などを始めとした各種フィルターの設定方法。
フィルターチェーン
複数のフィルターを組み合わせ、複雑な効果を作り出す手順。

アニメーションとインタラクション

SMILアニメーション
SVGがもともと持つアニメーション機能の基本と、属性の変化を時間制御する方法 (<animate>, <animateTransform>など)。
CSSアニメーションとの組み合わせ
SVG要素に対するCSSアニメーション・トランジションの応用。
JavaScriptとの連携
イベントリスナーを使ったインタラクティブな表現 (クリックで色を変える、マウスオーバーで拡大など)。

外部リソースとの連携

画像の埋め込み <image>
ビットマップ画像をSVG内に配置するケースと注意点。
フォント、アイコンフォントとの関連
フォントをSVGフォントとして埋め込む場合や、アイコンフォントをSVGで扱う利点。
シンボルと再利用 <symbol>, <use>
同じ要素を複数回使うための再利用テクニックとベストプラクティス。

レスポンシブデザインと運用

レスポンシブSVG
viewBox の使い方を中心に、ブラウザやデバイスの画面サイズに応じて拡縮する方法。
アートボード感覚での調整
デザイナーがIllustratorなどで書き出したSVGをWeb画面に合わせるときのヒント。
ファイル最適化
不要な空白・タグの削除、ツール(SVGOMG など)を使った軽量化手法。

ツールとワークフロー

グラフィックソフトを使ったSVG書き出し
Adobe Illustrator, InkscapeなどのSVG書き出し設定、注意点。
コードエディタ・開発ツール
VSCodeなどを使って手書きでSVGを編集するメリット、便利なプラグインなど。
バージョン管理 (Git) との連携
XMLテキストなので変更点が可視化しやすい。共同作業のコツ。

実践的な活用例

アイコンやロゴの管理
Webフォント代わりにSVGスプライトを利用する方法。ロゴ画像をベクター化するメリット。
データ可視化(チャートやグラフ)
JavaScriptライブラリ(D3.js, Chart.js など)を活用して動的グラフを描く例。
インフォグラフィックス
文字や画像、グラフを組み合わせた複雑な図表表現。

よくあるエラーとトラブルシューティング

表示されない場合の確認項目
タグの閉じ忘れ、要素の重なり順、レイヤーの取り扱い、名前空間の問題など。
ブラウザ互換性
古いブラウザでの一部機能未対応や、ベンダープレフィックスの必要性。
パフォーマンス上の注意
複雑すぎるパスや多すぎる要素が描画に与える影響と対策。

次のステップと発展学習

React/Vueなどでの動的SVG活用
コンポーネントとしてSVGを扱い、データと連動させる事例。
CanvasやWebGLとの比較
ラスターベースのCanvas、3D向けのWebGLとの使い分けと連携。
SVGにおけるアクセシビリティ
スクリーンリーダーでの読み上げや、視覚障害者への対応のヒント。
ビジュアライゼーション/アニメーションの高度化
D3.jsを使ったデータ可視化、GSAPやAnime.jsでのアニメーション強化など。