SVG形式の画像ファイルを表示する
WebページでSVG形式の画像ファイルを表示するコードを紹介します。
概要
SVG画像の準備
今回は下図のSVG画像を表示します。今回SVG画像は Adobe Illustratorで作成します。
imgタグを利用して表示する
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タグを利用して表示する
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ページに表示できました。
著者
iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。
