[70-1] svg要素でベクターグラフィクスを埋め込もう

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

SVGとは Scalable Vector Graphics（スケーラブル ベクター グラフィクス）の略で、2次元ベクター形式のための XMLベースのマークアップ言語です。
で、そのSVGを 今回<svg>要素でHTMLに埋め込もうってわけです。

ここまで読んで「うぇ〜、また別のマークアップ？」と思ったアナタ。大丈夫。安心して（笑）
SVGのマークアップなんて覚えなくても、Adobe Illustrator などのベクターグラフィックソフトで描きゃイイんです。それを SVGとして書き出してコピペするだけ。簡単に使えます。

本日のINDEX

1. SVGは拡大してもキレイ
2. SVGのHTMLへの埋め込み方いろいろ
3. Illustratorで描いて<svg>要素で埋め込む（サンプルあり）
   1. Illustrator側の設定
   2. Illustratorでの描画時の注意
   3. 別名保存でsvgを書き出す
   4. HTMLに埋め込む
4. SVG要素の属性と関連要素
   1. SVG要素の主な「属性」
   2. SVG要素の主な「子要素」

今回のサンプルはこちら。HTMLを上下に色分けし、境目にSVG画像を配置しました。
（クリックでサンプルページが別ウィンドウで開きます）

★時系列では CSSをやってる最中ですが、最近良く使う HTMLの <svg>要素について書いておこうと思います。（ CSSについて続けて読んでいた方は、ややこしくてゴメン。CSSのインデックスで読みたい記事を探してね）

今回使用する要素	<svg> 〜 </svg>

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

<svg>要素の子要素として <g> <rect> <circle> <path>要素などがあり、これらは描画のための要素です。
また、<svg>要素の属性も「version属性」「xmlns属性」「viewBox属性」などあります。
が、これらは Adobe Illustrator が自動で書き出してくれるので、今回詳しく触れず、記事の最後の方にメモ的にまとめておきました。

SVGは拡大してもキレイ

SVGは ベクター画像フォーマットなので、拡大しても粗くならず、高解像度ディスプレイでもキレイです。

ベクター画像フォーマットは数学的な描画。座標上の点と点を 直線や曲線で結んで描画します。だから拡大縮小しても画像が粗くならないんです。
これがベクター画像（50×50pxの SVGファイルをimg要素で貼っています）

3倍に拡大（150×150px）するとこんなかんじ。

対してラスター画像（ビットマップ）はドットの集合で描きます。Photoshopなどで扱うアレ。
拡大すると、ドットそのものも大きくなって画像が粗く見えます。また、解像度が低いと高解像度ディスプレイで粗く見えます。
これがラスター画像（72dpiで50×50pxの PNGファイルをimg要素で貼っています）

3倍に拡大。（150×150px ...ってことは24dpiね）

ってことで、ラスター画像（ビットマップ）は解像度（ドットの細かさ）によってキレイさ（鮮明度）が変わるけど、ベクター画像は解像度が関係ないってことですね。

ただし、写真などの複雑な色合いの画像には、ベクターよりラスターのほうが向いています。ベクターで写真を再現してたら、すごく長いコード（微細な四角をいっぱい書くとして）だし時間の無駄やね。

SVGのHTMLへの埋め込み方いろいろ

上の例でも使ったけど、SVGで書かれた文書は拡張子「.svg」を付けて「svgファイル」にできます。この svgファイルは、ほかの画像ファイル（jpeg や pngなど）のように　<img>要素や <object>要素で HTMLに埋め込めます。

<img>要素でHTMLに埋め込む

pngやjpgファイルと同じように扱えます。

<img src="image/flower.svg" width="50" height="50">

<object>要素でHTMLに埋め込む

<object>要素では、data属性でファイルを、type属性でファイルのMIMEタイプを指定します。

<object data="image/flower.svg" type="image/svg+xml" width="50" height="50">
<img src="image/flower.png" alt="代替えPNG画像" width="50" height="50">
</object>

<object>要素については [62] 外部コンテンツを組み込もう <object> <param> をご覧ください。

<iframe>要素でHTMLに埋め込む

