SVG組み込みの基本

SVG（Scalable Vector Graphics）は、XMLベースのベクター画像フォーマットの一つです。主にWebサイトやアプリケーションで、解像度に依存しないグラフィックを表示するために使用されます。

<svg> タグを使って直接記述する（インラインSVG）

  • HTML内に直接書くので、CSSやJavaScriptで簡単に制御可能
  • DOM（Document Object Model）として扱える
  • 読み込みが早いが、コードが長くなる場合がある

See the Pen svg-exp001 by Miki Iwamura (@robby_b9) on CodePen.

<img> タグで外部SVGファイルを読み込む

HTMLがシンプルになるキャッシュが効くため、パフォーマンスが向上するJavaScriptやCSSで直接操作できない

<img src="image.svg" width="100" height="100" alt="SVG画像">

CSSの background-image を使う

  • 背景として設定できるので、デザインの一部として使いやすい
  • インタラクティブな要素には向かない
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSSでSVGを背景に設定</title>
    <style>
        .svg-background {
            width: 200px;
            height: 200px;
            background-image: url('image.svg');
            background-size: cover;
        }
    </style>
</head>
<body>
    <div class="svg-background"></div>
</body>
</html>

<object> タグを使う

  • <img> よりも拡張性があり、SVG内の要素にアクセスできる
  • ただし、外部ファイルとして扱われるため、スタイリングやスクリプトの適用に制約がある
<object type="image/svg+xml" data="image.svg" width="100" height="100"></object>

<iframe> タグを使う

  • 独立したコンテンツとして読み込むので、スクリプトやスタイルを独自に適用できる
  • ただし、DOMを直接操作するのは難しい
<iframe src="image.svg" width="100" height="100"></iframe>

<use> タグを使って再利用する

  • インラインSVG内でIDを指定し、他の部分で再利用可能
  • 同じアイコンを複数使う場合に便利

See the Pen svg-exp002 by Miki Iwamura (@robby_b9) on CodePen.

  1. <symbol> を定義する
    • <svg style="display: none;"> 内に id を持つ <symbol> を定義。
    • viewBox を適切に設定すると、スケーリングしやすくなる。
    • 画面には直接表示されないが、<use> で再利用できる。
  2. <use> で再利用する
    • href="#icon-circle" のように指定することで、シンボルを呼び出す。
    • 複数回再利用できるので、コードの重複を減らせる。
  3. サイズの変更
    • <svg width="150" height="150"> のように親SVGのサイズを変えると、アイコンも拡大・縮小する。

まとめ

方法メリットデメリット
インラインSVGCSSやJavaScriptで簡単に操作可能HTMLが長くなる
<img> タグシンプルで軽量スクリプトやCSSで変更不可
CSS background-image背景装飾に適している直接操作できない
<object> タグスクリプトで一部制御可能読み込みに時間がかかる場合あり
<iframe> タグ独立したコンテンツとして読み込めるDOM操作が難しい
<use> タグ再利用が容易事前に<symbol>を定義する必要あり