WEBデザインを下層まで探せるWEBギャラリー・リンク集。
WEBサイト・LPを毎日更新していきます!

SVGファイルの埋め込みと活用術｜HTMLでの表示方法/CSSでのBackground・Mask実装

SVGファイルの埋め込みと活用術｜HTMLでの表示方法/CSSでのBackground・Mask実装

投稿者の画像

y.harima

2025.11.21 更新

この記事を共有する

この記事を共有する

Close

もっと知らせる

Webで扱う画像にはさまざまな形式がありますが、その中でもSVGは、高解像度な現代のWeb環境において、パフォーマンスとデザインの自由度を高める強力なツールです。

本記事では、このSVGについて、基礎知識から応用テクニックまでを解説します。

SVGの概要 / 特徴

SVG（Scalable Vector Graphics）は、Webサイトで広く使われる特別な画像ファイル形式です。

普通の画像（JPEGやPNGなど）が色のついた小さな点の集まり（ピクセル）でできているのに対し、SVGは「円の真ん中はどこ？」「線はどこからどこまで？」といった数学的な情報（ベクター形式）で形が定義されています。

その結果、どれだけ拡大・縮小しても、画像が粗くなったり、ぼやけたりすることがなく、常に最高の品質を保てるのが最大の特徴です。

SVGの主なメリット

SVGには、見た目の美しさ以外にも、Webサイトの制作に役立つ多くのメリットがあります。

  1. スケーラビリティ（拡大・縮小に強い）
    画像の情報がピクセルではなく、幾何学的な情報（数学的なデータ）に基づいているため、Retinaディスプレイなどの高解像度環境でも常にクリアです。様々なデバイスで表示しても、デザイン品質が損なわれません。
  2. 軽量性
    SVGファイルは、中身がテキスト（XMLコード）でできているため、バイナリ形式（JPEGやPNGなど）のファイルよりもファイルサイズを軽く保ちやすい傾向にあります。
  3. 操作性（柔軟な編集）
    SVGはテキストデータなので、HTMLやCSSと同じように扱えます。これにより、後からCSSを使って色や形を変えたり、JavaScript（JS）を使ってアニメーションをつけたりするのが非常に簡単です。
  4. SEO効果
    SVGは画像でありながら中身がテキスト情報（XMLコード）のため、検索エンジンが画像の内容を理解しやすく、検索順位の向上（SEO）にも貢献します。

HTMLでのSVGの表示方法（SVGの埋め込み）

SVGをHTMLファイルに読み込む方法はいくつかあり、その方法によって「操作できる範囲」が変わってきます。

1. <img>タグで外部ファイルを読み込む（一番簡単な方法）

これは、JPEGやPNGと同じように、外部にある.svgファイルを読み込む最も一般的な方法です。

<img src="img/icon/icon.svg" alt="アイコン画像">

2. <object>または<iframe>タグを使用する方法

これらのタグは、SVGを外部コンテンツとしてHTML内に埋め込むために使用されます。

<object>タグを使用する場合、JavaScriptによる操作が可能です（ただしセキュリティ上の制約がある場合があります）。

<object data="logo.svg" type="image/svg+xml">
  <!-- 代替コンテンツとしてPNG画像やテキストを配置 -->
  <img src="logo_fallback.png" alt="サイトのロゴ">
  <p>ロゴの表示に失敗しました。</p>
</object>

3. <svg>タグを直接記述する（インラインSVG）

SVGファイルのコード全体を、表示したいHTMLファイルの中に直接書き込む方法です。

この方法は、SVGがHTMLの一部になるため、CSSやJavaScriptからSVG内部の要素（例：円の色、線の太さなど）を自由に操作できるようになります。

また、外部ファイルへのアクセス（HTTPリクエスト）が不要になるため、サイトの表示速度向上にもつながります。

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

4. <symbol>と<use>で効率的に再利用する（SVGスプライト）

Webサイトで多くのアイコン（例：星、矢印など）を使う場合、全てのコードを毎回書くと非効率です。
そこで、SVGスプライトという手法を使います。

