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ブラウザで表示します。下図の画面が表示されます。
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ブラウザで表示します。下図の画面が表示されます。
svgタグを利用して画像のベクタデータを埋め込んで表示する
SVG画像の準備
シンプルなSVG画像として下図のSVG画像を準備します。SVG画像は Adobe Illustratorで作成します。
SVG形式で保存した画像のデータは下記になります。
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" viewBox="0 0 205.3 205" style="enable-background:new 0 0 205.3 205;" xml:space="preserve">
<style type="text/css">
.st0{fill:#488EFF;}
.st1{fill:#FFFFFF;}
</style>
<g>
<rect x="21.5" y="21.8" class="st0" width="162" height="162"/>
<path d="M183,22.3v161H22v-161H183 M184,21.3H21v163h163V21.3L184,21.3z"/>
</g>
<g>
<circle class="st1" cx="103" cy="102.3" r="64.5"/>
<path d="M103,38.3c35.3,0,64,28.7,64,64s-28.7,64-64,64s-64-28.7-64-64S67.7,38.3,103,38.3 M103,37.3c-35.9,0-65,29.1-65,65
s29.1,65,65,65s65-29.1,65-65S138.9,37.3,103,37.3L103,37.3z"/>
</g>
</svg>
コード
下記のHTMLファイルを作成します。
先のSVGファイルのsvgタグの部分をHTMLファイル内に記述します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<p>SVG画像を埋め込みで表示します。</p>
<svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 205.3 205" style="enable-background:new 0 0 205.3 205;" xml:space="preserve">
<style type="text/css">
.st0 {
fill: #488EFF;
}
.st1 {
fill: #FFFFFF;
}
</style>
<g>
<rect x="21.5" y="21.8" class="st0" width="162" height="162" />
<path d="M183,22.3v161H22v-161H183 M184,21.3H21v163h163V21.3L184,21.3z" />
</g>
<g>
<circle class="st1" cx="103" cy="102.3" r="64.5" />
<path d="M103,38.3c35.3,0,64,28.7,64,64s-28.7,64-64,64s-64-28.7-64-64S67.7,38.3,103,38.3 M103,37.3c-35.9,0-65,29.1-65,65
s29.1,65,65,65s65-29.1,65-65S138.9,37.3,103,37.3L103,37.3z" />
</g>
</svg>
</body>
</html>
表示結果
上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。HTML中に埋め込まれたSVG形式のベクタ画像が表示できていることが確認できます。
著者
iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。
最終更新日: 2018-01-16
作成日: 2017-04-10