<iframe>要素でも埋め込むことができます。
ここではフレームの枠（デフォルトスタイル）を CSSの「border: none」で取っています。

<iframe src="image/flower.svg" width="50" height="50" style="border: none"></iframe>

<iframe>要素については [63] インライン・フレームで 他のHTMLファイルを組み込もう <iframe> をご覧ください。

CSSの background-image にも使えます

SVGファイルは、要素の背景画像としてCSSで指定することもできます。

<div style="width:50px; height:50px; background:url(image/flower.svg) no-repeat"> </div>

<svg>要素でHTMLに埋め込む

今回はこの方法をやってみます。これは svgファイルを作るんじゃなくて、SVGのコードをジカに<svg>要素内に書いて埋め込む方法。

Illustratorで描いて<svg>要素で埋め込む

それじゃ、やっと（笑）本題の <svg>要素を使ってみましょう。

今回のサンプルはこちらです。（クリックでサンプルページが別ウィンドウで開きます）

HTMLを上下に色分けし、境目にSVGによるグラフィックを配置しました。
PCで見ている方は、サンプルのウィンドウサイズを変えてみてください。SVG画像がウィンドウ幅に追随して拡大縮小しますが、画質は粗くなりません。

Illustrator で、こんな↓グラフィックを作っていきます。

その前に、やっといたほうがいい準備があります↓

Illustrator側の設定

Illustrator上で描画する前に、単位を「ピクセル」に、カラーモードを「RGB」にします。

まず「環境設定」＞「単位」で単位を全部ピクセルに。
テキストを使わないんだったら「文字」と「日本語オプション」は触らなくていいけど。

「環境設定」＞「一般」で「キー入力」などを整数+ピクセルに。
整数にするのは、SVGのコードをなるべく複雑にしないためです。

テキストを使うなら「環境設定」＞「テキスト」でも整数+ピクセルに設定します。

で、新規ファイルを作ります。
「ファイル」＞「新規...」で「新規ドキュメント」ダイアログを開くと、アートボードの「単位」が「ピクセル」になってますね。さっき指定したから。
さらに下の方の「詳細」で、「カラーモード」を「RGB」に、プレビューを「ピクセル」に、そして「新規オブジェクトをピクセルグリッドに整合」にチェックを入れておきます。

カラーモードをRGBにするのは、HTML上の色指定と合わせるため。
また、「新規オブジェクトをピクセルグリッドに整合」にしておけば、描画時にアンカーポイントの座標を整数にしやすくなります。（別に小数点以下の数値になっちゃいけないわけじゃないけどね）

開いた新規ファイルは、拡大すると1ピクセルごとのグリッドがついてます。さっき「プレビューモード」を「ピクセル」にしたから。

描画するときはこのグリッドがあるとけっこう便利。
邪魔なときには、「表示」＞「ピクセルプレビュー」のチェックを外せば解除できます。

カラーモードも後から変えられます。
「ファイル」＞「ドキュメントのカラーモード」＞「RGBカラー」にすればOK。

Illustratorでの描画時の注意

描画中は、アンカーポイントをなるべく「整数+ピクセル」の位置になるようにします。
「変形」ウィンドウでアンカーポイントの数値を確認しながら描画します。

特に四角形のオブジェクトなら、かっちり整数にしたほうが、輪郭がくっきりするし、SVGデータも複雑にならない。HTML上に配置したときにも変な隙間ができません。

新規作成時に「新規オブジェクトをピクセルグリッドに整合」にしていれば、変な小数値にはなりませんけどね。
ちなみに、小数のピクセルだとダメってわけじゃないです。なるべく整数にしたほうが、SVGのコードが長くならないってだけのこと。小数点以下の数値でも SVGはちゃんと表示されます。

さて、サンプルでは、3つのオブジェクトを作って色分けしています。
まずベージュの長方形を一番下に置いています。
真ん中のオブジェクト（薄いベージュ）からは上部だけ曲線になったものをずらして配置。これは「白の透明度50％」にしています。このように「透明度」も使えます。

3つのオブジェクトは、下図のようにレイヤーを3つに分けて、それぞれ名前を付けています。
こうすると、SVGに書き出した時にレイヤーごとにグループ化してくれるので、あとで編集（色や透明度などの）しやすくなります。