この手法は、サイトで使うすべてのアイコンの設計図を<symbol>タグに定義し、HTMLファイルの目に見えない場所にまとめて置いておき、必要なときに<use>タグでその設計図を呼び出して利用する方法です。

<body>
  <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
    <symbol viewBox="0 0 16 16" id="arrow_left">
      <path d="M8 12.875..."/> 
    </symbol>
  </svg>

  <button class="c-btn">
    戻る
    <svg class="c-svg"><use href="#arrow_left"></use></svg>
  </button>
</body>
/* アイコンのカラー指定  */
.c-btn svg {
  fill: #fff;
}

コードの解説

<symbol id=”star”>はアイコンの定義であり、display: none;で非表示にされています。
それに対し、<use href=”#star”>は、その設計図を参照して実際に画面にアイコンを描画する命令です。

実際にアイコンを描画する際は、<use>タグのhref属性に、参照したい<symbol>タグのID（例：#icon-star）を当てはめます。

これにより、コードがすっきりし、アイコンの一元管理が可能になります。

CSSでのSVGの表示方法（SVG background）

SVGファイルをCSSのbackgroundプロパティとして利用することで、デザインの柔軟性が高まります。

1. 外部ファイルとして読み込む

この方法は、Webデザインにおいて背景画像を設定する最も標準的かつ一般的な手法です。
この方法で読み込んだSVGは、CSSやJSから内部の色を変えるなどの動的な操作はできません。

/* 外部SVGファイルを背景として設定 */
.element {
  background-image: url('img/icon/icon.svg');
}

2. インラインで直接記述する（Data URI）

SVGのコードを特殊な形式（Data URI）に変換し、CSSファイルの中に直接書き込む方法です。

