ITコラム

ITコラム

2017.03.18

HTML 【ベクターグラフィクス】～ SVGとsvg要素

svg要素は、SVGをHTMLにインラインで埋め込むための要素です。
SVGは、GIFやJPEG等とは異なり、画像を拡大・縮小しても画質が劣化せずに綺麗に表示することができる画像です。
今回は、SVGを埋め込むためのsvg要素についてまとめたいと思います。

１．SVGとは

SVGとは Scalable Vector Graphics（スケーラブルベクターグラフィクス）の略で、２次元ベクター形式のためのXMLベースのマークアップ言語です。

SVGは、GIF・JPEG・PNGとは異なり、ベクター画像のため、画像を拡大・縮小しても画質が劣化せずに綺麗に表示することができます。PC画面でも、スマートフォンでも、変わらず表示させることができるので、レスポンシブデザインととても相性の良い形式です。

SVGは、画像ファイルですが、テキストエディタで開くと、中身を見ることができます。例えば、次のようなソース（中身）となっています。

<?xml version=”1.0″ encoding=”iso-8859-1″?>
<!– Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) –>
<!DOCTYPE svg PUBLIC “-//W3C//DTD SVG 1.1//EN” “http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd”>
<svg version=”1.1″ id=”Capa_1″ xmlns=”http://www.w3.org/2000/svg” xmlns:xlink=”http://www.w3.org/1999/xlink” x=”0px” y=”0px”
viewBox=”0 0 275.943 275.943″ style=”enable-background:new 0 0 275.943 275.943;” xml:space=”preserve”>
<path d=”M251.568,・・・,154.041z”/>
</svg>

Adobe Illustrator などのベクターグラフィックソフトを使用してベクター画像を作ると、自動的にマークアップ言語が生成されるので、上記のようなソース内容を理解する必要はありません。

SVGで書かれた画像は、拡張子.svgを付けてsvgファイルにできます。
ここでは、svg要素を使ってSVGをHTMLに埋め込む方法を紹介しますが、前述したsvgファイルを、他の画像ファイル（.jpgなど）のように、img要素やobject要素で HTMLに埋め込むこともできます。

<img src=”sample.svg” width=”50″ height=”50″>

<object data=”sample.svg” type=”image/svg+xml” width=”50″ height=”50″>
<img src=”sample.jpg” alt=”代替用JPG画像” width=”50″ height=”50″>
</object>

これらの方法に対して、svg要素でHTMLに埋め込む場合は、svgファイルを作るのではなく、svg要素内にSVGのコードを直接書いていきます。

▲目次へ戻る

２．svg要素

svg要素は、SVGをHTMLにインラインで埋め込むための要素です。

使用する要素　：　<svg> ～ </svg>

svg要素はインライン要素です。

svg要素の子要素として、g要素、rect要素、circle要素、path要素などがあり、これらは描画のために使用します。
また、svg要素の属性として、version属性、xmlns属性、viewBox属性などがあります。
ですが、これらは、ベクター画像を作成する際に、ベクターグラフィックソフト（Adobe Illustratorなど）が自動生成するソースコード内で使われるものなので、特に気にする必要はありません。

▲目次へ戻る

３．svg要素でSVGをHTMLに埋め込む

svg要素を使って、SVGをHTMLに埋め込む場合は、svg要素内にSVGのコードを直接書いていきます。

SVG（ベクター画像）の作成方法については、ここでは詳しく紹介しませんが、Adobe Illustratorなどのベクターグラフィックソフトで作成するか、画像変換ソフトで既存の画像ファイル（.jpgなど）をベクター画像に変換するか、ベクター画像ファイルを用意します。

用意したベクター画像ファイルを、テキストエディタで開くと、次のようなソースコードが表示されます。

<?xml version=”1.0″ encoding=”iso-8859-1″?>
<!– Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) –>
<!DOCTYPE svg PUBLIC “-//W3C//DTD SVG 1.1//EN” “http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd”>
<svg version=”1.1″ id=”Capa_1″ xmlns=”http://www.w3.org/2000/svg” xmlns:xlink=”http://www.w3.org/1999/xlink” x=”0px” y=”0px”
viewBox=”0 0 275.943 275.943″ style=”enable-background:new 0 0 275.943 275.943;” xml:space=”preserve”>
<path d=”M251.568,・・・,154.041z”/>
</svg>

