HTML および CSS で SVG 画像ファイルを使用する
-
<img>タグを使用して SVG ファイルを Web ページに追加する -
<object>タグを使用して SVG ファイルを Web ページに追加する -
<embed>タグを使用して SVG ファイルを Web ページに追加する -
<iframe>タグを使用して SVG ファイルを Web ページに追加する -
CSS
background-imageプロパティを使用して SVG ファイルを背景として追加する
この記事では、HTML と CSS を使用して Web ページに SVG 画像を埋め込む方法を紹介しました。
SVG ファイルはベクター画像であり、これを使用すると、png、jpeg、jpg、またはその他の画像ファイルを使用するよりも多くの利点があります。 SVG ファイルの主な利点は、解像度に依存しないことです。つまり、任意のサイズにスケーリングしても、画像の解像度や品質は変わりません。
また、SVG ファイルのサイズが非常に小さいため、Web ページの読み込み時間が短縮されます。 また、テキスト エディターで SVG ファイルを編集し、キーワード関連のテキストを追加して SEO 対応にすることもできます。
さらに、スクリプトを使用して SVG ファイルにアニメーションを追加できます。これも、SVG ファイルを使用する最大の利点の 1つです。
<img> タグを使用して SVG ファイルを Web ページに追加する
このセクションでは、HTML の <img> タグを使用して、Web ページに SVG 画像ファイルをレンダリングしました。 svgrepo から 2つの異なるアイコンを取得し、その URL を <img> タグの src タグに埋め込みました。
コード例:
<img src="https://www.svgrepo.com/show/426102/camera.svg" alt="camera icon">
<img src="https://www.svgrepo.com/show/426942/transport.svg" alt="car icon">
上記の出力画像では、ユーザーはカメラと車の SVG アイコンを見ることができます。
<object> タグを使用して SVG ファイルを Web ページに追加する
<object> HTML タグを使用すると、ユーザーはオーディオ、ビデオ、PDF などのマルチメディアを Web ページに表示できます。
object タグの 2つの属性を使用して SVG ファイルを表示しました。 <object> の data 属性は、SVG ファイルのローカル パスまたは URL を取ります。
<object> タグの type 属性はファイル タイプを受け取り、その値として image/svg+xml を使用して SVG ファイルをレンダリングします。
ここでは、object タグを使用してカメラと車のアイコンをレンダリングしました。
<object data="https://www.svgrepo.com/show/426102/camera.svg" type="image/svg+xml"></object>
<object data="https://www.svgrepo.com/show/426942/transport.svg" type="image/svg+xml">
<object> タグ内に代替画像を追加することもできます。 以下の例では、カメラ アイコンの壊れた URL を取得し、代替画像を追加しています。
これで、ユーザーが以下のコードを実行すると、SVG ファイルの URL が壊れているため、代替画像のみが表示されます。
<object data="https:/w.svgrepo.com/show/426102/camera.svg" type="image/svg+xml">
<img src="https://yt3.ggpht.com/ytc/AMLnZu-K8Cu9BcdyoXT2AeAi7TJ744ADUCQyYblAoH9F=s900-c-k-c0x00ffffff-no-rj"
style="height: 50px;width: 50px;" />
</object>
<object data="https://www.svgrepo.com/show/426942/transport.svg" type="image/svg+xml" >
上記の出力では、カメラ アイコンではなくフォールバック イメージである DelftStack のロゴが表示されていることがわかります。
<embed> タグを使用して SVG ファイルを Web ページに追加する
<embed> タグを使用すると、他のアプリケーションを Web ページに埋め込むことができます。 <embed> タグで src および type 属性を使用して、SVG ファイルを Web ページに埋め込みます。
src 属性は SVG ファイルの URL またはパスを取り、type はマルチメディア タイプを定義します。
ここでは、<embed> タグを使用して 2つの SVG アイコンを Web ページに埋め込みました。
<embed src="https://www.svgrepo.com/show/426102/camera.svg" type="image/svg+xml">
<embed src="https://www.svgrepo.com/show/426942/transport.svg" type="image/svg+xml" >
<iframe> タグを使用して SVG ファイルを Web ページに追加する
<iframe> タグを使用すると、開発者はドキュメント内にインライン フレームを埋め込むことができます。 オーディオ、ビデオ、マルチメディアなどの外部リソースに別のフレームまたはブロックを提供します。
ここでは、<iframe> タグを使用し、src 属性内に SVG ファイルの URL を追加しました。 また、<embed> タグや <object> タグのように、表示するマルチメディアのタイプをここで指定する必要はありません。
<iframe src="https://www.svgrepo.com/show/426102/camera.svg" height="50px">
上記の出力は、カメラ アイコンが個別のブロックまたはフレームに埋め込まれていることを示しています。
CSS background-image プロパティを使用して SVG ファイルを背景として追加する
background-image CSS プロパティを使用すると、特定の要素の背景画像を設定できます。 ここでは、SVG ファイルを背景画像として設定しました。
以下の例では、<h3> タグを作成し、テキストを追加しています。 また、CSS の background-image プロパティを使用して背景 SVG 画像を追加しました。
さらに、<h3> のテキストの色を追加し、background-repeat: no-repeat; を設定しました。 背景画像の繰り返しを避けるため。
<h3>welcome to DelftStack!</h3>
h3{
background-image: url("https://www.svgrepo.com/show/426102/camera.svg");
background-repeat: no-repeat;
color: red;
}
この記事では、HTML と CSS を使用して SVG ファイルをレンダリングするさまざまな方法を学びました。 ただし、ユーザーは HTML の <SVG> タグを使用して SVG ファイルを Web ページに直接追加することもできます。
<img> タグと <object> タグを使用すると、SVG ファイルの読み込みに失敗した場合に代替画像を設定できます。 ユーザーは <embed> または <iframe> タグを使用して、SVG 画像ファイルを別のブロックに埋め込むことができます。
ただし、<iframe> の使用は Web ページの SEO に影響するためお勧めしませんが、ユーザーは代わりに <object> またはインライン <svg> を使用できます。