/* 例:矢印アイコン  */
.icon-red-circle {
  background-image: url("data:image/svg+xml,<svg width="8" height="12" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 10.59L4.58 6L0 1.41L1.41 0L7.41 6L1.41 12L0 10.59Z" fill="%235F6368"/></svg>");
}

コードの解説

実際に Data URI を生成して利用する際は、Figmaのようなデザインツールから SVGコードを直接書き出すか、SVG 画像を Data URI 形式に変換してくれる無料のオンラインツールを活用すると便利です。

ただし、Data URI として SVGコードを埋め込む場合、それはURLとして扱われます。そのため、特定の特殊文字（例：カラーコードに使われるシャープ記号 # など）は、%23 のようにURLエンコード（符号化）して記述する必要があります。

SVGでマスク効果を実現する（SVG mask）

SVGには、画像や他の要素をカスタムの形状に切り抜くことができるマスク機能があります。

SVGのクリッピングマスクの手順

1. 対象要素の用意

切り抜きたい画像などの要素を<img>タグなどでHTMLに配置します。
※この時画像に mask というクラスを与えておきます。

<img class="mask" src="https://images.unsplash.com/photo-1619995745882-f4128ac82ad6?q=80&w=2064&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="背景画像">

2. 切り抜き形状（パス）の定義

切り抜きの型となる形状は、デザインツール（Figmaなど）や無料のオンラインツールで作成し、そのSVGコードをインラインSVGとしてHTML内に記述します。

<img class="mask" src="https://images.unsplash.com/photo-1619995745882-f4128ac82ad6?q=80&w=2064&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="背景画像">
  
<svg width="200" height="32" viewBox="0 0 200 32" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path opacity="0.2" d="M17.9406 3.78739C17.9802 3.77747 18.021 3.77246 18.0619 3.77246H30.4303C31.0101 3.77246 31.1251 4.59394 30.5676 4.75322L27.0676 5.75322C27.023 5.76599 26.9767 5.77246 26.9303 5.77246H14.0619C13.4722 5.77246 13.3686 4.9304 13.9406 4.78739L17.9406 3.78739Z" fill="white"/>
  <path opacity="0.4" d="M17.9151 9.8043C17.9712 9.78324 18.0307 9.77246 18.0907 9.77246H31.564C32.1078 9.77246 32.2608 10.5178 31.761 10.732L27.0943 12.732C27.0321 12.7587 26.9651 12.7725 26.8974 12.7725H12.7573C12.2007 12.7725 12.0606 11.9997 12.5818 11.8043L17.9151 9.8043Z" fill="white"/>
  <path opacity="0.6" d="M17.8943 16.8252C17.9638 16.7905 18.0403 16.7725 18.1179 16.7725H32.3485C32.8432 16.7725 33.0375 17.4141 32.6259 17.6885L28.1259 20.6885C28.0437 20.7432 27.9472 20.7725 27.8485 20.7725H12.1179C11.5903 20.7725 11.4224 20.0612 11.8943 19.8252L17.8943 16.8252Z" fill="white"/>
  <path d="M17.8943 24.8252C17.9638 24.7905 18.0403 24.7725 18.1179 24.7725H31.7928C32.2382 24.7725 32.4613 25.311 32.1463 25.626L29.1463 28.626C29.0526 28.7198 28.9254 28.7725 28.7928 28.7725H12.1179C11.5903 28.7725 11.4224 28.0612 11.8943 27.8252L17.8943 24.8252Z" fill="white"/>
  <path d="M190.736 2.63965L184.336 2.63979V18.4796C184.336 22.5117 182.512 24.4316 178.672 24.4316C174.928 24.4316 173.104 22.5117 173.104 18.4796V2.63965L166.704 2.63981V18.4157C166.704 21.9997 167.664 24.7836 169.52 26.7676C171.44 28.7836 174.672 29.9036 178.64 29.9036C186.352 29.9036 190.736 25.7757 190.736 18.4796V2.63965Z" fill="white"/>
  <path d="M147.821 2.06445C155.693 2.06445 160.717 7.44045 160.717 15.8245C160.717 24.2725 155.565 29.8725 147.789 29.8725C139.949 29.8725 134.893 24.4005 134.893 15.9205C134.893 7.47245 139.949 2.06445 147.821 2.06445ZM147.821 24.3365C151.693 24.3365 154.061 21.1365 154.061 15.8885C154.061 10.7045 151.693 7.56845 147.821 7.56845C143.917 7.56845 141.517 10.7365 141.517 15.8885C141.517 21.1045 143.917 24.3365 147.821 24.3365Z" fill="white"/>
  <path d="M107.856 21.232L114.512 20.592C114.64 21.744 114.864 22.32 115.344 22.96C116.112 23.92 117.456 24.464 119.088 24.464C121.552 24.464 123.024 23.376 123.024 21.584C123.024 20.592 122.512 19.728 121.68 19.344C121.008 19.024 120.208 18.8 116.88 18.032C113.936 17.392 112.912 17.008 111.728 16.176C109.712 14.768 108.624 12.624 108.624 10.032C108.624 5.104 112.592 2 118.896 2C122.96 2 126.064 3.248 127.792 5.648C128.592 6.704 128.976 7.664 129.392 9.488L122.608 10.224C122.224 8.144 121.072 7.28 118.64 7.28C116.688 7.28 115.248 8.336 115.248 9.808C115.248 10.704 115.728 11.376 116.752 11.856C117.392 12.144 117.392 12.144 121.168 12.912C123.6 13.424 125.136 13.968 126.352 14.736C128.656 16.176 129.808 18.32 129.808 21.264C129.808 23.664 129.04 25.712 127.568 27.152C125.712 28.944 122.896 29.872 119.152 29.872C116.432 29.872 113.744 29.296 112.016 28.304C110.416 27.408 109.232 26.032 108.56 24.208C108.24 23.44 108.08 22.704 107.856 21.232Z" fill="white"/>
  <path d="M103.844 29.2637H96.3561C96.1001 27.7277 95.9081 26.8956 95.5881 25.8076L94.7241 23.0877H85.6041L84.7401 25.8076C84.3241 27.0876 84.1001 28.0797 83.9401 29.2637H76.4521C76.9321 28.3037 77.2201 27.5356 77.9881 25.3596L84.9002 6.09565C85.4761 4.52765 85.7641 3.56765 85.9241 2.63965H94.2761C94.5002 3.56765 94.7241 4.39965 95.3641 6.09565L102.308 25.3596C102.916 27.0556 103.428 28.3677 103.844 29.2637ZM93.1561 17.7116L90.1161 8.11165L87.1401 17.7116H93.1561Z" fill="white"/>
  <path d="M69.9371 24.5277L62.2251 13.1676L72.4011 2.63965H63.7611L54.6091 13.0396V7.37565V2.63965H48.0811V29.2637H54.6091V24.5277V20.4956L57.8411 17.2637L65.0091 29.2637H73.3291C72.2411 27.9197 71.8251 27.3437 69.9371 24.5277Z" fill="white"/>
</svg>

3. <clipPath>による定義

その形状（例：<path>、<circle>）を<clipPath>タグで囲み、IDを付与してクリッピングパスとして定義します。

<img class="mask" src="https://images.unsplash.com/photo-1619995745882-f4128ac82ad6?q=80&w=2064&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="背景画像">
  
<svg width="200" height="32" viewBox="0 0 200 32" fill="none" xmlns="http://www.w3.org/2000/svg">
  <clipPath id="svgPath">
    <path opacity="0.2" d="M17.9406 3.78739C17.9802 3.77747 18.021 3.77246 18.0619 3.77246H30.4303C31.0101 3.77246 31.1251 4.59394 30.5676 4.75322L27.0676 5.75322C27.023 5.76599 26.9767 5.77246 26.9303 5.77246H14.0619C13.4722 5.77246 13.3686 4.9304 13.9406 4.78739L17.9406 3.78739Z" fill="white"/>
    <path opacity="0.4" d="M17.9151 9.8043C17.9712 9.78324 18.0307 9.77246 18.0907 9.77246H31.564C32.1078 9.77246 32.2608 10.5178 31.761 10.732L27.0943 12.732C27.0321 12.7587 26.9651 12.7725 26.8974 12.7725H12.7573C12.2007 12.7725 12.0606 11.9997 12.5818 11.8043L17.9151 9.8043Z" fill="white"/>
    <path opacity="0.6" d="M17.8943 16.8252C17.9638 16.7905 18.0403 16.7725 18.1179 16.7725H32.3485C32.8432 16.7725 33.0375 17.4141 32.6259 17.6885L28.1259 20.6885C28.0437 20.7432 27.9472 20.7725 27.8485 20.7725H12.1179C11.5903 20.7725 11.4224 20.0612 11.8943 19.8252L17.8943 16.8252Z" fill="white"/>
    <path d="M17.8943 24.8252C17.9638 24.7905 18.0403 24.7725 18.1179 24.7725H31.7928C32.2382 24.7725 32.4613 25.311 32.1463 25.626L29.1463 28.626C29.0526 28.7198 28.9254 28.7725 28.7928 28.7725H12.1179C11.5903 28.7725 11.4224 28.0612 11.8943 27.8252L17.8943 24.8252Z" fill="white"/>
    <path d="M190.736 2.63965L184.336 2.63979V18.4796C184.336 22.5117 182.512 24.4316 178.672 24.4316C174.928 24.4316 173.104 22.5117 173.104 18.4796V2.63965L166.704 2.63981V18.4157C166.704 21.9997 167.664 24.7836 169.52 26.7676C171.44 28.7836 174.672 29.9036 178.64 29.9036C186.352 29.9036 190.736 25.7757 190.736 18.4796V2.63965Z" fill="white"/>
    <path d="M147.821 2.06445C155.693 2.06445 160.717 7.44045 160.717 15.8245C160.717 24.2725 155.565 29.8725 147.789 29.8725C139.949 29.8725 134.893 24.4005 134.893 15.9205C134.893 7.47245 139.949 2.06445 147.821 2.06445ZM147.821 24.3365C151.693 24.3365 154.061 21.1365 154.061 15.8885C154.061 10.7045 151.693 7.56845 147.821 7.56845C143.917 7.56845 141.517 10.7365 141.517 15.8885C141.517 21.1045 143.917 24.3365 147.821 24.3365Z" fill="white"/>
    <path d="M107.856 21.232L114.512 20.592C114.64 21.744 114.864 22.32 115.344 22.96C116.112 23.92 117.456 24.464 119.088 24.464C121.552 24.464 123.024 23.376 123.024 21.584C123.024 20.592 122.512 19.728 121.68 19.344C121.008 19.024 120.208 18.8 116.88 18.032C113.936 17.392 112.912 17.008 111.728 16.176C109.712 14.768 108.624 12.624 108.624 10.032C108.624 5.104 112.592 2 118.896 2C122.96 2 126.064 3.248 127.792 5.648C128.592 6.704 128.976 7.664 129.392 9.488L122.608 10.224C122.224 8.144 121.072 7.28 118.64 7.28C116.688 7.28 115.248 8.336 115.248 9.808C115.248 10.704 115.728 11.376 116.752 11.856C117.392 12.144 117.392 12.144 121.168 12.912C123.6 13.424 125.136 13.968 126.352 14.736C128.656 16.176 129.808 18.32 129.808 21.264C129.808 23.664 129.04 25.712 127.568 27.152C125.712 28.944 122.896 29.872 119.152 29.872C116.432 29.872 113.744 29.296 112.016 28.304C110.416 27.408 109.232 26.032 108.56 24.208C108.24 23.44 108.08 22.704 107.856 21.232Z" fill="white"/>
    <path d="M103.844 29.2637H96.3561C96.1001 27.7277 95.9081 26.8956 95.5881 25.8076L94.7241 23.0877H85.6041L84.7401 25.8076C84.3241 27.0876 84.1001 28.0797 83.9401 29.2637H76.4521C76.9321 28.3037 77.2201 27.5356 77.9881 25.3596L84.9002 6.09565C85.4761 4.52765 85.7641 3.56765 85.9241 2.63965H94.2761C94.5002 3.56765 94.7241 4.39965 95.3641 6.09565L102.308 25.3596C102.916 27.0556 103.428 28.3677 103.844 29.2637ZM93.1561 17.7116L90.1161 8.11165L87.1401 17.7116H93.1561Z" fill="white"/>
    <path d="M69.9371 24.5277L62.2251 13.1676L72.4011 2.63965H63.7611L54.6091 13.0396V7.37565V2.63965H48.0811V29.2637H54.6091V24.5277V20.4956L57.8411 17.2637L65.0091 29.2637H73.3291C72.2411 27.9197 71.8251 27.3437 69.9371 24.5277Z" fill="white"/>
  </clipPath>
</svg>

4. CSS で切り抜く

対象の要素に対し、CSSのclip-pathプロパティを使用し、定義したクリッピングパスのIDを参照して切り抜きます。

.mask {
  -webkit-clip-path: url(#svgPath);
  clip-path: url(#svgPath);
}

5. 完成

See the Pen knowledge_svg_001 by Yugo Harima (@yh-kasou-knowledge) on CodePen.

まとめ

本記事では、SVGについて、その基礎知識から実践的な活用方法までを解説しました。

SVGの最大の魅力は、なんといってもスケーラビリティです。
ピクセルに縛られないベクター形式だからこそ、どれだけ拡大・縮小しても品質が一切劣化しない、圧倒的な鮮明さを誇ります。

さらに、XMLベースのテキストデータであるおかげで、CSSやJavaScriptを使えば、色や形を自由自在に操れる高い操作性も大きな強みです。

SVG活用の要点再確認

  1. 効率的な埋め込み
    アイコンをたくさん使用する場合は、コードの重複を防ぎ一元管理が可能な<symbol>と<use>によるSVGスプライトが最適です。
  2. 背景画像の高速化
    CSSの背景画像として使用する場合は、HTTPリクエストを削減できる Data URI を用いることで、サイトの読み込み速度が向上します。
  3. 高度なデザイン
    SVGのマスク機能を利用すれば、画像に対して複雑な形状（丸や星形など）の切り抜きを容易に適用でき、デザインの表現力を大きく高められます。

クリッピングマスクを使用しているサイト

ベイクチーズタルト | BAKE CHEESE TART

ベイクチーズタルト | BAKE CHEESE TART

YogaStudio アンジャリ六甲

YogaStudio アンジャリ六甲

関連リンク

もっと知らせる