このコード内の<svg> ～ </svg>の部分を丸ごとコピーします。
そして、HTML上のSVG画像を置きたい場所にペーストします。

<body>

<svg version=”1.1″ id=”Capa_1″ xmlns=”http://www.w3.org/2000/svg” xmlns:xlink=”http://www.w3.org/1999/xlink” x=”0px” y=”0px”
viewBox=”0 0 275.943 275.943″ style=”enable-background:new 0 0 275.943 275.943;” xml:space=”preserve”>
<path d=”M251.568,…..,154.041z”/>
</svg>

</body>

これで、埋め込み完了です。

▲目次へ戻る

４．svg要素の属性と子要素

SVGの中身のソースコードを書くことはないと思いますが、一応、svg要素の主な属性だけ一覧にまとめてみます。

version=”1.0″ または version=”1.1″
SVG文書の仕様を指定 svg要素にのみ使用するお約束的なもの 2017年3月現在、最新バージョンは1.1
xmlns=”http://www.w3.org/2000/svg”
XMLの名前空間宣言というもので、このXMLはSVGであることを明示するもの “http://www.w3.org/2000/svg”という値もお約束的なもの HTML5内で使う場合は、svg要素はSVGと決まっているので省略可能
width=”幅”、height=”高さ”
svg要素の幅と高さを指定単位（em ex px pt % など）をつけた数値で指定単位がない場合はピクセルとなるレスポンシブにしたい場合は、指定不要 CSSでサイズを指定する場合も、指定不要
viewBox=”min-x　min-y　width　height”
描画の範囲を指定して、親要素に合わせてストレッチする４つの数値（min-x、min-y、width、height）は、それぞれ半角スペースで区切る

　
次に、svg要素の子要素についても、主なものを一覧にまとめてみました。

g要素
オブジェクトをグループ化する要素グループ化したオブジェクトをまとめてスタイル指定（塗り、線、線幅など）することもできる fill属性（塗り）、stroke属性（線の色）、stroke-width属性（線幅）などを指定　　<g fill=”white” stroke=”blue” stroke-width=”5″> 　　<circle cx=”25″ cy=”25″ r=”15″ /> 　　<circle cx=”50″ cy=”25″ r=”15″ /> 　　<circle cx=”75″ cy=”25″ r=”15″ /> 　</g>
rectg要素
長方形を描く要素属性を使ってx軸の基点、y軸の基点、幅、高さ、塗りや線などを指定（rx属性・ry属性を使って角丸の四角形を描くことも可能）　　<rect width=”100″ height=”50″ fill=”pink” stroke=”green” stroke-width=”5″ />
circle要素
正円を描く要素 cx属性・cy属性で円の中心点の座標を、r属性で円の半径を指定　　<circle cx=”25″ cy=”75″ r=”20″/>
line要素
直線を描く要素始点のxy座標をx1属性・y1属性で、終点のxy座標をx2属性・y2属性で指定　　　<line x1=”10″ x2=”50″ y1=”110″ y2=”150″/>
path要素
あらゆる図形と、ベジェ曲線も描ける要素 d属性で１つのオブジェクトを作り、その中でMやLなどのコマンドを使用 Mは「Move to」、Lは「Line To」、Hは水平線、Vは垂直線、などのコマンドがあり、それぞれポイントのxy座標を指定（ベジェ曲線の場合は制御点の座標も指定）　　　<path d=”M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80″ stroke=”black” fill=”white”/>
text要素
SVG画像の中にテキストを表示する要素 font-size属性でサイズ、font-weight属性で太さ、text-anchor属性で基点（x、yで指定した点）からどの方向に流すか、など細かく指定できる　　　<text x=”0″ y=”30″ font-size=”30″ font-weight=”bold” fill=”blue”> 　　TEXT 　</text>