SVG1.1 の基本図形のメモ
SVG1.1 の基本図形のメモ
昨今のレスポンシブ時代に見直されている SVG ファイルの基本的な図形描画を試したので、それについてのメモです。
簡単な概要
SVG1.1（第2版）仕様書（有志者の日本語訳）
http:// http://www.hcn.zaq.ne.jp/___/SVG11-2nd/intro.html#AboutSVG
からの引用です。
SVG は二次元グラフィックスを XML [XML10【訳】] で記述するための言語である。 SVG は3種類のグラフィックスオブジェクト：ベクター形式のグラフィック（例えば直線と曲線からなるパス）, 画像, テキストを扱う。 オブジェクトはグループにまとめたり, スタイルを付けたり, 変換を加えたり, すでに描画されたオブジェクトに合成することができる。 SVG の特色機能には、変換の入れ子, クリッピングパス, アルファマスク, フィルタ効果, ひな型オブジェクトも含まれる。
端的にいうと、Illustratorで扱えるような点と線からなるベクター画像です。
対応環境
CanIuse で調べたところ、IE に若干制限があるようですが、ほぼすべてのブラウザで対応してそうです。
Can I use... Support tables for HTML5, CSS3, etc
SVG ファイルの読み込み
SVG ファイルの読み込み方法はいくつかあります。
-
svg タグの記述をhtml ファイルに埋め込む（インライン）
-
<img src=".svg"><objet type="image/svg+xml" data=".svg"></object>やCSS のbackground-image: url(.svg)などで読み込むことができます。(外部ファイル)
基本図形
四角形(rect)
rect タグで四角形を描画できます。代表的なプロパティは以下です。
| プロパティ名 | 詳細 |
|---|---|
| x="" y="" | (x, y)の位置から描画。指定しないと(0, 0)。 |
| fill | 塗りつぶし色 |
| stroke | 線の色 |
| stroke-width | 線の幅 |
| stroke-dasharray | 点線。"実線の間隔, 空白の間隔"で指定。 |
サンプル
コード
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xl="http://www.w3.org/1999/xlink" version="1.1" width="320" height="240">
<rect width="100%" height="100%" fill="#e33"></rect>
<!-- stoke:線色 storke-width:線幅 -->
<rect width="50%" height="50%" fill="#3e3" stroke="white" stroke-width="5"></rect>
<!-- 点線 stoke-dasharray="実線間隔、空白間隔" -->
<rect width="25%" height="25%" fill="green" stroke="#333" stroke-width="10" stroke-dasharray="20, 5"></rect>
</svg>
表示範囲(viewport と viewbox)
本来、ベクター画像は大きさを持たない。しかし、html で表示する際に都合が悪いので、viewport, viewbox の概念がある。
viewport の大きさは基本変わらず、viewbox で指定した範囲をviewport に反映させるように描画を行う。
viewport は、width="", height="" で指定する。
viewbox の範囲指定は、viewbox="開始点x y width height" である。
以下、サンプル。
サンプル
viewport: width="300" height="200" viewbox="0 0 300 200"
width="300" height="200" viewbox="0 0 225 150"
上と比べて下は、viewbox で緑の多い一部の範囲を指定したため、緑の領域が拡大されたように見える。
コード
<div>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xl="http://www.w3.org/1999/xlink" version="1.1" width="300" height="200" viewbox="0 0 300 200">
<rect width="300" height="200" fill="#e33"></rect>
<rect width="150" height="100" fill="#3e3"></rect>
</svg>
<p>viewport: width="300" height="200" viewbox="0 0 300 200"</p>
</div>
<div>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xl="http://www.w3.org/1999/xlink" version="1.1" width="300" height="200" viewbox="0 0 225 150">
<rect width="300" height="200" fill="#e33"></rect>
<rect width="150" height="100" fill="#3e3"></rect>
</svg>
<p>width="300" height="200" viewbox="0 0 225 150"</p>
</div>
直線(line)
line タグで直線を描画できる。
x1="", y1="" で始点、x2="" y2="" で終点を指定して直線を引く。
また、stroke-linecap でCanvas のように始端、終端の形状を変更することが可能。
詳細：http://www.hcn.zaq.ne.jp/___/SVG11-2nd/painting.html#StrokeLinecapProperty
サンプル
コード
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xl="http://www.w3.org/1999/xlink" version="1.1" width="300" height="200" viewbox="0 0 300 200">
<!-- 直線 -->
<line x1="50" y1="50" x2="180" y2="50" stroke-width="10" stroke="black"></line>
<line x1="50" y1="100" x2="180" y2="100" stroke-width="10" stroke="black" stroke-linecap="round"></line>
<line x1="50" y1="150" x2="180" y2="150" stroke-width="10" stroke="black" stroke-linecap="squeare"></line>
</svg>
円(circle)
circle タグで円を描画。
cx="" cy="" で円の中心を指定。r="" で半径を指定。
サンプル
コード
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xl="http://www.w3.org/1999/xlink" version="1.1" width="300" height="200" viewbox="0 0 300 200">
<!-- 円 中心:cx, cy 半径:r -->
<circle cx="150" cy="100" r="40" fill="#33e"></circle>
</svg>
楕円(ellipse)
ellipse タグで楕円を描画。
中心の指定は、circle と同じ。
rx="" ry="" で、楕円のx軸の半径、y字句の半径を指定。
サンプル
コード
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xl="http://www.w3.org/1999/xlink" version="1.1" width="300" height="200" viewbox="0 0 300 200">
<!-- 楕円 -->
<ellipse cx="150" cy="100" rx="80" ry="40" fill="#3e3"></ellipse>
</svg>
文字列(text)
text タグで文字列を記述できる。
CSS と同じ要領で、font-size="" font-family="" を指定することができる。
また、rotate="" で文字列を回転することも出来る。
サンプル
コード
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xl="http://www.w3.org/1999/xlink" version="1.1" width="300" height="200" viewbox="0 0 300 200">
<!-- テキスト -->
<text x="20" y="50" font-size="48" fill="white" stroke="black" stroke-width="2" font-family="Helvetica, Arrial, san-serif">
SVG フォント
</text>
<!-- rotate 傾き -->
<text x="20" y="150" font-size="48" fill="white" stroke="black" stroke-width="2" font-family="Helvetica, Arrial, san-serif" rotate="20">
SVG フォント
</text>
</svg>
折れ線(polyline)
polyline で直線の組み合わせを引くことができる。
points="x0 y0 x1 y1 x2 y2 ・・・ xn yn" で各点を結ぶ直線を引ける。
サンプル
コード
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xl="http://www.w3.org/1999/xlink" version="1.1" width="300" height="200" viewbox="0 0 300 200">
<polyline points="100 50 150 100 50 100" stroke="black" fill="none"></polyline>
</svg>
多角形(polygon)
polygon タグで多角形を描画。polyline の始点と終点を結んだを描画する。
サンプル
コード
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xl="http://www.w3.org/1999/xlink" version="1.1" width="300" height="200" viewbox="0 0 300 200">
<polyline points="100 50 150 100 50 100" stroke="black" fill="none"></polyline>
</svg>
パス(path)
path タグは、直線や曲線などのコマンドを組み合わせて、より複雑な図形を描画できる。
d="コマンド1指定値1 コマンド2指定値2 ・・"といった使い方をする。 コマンドの大文字は絶対座標で、小文字は相対座標の指定となる。
代表的なコマンドを以下に。
| コマンド記号 | 指定方法 |
|---|---|
| 移動 m M | x0,y0(座標) |
| 直線 l L | x0,y0 x1,y1 ・・・ xn,yn と頂点を指定。Zでパスを閉じられる。 |
| 水平線 h H | x0(X座標) |
| 垂直線 v V | y0(Y座標) |
| 二次ベジエ曲線 q Q | cx1,cy1(制御点) x1,y1(頂点) cx2,cy2 x2,y2 ・・・ |
| 二次ベジエ曲線(制御点は前の曲線から自動計算) t T | x1,y1(頂点) x2,y2 ・・・ |
| 三次ベジエ曲線 c C | cx11,cy11(制御点1) cx21,cy21(制御点2) x1,y1(頂点) ・・・ |
| 三次ベジエ曲線(制御点1は前の曲線から自動計算) s S | cx21,cy21(制御点2) x1,y1(頂点) ・・・ |
| 円弧 a A | rx(水平方向半径),ry(垂直方向半径) x-axis-rotation(回転角) large-arc-flag(0:長弧 1:短弧) sweep-flag(0:反時計回り 1:時計回り) x,y(終点) |
サンプル
コード
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xl="http://www.w3.org/1999/xlink" version="1.1" width="300" height="200" viewbox="0 0 300 200">
<path d="M 50,50
l 50,50
h 50
v 50
h 50" stroke="black" fill="none">
</path>
<path d="M 100,50
c 0,40 80,-40 80,0 0,40 -80,-40 -80,0" stroke="black" fill="none">
</path>
</svg>
