SVG

SVG（Scalable Vector Graphics）は、XMLベースのベクター画像フォーマットで、解像度に依存しないグラフィックスをウェブページ上に描画するために使用されます。SVGは、拡大・縮小しても画質が劣化しないため、アイコンやロゴ、図形、アニメーションなどでよく利用されています。また、JavaScriptやCSSと連携して、インタラクティブなグラフィックやアニメーションを実現できるため、柔軟で多用途なグラフィック形式です。

SVGは、ブラウザで直接描画されるため、特別なプラグインを必要とせず、HTMLに直接埋め込んで利用できます。

SVGの特徴

  • 解像度非依存
    ベクター画像であるため、拡大・縮小しても画質が劣化しません。これにより、どのデバイスでも高解像度で表示可能です。
  • 軽量でテキストベース
    XML形式のテキストベースのデータで構成されているため、サイズが軽く、編集や圧縮が容易です。
  • スクリプトやスタイルが適用可能
    SVGは、CSSでスタイリングやアニメーションを行うことができ、JavaScriptを使ってインタラクティブな要素を追加することも可能です。
  • SEO対応
    SVG内のテキストは検索エンジンが読み取れるため、SEOにも適しています。

SVGの基本構造

SVGはXML形式の構造を持ち、HTMLと同様にタグを使って要素を定義します。基本的な構造は以下の通りです。

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="40" fill="blue" />
</svg>

この例では、100×100ピクセルのSVGキャンバスに青い円を描画しています。

主なSVG要素

  • <svg>
    SVGのルート要素で、キャンバス全体を表します。widthとheight属性でサイズを指定します。
  • <circle>
    円を描画する要素です。cx（中心のx座標）、cy（中心のy座標）、r（半径）を指定して円を定義します。
  • <rect>
    四角形を描画する要素です。x（左上のx座標）、y（左上のy座標）、width（幅）、height（高さ）を指定します。
  • <line>
    直線を描画する要素です。x1、y1（開始点の座標）とx2、y2（終了点の座標）を指定します。
  • <polygon>
    多角形を描画する要素です。points属性に頂点の座標を指定します。
  • <path>
    複雑な図形を描画するための要素です。d属性で図形の描画パスを指定します。
  • <text>
    テキストを描画する要素です。x、yで位置を指定し、テキスト内容を定義します。

SVGの使い方

SVGは、HTMLに直接埋め込む、ファイルとしてリンクする、CSSのbackground-imageとして使用するなど、さまざまな方法で利用できます。

1. HTMLに直接埋め込む

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="40" fill="blue" />
</svg>

2. 外部ファイルとしてリンクする

SVGファイルを別ファイルとして保存し、<img>タグや<object>タグで埋め込む方法です。

<img src="image.svg" alt="サンプルSVG" />
<object type="image/svg+xml" data="image.svg"></object>

3. CSSのbackground-imageとして使用する

CSSのbackground-imageでSVGファイルを背景として使用できます。

.element {
  background-image: url('image.svg');
  width: 100px;
  height: 100px;
}

SVGのアニメーション

SVGは、CSSやJavaScript、SMIL（Synchronized Multimedia Integration Language）を使ってアニメーションが可能です。以下にCSSを使った簡単なアニメーションの例を示します。

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="40" fill="blue">
    <animate attributeName="r" from="40" to="10" dur="1s" repeatCount="indefinite" />
  </circle>
</svg>

この例では、<circle>の半径が40から10に変化するアニメーションが繰り返されます。

CSSでのアニメーション

CSSを使ってSVGをアニメーションさせることもできます。

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="40" class="animated-circle" />
</svg>
.animated-circle {
  fill: blue;
  transition: fill 0.5s ease;
}

.animated-circle:hover {
  fill: red;
}

この例では、円にマウスオーバーすると色が青から赤に変わります。

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

メリット

  • 解像度非依存で高品質
    ベクター形式のため、拡大縮小しても画質が劣化せず、レスポンシブデザインに最適です。
  • 軽量でロードが速い
    テキストベースのため、複雑なビットマップ画像よりもファイルサイズが軽く、ウェブページの表示速度向上に寄与します。
  • アニメーションやインタラクティブ性が追加可能
    CSSやJavaScriptを使って簡単にアニメーションを追加し、インタラクティブな要素を作成できます。

デメリット

  • 複雑な画像には不向き
    写真や複雑なビットマップ画像には適していません。
  • 一部の古いブラウザでの互換性
    現在の主要なブラウザではサポートされていますが、一部の古いブラウザでは適切に表示されないことがあります。

SVGの活用例

  1. アイコン
    解像度に依存しないため、あらゆるサイズでクリアな表示が可能で、ウェブアイコンに最適です。
  2. ロゴ
    拡大縮小しても画質が落ちないため、企業ロゴなどでよく使用されます。
  3. グラフや図表
    ダイナミックにサイズ変更でき、視覚的なデータ表示に適しています。
  4. インタラクティブなインフォグラフィック
    アニメーションやインタラクティブ性を持たせたインフォグラフィックやデータビジュアライゼーションが作成できます。
  5. アニメーションバナー
    SVGを使ったアニメーションは軽量で、複雑なJavaScriptや画像ベースのアニメーションと比較して表示速度が速いです。

SVGは、軽量で高解像度なグラフィックをウェブ上に表示するために非常に有効なツールであり、HTMLやCSS、JavaScriptと簡単に組み合わせて使うことができるため、ウェブデザインや開発において欠かせない技術となっています。

誤りや表現の修正を報告

Ad

独自ドメインを複数お持ちの方にお勧めのレンタルサーバー！