[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タイプを指定します。

代替えPNG画像
<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)

<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の「名前空間宣言」というもので、このXMLはSVGだよと明示するためのものだそうです。そこで、
xmlns="http://www.w3.org/2000/svg"
を書いておくのも「お約束」みたい。
ただし、HTML5文書内で使うなら「svg要素はSVG」と決まっているのでこれは省略できるそうです。
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>
【プレビュー】
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フィルター」を作ってみます。

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、XSERVER(エックスサーバー)だと思う。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
05 | 2017/06 | 07
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.