原文: How to Use SVG Images in CSS and HTML – A Tutorial for Beginners
SVG は Scalable Vector Graphics の略です。SVG とは、Extensible Markup Language (XML) で書かれた、ベクター画像用の固有の画像形式です。
このチュートリアルでは、SVG 画像を使用する理由と、CSS と HTML で SVG 画像を使用する方法についてお伝えします。
なぜ SVG 画像を使用すべきなのでしょうか？
SVG 画像を使用する理由はたくさんありますが、以下にそのいくつかを挙げてみます:
- SVG 画像は拡大したりサイズを変更しても、画質が低下しません。
- SVG は IDE または テキストエディターで作成し、編集できます。
- SVG は使いやすく、アニメ化しやすいです。
- SVG はファイルサイズが小さく、拡張性が高いです。
- また、SVG は検索したり、インデックスをつけたり、スクリプトで操作したり、圧縮できます。
ではこれから、SVG 画像を扱う方法を実際に見ていきましょう。
このチュートリアルで使用する SVG 画像をダウンロードする方法
このチュートリアルの中で使用した SVG 画像を、自分でも使ってみたい場合は、以下の手順と図に従ってダウンロードしてください。
- unDraw を訪れる。
- 配色を黄色に変更する。
- 検索ボックスで、happy という言葉を検索する。
- Happy news という名前の画像をクリックする。
- ポップアップウィンドウが現れるので、Download SVG for your projects ボタンをクリックする。
上記の手順が正しく実行されていれば、コンピュータに SVG 画像をダウンロードできているはずです。
では、SVG 画像をお気に入りの IDE またはテキストエディターで開いてください。開いた画像の名前を、happy.svg もしくは好きな名前に変更してください。
CSS と HTML で SVG 画像を使用する方法
CSS と HTML で SVG 画像を使用するには、いろいろな方法があります。このチュートリアルでは、異なる 6 つの方法を説明します。
1. <img> で SVG を使用する方法
これが SVG 画像をウェブページに追加する、最も簡単な方法です。次のようにして、<img> 要素をHTML ドキュメントに追加し、src 属性の中で SVG 画像を参照します:
<img src ="happy.svg" alt="My Happy SVG"/>
unDraw から SVG 画像をダウンロードし、ファイル名を happy.svg に変更してあれば、上のコードスニペットを HTML ドキュメントの中に追加できます。
もしすべてが正しく行われていれば、ウェブサイトはちょうど以下のデモのように見えるはずです。👀
サイズを指定せずに <img> タグを使用して SVG 画像を追加すると、その画像は元の SVG ファイルのサイズであると見なされます。
たとえば、上のデモにおいて、SVG 画像はサイズを変更していないので、その画像の元のサイズ (幅が 915.11162 ピクセル で、高さが 600.53015 ピクセル) と見なされます。
注: 表示する画像のサイズを変更するには、 下のデモの中で確認できるように、CSS で width と height を指定する必要があります。または、元の画像の width と height を直接更新できます。
<img> タグによって追加された SVG 画像のサイズを変更できるとはいえ、SVG 画像に大幅なスタイルの変更を加えようとする場合に、まだいくらかの制限があります。
2. CSS の background-image で SVG を使用する方法
この方法は、<img> タグを用いて SVG を HTML ドキュメントに追加することに似ています。しかし今回は、以下に示されたコードスニペットを用いて、HTML の代わりに CSS でそれを行います。
body {
background-image: url(happy.svg);
}
SVG を CSS の 背景画像 (background image) で使用する場合、<img> タグを使用する時と似たような制限があります。ただ、もう少しカスタマイズできます。
以下のデモを確認して、CSS を用いて自由に変更を加えてみてください。
3. インラインで SVG 画像を使用する方法
<svg> </svg> タグを使用すれば、HTML ドキュメントの中へ SVG 画像をインラインで直接記述できます。
そうするには、VS code またはお好みの IDE の中で SVG 画像を開き、画像のコードをコピーして、HTML ドキュメントの <body> 要素の内側に貼り付けます。
<body>
// Paste the SVG code here.
</body>
もしすべてが正しく行われたとしたら、ウェブサイトはちょうど以下のデモのように見えるはずです。
HTML ドキュメントの中で SVG をインラインで使用する場合は、HTTP リクエストが 1 回で完結するので、ロード時間が減ります。
<img> または background-image 方式のどちらか一方を用いることとは対照的に、この方法を用いることでより多くのカスタマイズができます。
4. <object> で SVG を使用する方法
以下の構文のコードを使用すれば、HTML の <object> 要素でもウェブページに SVG 画像を追加できます:
<object data="happy.svg" width="300" height="300"> </object>
object 要素によって用いられるリソースの URL を、data 属性を用いて指定します。この場合では SVG 画像を指定しています。
width と height 属性を使用して、SVG 画像のサイズを指定します。
繰り返しになってしまいますが、以下のデモをご覧ください。 😃
<object> の使用は、SVG をサポートしているすべてのブラウザーでサポートされています。
5. <iframe> でSVG を使用する方法
この方法はお勧めしませんが、以下のデモで示すように、<iframe> を使用することでも SVG 画像を追加できます。
ただし、<iframe> を管理するのは難しく、サイトの検索エンジン最適化 (SEO) に、悪影響を与える可能性があることを忘れないようにしてください。
また、<iframe> を使用して追加された SVG 画像は拡張性を失い、Scalable Vector Graphics という名前の中の、Scalable (拡張性がある) という性質をくつがえしてしまします。
6. <embed> で SVG を使用する方法
HTML の <embed> 要素は、SVG 画像を HTML と CSS で使用する、これまでとは別の方法であり、次の構文を使用します: <embed src="happy.svg" />
しかし、この方法にも制限があることを忘れないでください。MDN によると、ほとんどのモダンなブラウザーは、プラグインに対するサポートを非推奨にして削除しています。これは、普通のユーザーのブラウザー上で、ご自身のサイトを操作できるようにしたい場合は、<embed> に依存することは一般的に賢明ではないことを意味しています。
以下のデモで、HTML の <embed> 要素を使用して SVG 画像を追加しています。
結論
CSS と HTML で SVG 画像を使用する、さまざまな方法について学ぶことができたと思います。このことが、SVG 画像をウェブサイトへ追加する際に、適切な方法を選ぶことができるように、うまく案内してくれます。
ご質問がございましたら、Twitter のメッセージでご連絡くだされば、どんな小さなご質問も喜んで解答いたします。