SVG - bambooflow Note

SVG

SVGとは

SVG（Scalable Vector Graphics）は、XMLによって記述されたベクターグラフィック言語である。
W3Cでオープン標準として勧告している。

最近のブラウザでは、SVGが普通に表示できるようになってきたので、今後扱う機会も多くなってくるフォーマットと思われる。

XMLで記述されるためスクリプト処理が容易に可能。

はじめの一歩

まずは、四角形を表示。

<?xml version="1.0" standalone="yes"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect x="50" y="50" width="100" height="100" fill="red"></rect>
</svg>
 

適当にtest.svgと名前を付けて保存。
ブラウザで表示してみる。（例えばChromeブラウザにドラッグ＆ドロップ）
すると以下のように表示される。

SVG文書<svg>

SVG文書を表す。
一回だけ登場する。

記述方法は次のとおり。

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg">
<!--ここにいろいろ書く-->
</svg>
 

SVG文書はXML文書であるので、XML宣言を行う必要がある。

<?xml version="1.0"?>

<svg>属性

属性	説明	使い方
viewBox	視界範囲の設定	<svg viewBox="0 0 200 100">
preserveAspectRatio	アスペクト比固定	<svg preserveAspectRatio="none">
width	ウィンドウの幅指定
height	ウィンドウの高さ指定

• viewBox

視界範囲を指定

viewBox="x y w h"
x　：　表示エリアのx座標原点の位置
y　：　表示エリアのy座標原点の位置
w　：　svg画像の表示幅
h　：　svg画像の表示高さ

単位はpx

• preserveAspectRatio

xMinYMin	要素の viewBox のＸの中央値をビューポートのＸの最小値に揃える 要素の viewBox のＹの中央値をビューポートのＹの最小値に揃える
xMidyMid	要素の viewBox のＸの中央値をビューポートのＸの中央値に揃える 要素の viewBox のＹの中央値をビューポートのＹの中央値に揃える (デフォルト)
xMaxYMax	要素の viewBox のＸの中央値をビューポートのＸの最大値に揃える 要素の viewBox のＹの中央値をビューポートのＹの最大値に揃える
none	均等な伸縮を強制しない

meet:縦横比は維持された状態で、全体がviewBoxに見えるよう、できるだけ伸長して表示
slice:縦横比は維持された状態で、全体がviewBoxに覆われるよう、できるだけ縮小して表示

例)

<svg width="300" height="300" viewBox="10 10 300 300">
    <rect x="0" y="0" width="100" height="100" />
</svg>
 

原点をx軸に10px、y軸に10px移動して、横100px、縦100pxの四角が描画される。

• http://www.hcn.zaq.ne.jp/___/SVG11-2nd/coords.html

タイトル<title>

SVG文書にタイトルをつける。

説明<desc>

SVG文書に説明やコメントをつける。

グループ化<g>

要素を結びつけて、グループ化する。
オブジェクトやレイヤーのまとめや構造化などに使われる。
id属性やtransform属性と組み合わせることが多い。

図形

線<line>

<line x1="始点のx座標" y1="始点のy座標" x2="終点のx座標" y2="終点のy座標"/>
 

四角形<rect>

<rect x="x座標" y="y座標" width="幅" height="高さ" rx="半径(x軸方向)"ry="半径(y軸方向)"/>
 

円<circle>

<circle cx="円の中心点のx座標" cy="円の中心点のy座標" r="半径"/>
 

楕円(ellipse)

<ellipse cx="中心点のx座標" cy="中心点のy座標" rx="半径(x軸方向)" ry="半径(y軸方向)"/>
 

折れ線<polyline>

<polyline points="x座標（折れ点1）,y座標（折れ点1） x座標（折れ点2）,y座標（折れ点2） ・・・・・・・"/>
 

多角形<polygon>

<polylgon points="x座標（頂点1）,y座標（頂点1） x座標（頂点2）,y座標（頂点2） ・・・・・・・"/>
 

テキスト<text>

<text x="x座標" y="y座標" font-family="フォントタイプ" font-size="フォントサイズ" />
 

パス<path>

パスは自由に直線や曲線を書くことを可能にする要素。

<path d="パスデータ" fill="塗りつぶしの色" stroke="外周線の色" stroke-width="外周線の太さ" />
 

サンプル

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="500" height="500">
<path d="M50,50 Q90,25 100,100 T150,150" fill="none" stroke="black" stroke-width="3"/>
<path d="M75,100 A30,30,0,1,1,150,200" fill="none" stroke="red" stroke-width="3"/>
</svg>
 

参考ページ

感謝!!

• http://www.hcn.zaq.ne.jp/___/SVG11-2nd/index.html
• http://www.techscore.com/tech/RichClient/svg/
• http://www3.ocn.ne.jp/~dhrname/svgindex.htm