描画が終わったら、アートボードをグラフィックのサイズぴったりにあわせておきます。
「オブジェクト」＞「アートボード」＞「オブジェクト全体に合わせる」で一発完了。

こんなかんじで、不要な余白が無くなります。

別名保存でsvgを書き出す

いよいよSVGに書き出します。
「ファイル」＞「別名で保存」で、ファイル形式を「SVG」にして「保存」をクリック。

次に開いたダイアログで、SVGオプションを指定します。
下図は Illustrator CS6 の画面です。
CCでは「レスポンシブ」チェックボックスがあり、チェックすると「width、height属性」が指定されません。（CS6以下でレスポンシブにしたい場合は、後で手動でSVGのコードから「width、height属性」を削除すればOK）

このまま「OK」を押せば SVGファイル「◯◯◯◯.svg」として保存されます。
「SVGコード...」をクリックすると、別アプリでSVGコードそのものが開きます。今回はそっちを使います。

HTMLに埋め込む

これが開いたSVGのコード。ふーん、SVGってこんなんなってるんだ〜。
ちなみに「保存」をクリックしてできた svgファイルを、テキストエディタなどで開いても、同じコードが現れます。

このコードの <svg>〜</svg> の部分をごそっとコピーします。

あとは、HTML上の SVG画像を置きたいところにペーストするだけ。簡単ですね！

下のHTMLソースコードでは 6〜20行目の部分がペーストしたSVG。（コピー元にあった「width、height属性」を手動で削除しています。今回はレスポンシブにしたいので。そして Illustrator CS6 だったからw）

サンプルのHTML抜粋です。

<body> <!-- ←bodyの背景は白 -->
<div id="wrap_upper"> <!-- ←背景ベージュに指定 -->
  <!--略-->
</div>

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px" viewBox="0 0 900 102" enable-background="new 0 0 900 102" xml:space="preserve">
<g id="under">
  <rect fill="#E6DAD8" width="900" height="95"/>
</g>
<g id="middle">
  <path opacity="0.5" fill="#FFFFFF"
  d="M0,61.627C0,61.627,99.72,30,168,30c133,0,217.973,43,384,43c120,0,196-95,347-58v79H0
		L0,61.627z"/>
</g>
<g id="upper">
  <path fill="#FFFFFF"
  d="M0,91c0,0,78.854-55.608,228-58c124.731-2,178.84,47.12,345,43c121-3,190.849-77,327-62v88H0V91z"/>
</g>
</svg>

<section>
<!--略-->
</section>

</body>

SVG部分を読んでみると、<g>要素の idに Illustratorでのレイヤー名が使われていますね。ということは<g>要素の「g」はグループってことかな。

SVGでは、下になる画像から順に書かれるんですね。レイヤー名の under（下）、middle（真ん中）、upper（上）の順に書かれています。

真ん中の <g id="middle"> は「opacity="0.5"」で透明度が表現されてますね。
塗りつぶしは「fill」なんですね。canvasと同じですね。

矩形が「rect」だったり、パスが「path」だったり、なんとなく読んでるとわかりますね。
で、<path>要素の d属性でベジェ曲線の指定をしているようです。これは手書きでは大変そう。やっぱイラレを使うほうがいいね。

というわけで、このあとレスポンシブのためのCSS指定（svg要素の幅を親要素に対して100％にする）をしたら今回のサンプルファイルはできあがりです。Illustrator を使えば、SVGコードの書き方を覚えなくても簡単に使えますね。
CSSの要点も書いておきます。

