WebページでSVG形式の画像ファイルを表示するコードを紹介します。
今回は下図のSVG画像を表示します。今回SVG画像は Adobe Illustratorで作成します。
imgタグを利用してSVG画像を表示する例を紹介します。
下記のHTMLファイルを作成します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<p>SVGの画像です。</p>
<img src="logo.svg" width="128"/>
</body>
</html>
imgタグのsrcにSVGの画像ファイルを指定します。jpegファイルやpngdファイルなどの通常の画像ファイルの表示と同じタグの記述になります。
上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。
もう一方の画像でも動作確認します。下記のHTMLファイルを作成します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<p>SVGの画像です。</p>
<img src="image.svg" style="width:240px"/>
</body>
</html>
上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。
objectタグを利用してSVG画像を表示する例を紹介します。
下記のHTMLファイルを作成します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<p>ObjectタグでSVGの画像を表示します。</p>
<object type="image/svg+xml" data="logo.svg" width="192"></object>
</body>
</html>
下記のobjectタグが画像を表示するコードになります。
<object type="image/svg+xml" data="logo.svg" width="192"></object>
上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。
もう一方の画像でも動作確認します。下記のHTMLファイルを作成します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<p>ObjectタグでSVGの画像を表示します。</p>
<object type="image/svg+xml" data="image.svg" style="width:8rem;"></object>
</body>
</html>
上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。
SVG形式の画像ファイルをHTMLページに表示できました。
