ホーム>Web デザインのチュートリアル>HTMLチュートリアル

SVG 画像を HTML Web ページに導入する 4 つの方法

著者：Eve Cole 更新時間：2024-12-18 10:41:14

Web アプリケーション開発には SVG 画像を使用する方法が 4 つあります。

1. ページに直接挿入します。 2. imgタグの導入。 3.CSSの導入。 4. object タグが導入されます。

1. ページに直接挿入

HTML ページでは、svg タグを直接使用できます。

<!DOCTYPE html>
<html>
	<頭>
		<meta charset="utf-8">
		<タイトル></タイトル>
	</head>
	<本文>
		<!-- SVG 画像-->
		<svg width="200" height="150" style="border: 1px ソリッド スチールブルー">
			<!-- 中に長方形があります -->
			<rect x="10" y="10" width="100" height="60" fill="skyblue"></rect>
		</svg>
	</body>
</html>

操作効果：

1

2. imgタグの導入

Web ページに直接 svg タグを記述するだけでなく、jpeg や png 画像をインポートするのと同じように、img を介してタグをインポートすることもできます。

1) 新しい SVG 画像を作成する

次に、最初に新しい svg 画像ファイルを作成し、上記の Web ページに直接書き込まれた svg を使用する必要があります。

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="150">
	<rect x="10" y="10" width="100" height="60" fill="skyblue"></rect>
</svg>

ここの内容には 2 つの違いがあります。

1. 名前空間 xmlns 属性を宣言する必要があります。名前空間は、この記事の最後にある参考資料に記載されています。 2. 元々 svg タグに記述されていたスタイル、style="border: 1px Solid Steelblue" を削除しました。

コンテンツを test.svg ファイルに保存します。これはブラウザで開いてみることができます。

2) imgタグを使用してインポート

test.svg と Web ページ ファイルが同じディレクトリにあると仮定します。

<img src="test.svg" style="border: 1px ソリッド スチールブルー" />

jpeg や png の導入と同様に、src 属性で画像のパスを直接設定できるようになりました。さらに、元の svg スタイルを img タグに移動しました。

実行時の効果は上記と同じです。

2

インターネット上には多くの SVG 画像があります。https://www.iconfont.cn という優れたアイコン Web サイトを参照してください。

3

3.CSSの導入

CSS の導入では、画像を背景画像として導入します。

<style type="text/css">
	.svg {
		幅: 200ピクセル;
		高さ: 150ピクセル;
		境界線: 1px ソリッド スチールブルー;
		背景画像: url(test.svg) // 背景としてインポート }
</スタイル>
<div class="svg"></div>

4. オブジェクトの紹介

img のインポートと同様に、svg ファイルが必要で、それを属性データとともにインポートします。

<object data="test.svg" style="border: 1px ソリッド スチールブルー"></object>

ランニング効果は上記と似ていますが、マッピングはありません。

その他のタグ

embed タグや iframe タグなどの他のタグも導入できますが、その使用は推奨されません。詳細については、この記事の最後に記載されている参考文献を参照してください。

参考文献

名前空間: https://developer.mozilla.org/zh-CN/docs/Web/SVG/Namespaces_Crash_Course

埋め込みタグ: https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/embed

iframe タグ: https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies

HTML Web ページに svg 画像を導入する 4 つの方法に関するこの記事はこれで終わりです。HTML に svg 画像を導入する方法の詳細については、downcodes.com で以前の記事を検索するか、引き続き以下の関連記事を参照してください。将来的には downcodes.com をサポートします。

関連記事