body {background: #fff} /*←bodyの背景は白*/
div#wrap_upper {background: #e6dad8} /*←画面上部のdivの背景をベージュにしました*/
svg {
	width:100%;
    height:auto}
    /*↑svg要素のサイズを指定（サンプルではウィンドウサイズに追随するようにしています）*/

SVG要素の属性と関連要素

やっぱり少しは知っておいたほうがいいかな？（笑）と思い、
<svg>要素の属性や、関連要素についてざっと調べたのでメモっておきます。

ここで Illustratorを使わずに、手動でSVGのコードを書いてみました。
（丸とか四角とかテキストなら簡単ですから手動でもイケましたw）

<svg version="1.1" width="200" height="200">
  <rect width="100%" height="100%" fill="#f3bcbc" />
  <circle cx="100" cy="100" r="90" fill="#3bcfbc" />
  <text x="100" y="115" font-size="30" text-anchor="middle" fill="white">ほんっとに</text>
</svg>

プレビューはこちら。

<svg>要素の主な「属性」

で、<svg>要素の主な「属性」について調べてみました。

<svg>要素の主な「属性」と値		概要
version	1.0 または 1.1	SVG文書の「仕様」を指定。 <svg>要素にのみ使います。 これはレンダリングや処理に影響を与えないんだそうで、 とりあえず「お約束」として書いておくものみたい。 今の最新バージョンは1.1だそうで、version="1.1" でOK。
xmlns	名前空間宣言	XMLの「名前空間（ns = namespace）」を宣言するもの。 <svg xmlns="http://www.w3.org/2000/svg"> と書けば、これはsvgという名前空間だよと明示するそうです。 ただし、HTML5文書内に直接書くなら「svg要素はsvg」と決まっているので、xmlns="http://www.w3.org/2000/svg" は省略してもOKなんだそうです。
width height	単位を付けた数値 単位を省略するとピクセル	svg要素の幅と高さ。 単位（em ex px pt % など）をつけた数値か、単位なしで。 単位なしならピクセルになります。 レスポンシブにしたいなら不要。CSSでサイズを指定する場合も不要。
viewBox	半角スペース区切りで 数値を4つ	描画の範囲を指定して、親要素に合わせてストレッチするようにする属性だそうです。 4つの数値は「min-x、min-y、width、height」 例えば幅300px、高さ150pxのグラフィックを、デフォの基点（x軸0、y軸0）で指定するなら「viewBox="0 0 300 150"」

Illustrator（CS6）で SVGを出力したら「xml:space属性」も書き出されました。
これは「空白（半角スペースなどの）」をどう処理するかを指定する属性で、値は「default」（デフォルト）または「preserve」（空白をそのまま保持）だそうですが、今はもう XMLの仕様では使わない属性なんだそうです。
Illustratorからは他にもいろいろ出力されたけど、不要なものも多いみたいですね。

svg要素には最低限 version="1.1" を書いておけば良さそう。
HTML5文書内で使うなら xmlns="http://www.w3.org/2000/svg" は省略可能。（XHTMLでは必須）
そのほかは必要に合わせて width、height、viewBox を指定してあげれば良さそうです。

<svg>要素の主な「子要素」

次に、<svg>要素の「子要素」についても 主なものを調べてみました。

サンプルコードも書いてみましたが、ここで注意点がありました。
終了タグがない要素の最後の「/（スラッシュ）」は必須です。
例えば <circle cx="25" cy="25" r="15" /> の最後の「>」直前の「/」が無いと描画しません。
これはXMLのお約束（SVGはXMLベース）なので。XMLベースの「XHTML」をやったことがある人は「ああアレね」ってわかると思うけど。（<br />とか書いたよね）
例え HTML5 内で書いたとしてもSVGにはこのXMLのルールがイキているってことです。

<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> 【プレビュー】 Illustratorのレイヤーは、この <g>要素として出力され、レイヤー名が <g>要素の id名になります。
rect	長方形を描く要素。x軸の基点、y軸の基点、幅、高さ、塗りや線の指定を「属性」を使って描画します。 【サンプルソース】 <rect width="100" height="50" fill="pink" stroke="green" stroke-width="5" /> 【プレビュー】 rx属性・ry属性を使って「角丸」の四角形を描くこともできます（例えば、rx="10" ry="10" で半径10pxの角丸）
circle	正円を描く。cx属性・cy属性で円の中心点の座標を、r属性で円の半径を指定します。 【サンプルソース】 <circle cx="25" cy="75" r="20"/>
ellipse	楕円を描く。長半径、短半径を rx属性・ry属性で指定します。 【サンプルソース】 <ellipse cx="75" cy="75" rx="20" ry="5"/>
polygon	折れ線で囲まれた図形（ポリゴン）を描く。各ポイントを point属性でつないで指定。x y, x y, x y .....と座標を書いていきます。 【サンプルソース】 <polygon points="200 250,400 100,300 50,0 0"/>
line	直線を描く。始点のxy座標を x1属性・y1属性で、終点のxy座標を x2属性・y2属性で指定します。 【サンプルソース】 <line x1="10" x2="50" y1="110" y2="150"/>
polyline	連結された直線を描く（ポリゴンの閉じてないやつ） 各ポイントを point属性でつないで指定。x y, x y, x y .....と座標を書いていきます。 【サンプルソース】 <polyline points="60 110, 65 120, 70 115, 75 130, 80 125, 85 140"/>
path	上記の図形ぜんぶと、ベジェ曲線も描ける要素です。 d属性で1つのオブジェクトを作り、その中で「M」「L」などのコマンドが使えます。 Mは「Move to」、Lは「Line To」、Hは水平線、Vは垂直線、Zは「Close Path」閉じた図形になります。Cは三次ベジェ曲線、Sは複数の三次ベジェ曲線をつないだもの、などのコマンドがあり、それぞれポイントのxy座標を指定します（ベジェ曲線の場合は制御点の座標も） 【サンプルソース】 <path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke="black" fill="white"/> 【プレビュー】
defs	「グラデーション」や「パターン」「フィルタ」などを使うとき、その指定を定義するために使う要素です。 【サンプルソース】 <defs> <linearGradient id="Gra1"> <stop offset="10%" stop-color="silver" /> <stop offset="90%" stop-color="pink" /> </linearGradient> </defs> <rect x="0" y="10" width="200" height="30" fill="url(#Gra1)" /> 【プレビュー】
linearGradient radialGradient	グラデーションを描く要素です。 線形グラデは <linearGradient>要素、円形グラデは <radialGradient>要素です。 子要素の <stop>要素の「offset属性」で色の切り替えポイント、「stop-color属性」で色を指定します。 <defs>要素内で定義をしておき、オブジェクトの塗りや線に使いますので、グラデーションを呼び出すために必ず id名をつけておかなきゃです。 【サンプルソース】 <defs> <linearGradient id="Gra1"> <stop offset="10%" stop-color="silver" /> <stop offset="90%" stop-color="pink" /> </linearGradient> </defs> <rect x="0" y="10" width="200" height="30" fill="url(#Gra1)" />
pattern	パターンを描く要素です。 グラデーションと同じように <defs>要素内で定義をして、オブジェクトの塗りや線に id名で呼び出して使います。 【サンプルソース】 <defs> <pattern id="Pattern" x="0" y="0" width=".2" height=".2"> <rect x="0" y="0" width="20" height="20" fill="skyblue"/> <circle cx="10" cy="10" r="5" fill="white" opacity="0.5"/> </pattern> </defs> <rect fill="url(#Pattern)" x="0" y="0" width="100" height="100"/> 【プレビュー】
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> 【プレビュー】 <tref>要素で、一度指定したテキストを呼び出すこともできます。この場合<text>要素に idを付けておきます。
clipPath	切抜き用パスを作るための要素です。 【サンプルソース】 <defs> <clipPath> <polygon points="200 250,400 100,300 50,0 0"></polygon> </clipPath> </defs>

この他にもたくさん関連要素はありますが、ここでは主要なものだけピックアップしました。
各要素で「transform属性」を使って変形（移動・回転・傾斜・拡大縮小）したり、さまざまな操作ができるようです。SVGでフィルターを作ってぼかしたりもできるんだって。

今回こちらのMozillaのサイトを参考にしました。もっと詳しく知りたい方は見てみてください。
MDN（Mozilla Developer Network）｜SVG チュートリアル
MDN（Mozilla Developer Network）｜SVG 要素リファレンス
MDN（Mozilla Developer Network）｜SVG 属性リファレンス

次回予告

せっかくSVGを使うのだから、応用で「SVGフィルター」や「モーフィングアニメーション」など、いろいろ試してみようと思います。
ってことで次回は「SVGフィルター」を作ってみます。