SVG Tips vol.2 - SVGをウェブページに表示する方法

2022年12月29日 14:55

前回の記事（SVG Tips vol.1）では、SVGの特徴とIllustratorから適切に書き出す方法について紹介しました。

今回は、書き出したSVGをウェブページに表示する方法について解説します。サンプルファイルも用意しているので、ぜひ一緒に手を動かしてみてください。

サンプルファイルのダウンロード

上記のダウンロードボタンからダウンロードできない方はこちらからどうぞ。

SVGをウェブページに表示する方法

SVGをウェブページに表示するには、大きく分けて4つの方法があります。

1.<img>タグを使う
HTMLの<img>タグでSVGファイルを直接指定する。

2.<object> タグを使う
HTMLの<object> タグでSVGファイルを埋め込む。

3.CSSを使う
CSSのbackground-imageプロパティで背景画像として指定する。

4.<svg> タグを使う
<svg> タグを使ってHTML内にインラインで直接記述する。

この記事では、1.<img>タグ、4.<svg> タグを使う方法について解説します。

<img>タグでSVGを表示してみよう

単に「拡大してもボケないクッキリした画像」として表示させたい場合は、 HTMLの<img>タグにSVGファイルを直接指定する方法がシンプルです。

下記のファイルをテキストエディタで開きます。
svg_sample>sample01>index.html

同じ階層にある、pad_icon.svgを表示してみましょう。
※このSVGファイルは、前回の記事でIllustratorから書き出したものです。

11行目（p要素の中）に、このようにimg要素を記述します。

<img src="pad_icon.svg" alt="肉球のアイコン">

index.htmlを保存してブラウザで確認すると、肉球のアイコンが表示されています。

PNGやJPGを表示させるのと同じ書き方なので、手軽ですね。

<svg> タグでSVGを表示してみよう

CSSやJSで色を変更したりアニメーションさせたい場合は、<svg>タグを使ってHTML内にインラインで直接記述する方法を使います。

SVGを最適化する

svg_sample>sample02>pad_icon.svgをテキストエディタで開きます。

SVGは、画像でありながらも、中身はXML ベースのテキストファイルなので、テキストエディタで開いて編集することができます。

Illustratorから書き出したままの状態だと不要なものが混じっているので、必要なものだけを取り出してHTMLにペーストしていきます。

1行目の<?xmlから始まるXML宣言と、2行目のコメントは不要なので無視します。
3行目以降の、<svg>の開始タグから終了タグ</svg>までを選択してコピーしましょう。

svg_sample>sample02>index.htmlをテキストエディタで開きます。

11行目（p要素の中）に、先ほどコピーしておいた<svg>タグをペーストします。

xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px"
enable-background="new 0 0 100 100"
xml:space="preserve"

id名を確認する

Illustratorのレイヤー名がid名として反映されています。
日本語が含まれている場合は不具合の原因になるので、英数字に直しておきましょう。
※実はid名は日本語でも文法的には問題ないのですが、慣習的に使わない方が良いです（個人的な意見）。

ブラウザで確認

index.htmlを保存し、ブラウザで確認して、アイコンが表示されていることを確認しましょう。

SVGを直接HTMLの中に記述しましたので、sample02フォルダの中のpad_icon.svgは、削除するか他の場所に移動させてしまって構いません。
後から「これは必要なファイルなんだっけ？」とならないためにも、sample02フォルダの中に残しておかない方が良いです。

CSSでサイズを変更しよう

svg_sample>sample02>style.cssをテキストエディタで開きます。

セレクタ.icon svgの中に、このように記述しましょう。

width: 500px;
height: 100%;

style.cssを保存し、ブラウザで確認しましょう。

サイズが大きくなっても、ボケることなくクッキリと表示されています。

CSSで色を変更しよう

線の色はstroke、塗りの色はfillで設定することができます。
線をlightcoral（ピンク色）に、塗りをtransparent（透明）にしてみましょう。

stroke: lightcoral;
fill: transparent;

Illustratorで元のデータを編集しなくても、CSSで直接色を変更できるので便利ですね。

CSSでアニメーションを設定しよう

今回は細かい説明は省きますが、CSS animationを使って動かすことができます。
コメントアウトを解除して、確認してみてください。

SVGの破線プロパティ（stroke-dasharray）を利用した、線を描くようなアニメーションを実装しています。

svg_practice>finish>sample02_finish>style.cssには、説明のコメントを入れているので、学習の参考にしてください。

.icon svg{
  width: 500px;
  height: 100%;
  stroke: lightcoral;
  fill: transparent;
  /* アニメーションの名前 */
  animation-name:dash-animation;
  /* アニメーションが完了するまでの所要時間 */
  animation-duration: 2s;
  /* アニメーションを永遠に繰り返す */
  animation-iteration-count: infinite;
}

@keyframes dash-animation{
  0%{
    /* 線分0、間隔50の破線にする */
    stroke-dasharray:0 50;
    fill: transparent;
  }
  50%{
    /* 線分50、間隔0の破線にする */
    stroke-dasharray:50 0;
    fill: transparent;
  }
  100%{
    stroke-dasharray:50 0;
    fill: lightcoral;
  }
}

さいごに

Illustratorからイラストやロゴを適切にSVG形式で書き出して、ウェブページに挿入する方法を、2回に分けてご紹介しました。
ぜひ、ご自身で色々な表現を試してみてくださいね。

※ 本記事は、2022年12月28日（水）に開催されたオンラインイベント「#朝までイラレ（30人のイラレ使いによる狂宴）」での登壇内容「ウェブページで使うためのSVG書き出し」を、記事としてまとめたものです。

この記事が気に入ったらサポートをしてみませんか？