SVGとは
SVG(Scalable Vector Graphics)とはベクター形式で描画することができる画像形式です。一般的な画像はラスタ形式のもので拡大すると画像が劣化しますが、SVGはベクター形式ですから劣化しない特徴があります。
SVGはXMLの記述をする必要があります。例えば空タグは最後にスラッシュを付けるなどXHTMLの記述方法を思い出してください。
またもう一つの特徴として、ソースコードで記述されている点です。つまりスクリプトやCSSから簡単に変更を加える事も可能です。更にgzip圧縮も可能なためダウンロードの負担が軽減されます。まさにマルチデバイス向けの画像形式といえます。
WordPressの投稿にインラインSVGを使用するための注意点はコチラを参照ください。
＊サーバーがSVGに対応してない場合もあります。その時は.htaccessを使用して認識させます。
こちらを参考にしてください。
インラインSVGコードの書き方
インラインSVGコードはHTMLにsvgタグを使用してオブジェクトを描画します。
簡単な例として、rect要素で四角形を描画します。svgタグ内はxml形式の記述になりますので、rectは空タグなので最後にスラッシュをつけることを忘れないでください。
サンプル
HTMLコード
<svg xmlns="http://www.w3.org/2000/svg" width="350" height="250" viewBox="0 0 350 250"> <rect stroke="#f00" fill="none" x="10" y="10" width="300" height="200"/> </svg>
ネームスペース
XMLだとネームスペースを記述する必要があります。
xmlns属性は次のように記述します。
xmlns=”http://www.w3.org/2000/svg”
ネームスペースを指定することでsvg特有の要素を使用できます。
例えばa要素はHTMLのa要素とsvgのa要素では違う使い方をします。svgタグの中でsvgのネームスペースを宣言することでHTMLのa要素と違う使い方ができるようになるわけです。
幅と高さの指定
SVGの描画で最初に戸惑うのは描画サイズの指定方法です。
svg要素内で指定するwidthとheightはこれから描くオブジェクトの背景領域の幅と高さを指定するものです。イラストレーターのアートボードのようなもので、これから描くオブジェクトの大きさではありません。
わかりにくいのはviewBoxです。これは先に指定したwidthとheightの領域の寸法になります。
例えば、width=”350″ height=”250″の領域を作成した場合に、viewBox=”0 0 350 250″とすると、
左上の座標 x=0, y=0
右上の座標 x=350, y=0
右下の座標 x=350, y=250
左下の座標 x=0, y=250
となります。
svgのwidthとheightの値とviewBoxの値を同一にしておくと1px単位の目盛りになります。
もし、width=”350″ height=”250″でviewBox=”0 0 700 500″とすると、半分のサイズで描画されます。
また、width=”350″ height=”250″でviewBox=”0 0 175 125″とすると、倍のサイズで描画されますが、全部領域内で描かれずに矩形の半分だけの表示になります。
次の画像はviewBox=”0 0 700 500″のサンプル
次の画像はviewBox=”0 0 175 125″のサンプル
オブジェクトの描画
オブジェクトを描くにはsvgタグ内に次のどれかを使用してオブジェクトを描きます。
- 矩形 <rect>
- 円形 <circle>
- 楕円形 <ellipse>
- 線 <line>
- ポリライン <polyline>
- ポリゴン <polygon>
- パス <path>
矩形の描画と属性の使い方
矩形を描画するには rect 要素を使います。
ここでは各オブジェクトを描くときに共通に使える属性の働きを見ておきます。
x、y 属性は矩形の左上の座標を指定し（省略の場合は 0 ）、width と height 属性では矩形の幅と高さを指定します。
また、線の色は stroke、塗りの色はfillを使います。もし、塗りを無しにするにはnoneの値を入れます。
線の幅はstroke-widthを使います。透明度を指定するには、opacityが使えますが、strokeにrgbaを指定することもできます。
サンプル
コード
<svg xmlns="http://www.w3.org/2000/svg" width="350" height="250" viewBox="0 0 350 250"> <rect stroke="#f00" fill="none" stroke-width="5" opacity="0.5" x="10" y="10" width="300" height="200"/> </svg>
スタイルシート併用の場合
同様の描画をするなら、クラス名を指定しておいて、着色などの属性をCSSで設定することもできます。
<svg xmlns="http://www.w3.org/2000/svg" width="350" height="250" viewBox="0 0 350 250"> <rect class="myrect" x="10" y="10" width="300" height="200"/> </svg>
css
.myrect{
stroke:#f00;
fill:none;
stroke-width:5;
opacity:0.5;
}
円の描画
円を描くにはcircle タグを使います。
- cx：中心座標X
- cy：中心座標Y
- r：半径
- stroke：線の色
- stroke-width：線の幅
- fill：矩形内の塗りつぶし色
サンプル
コード
<svg xmlns="http://www.w3.org/2000/svg" width="350" height="350" viewBox="0 0 350 350"> <circle class="mycircle" cx="150" cy="150" r="100"/> </svg>
css
.mycircle{
stroke:#00FFB3;
fill:#82FFCE;
stroke-width:5;
opacity:1;
}
楕円の描画
楕円を描画するには、ellipseタグを使用します。指定する属性は次のとおりです。
- cx：中心座標X
- cy：中心座標Y
- rx：X軸方向の半径
- yx：Y軸方向の半径
- stroke：線の色
- stroke-width：線の幅
- fill：矩形内の塗りつぶし色
サンプル
<svg xmlns="http://www.w3.org/2000/svg" width="350" height="250" viewBox="0 0 350 250"> <ellipse cx="150" cy="150" rx="100" ry="50" style="stroke:#5006FF;fill:#A192FF;stroke-width:5;opacity:1;"/> </svg>
線の描画
単純な 1 本の線を描画する場合は line 要素 を指定します。 線は幅や高さではなく、2 点の座標を指定し、これらを結ぶ形で描画されます。 線を引く 2 点の座標は、x1 と y1 属性、x2 と y2 属性でそれぞれ指定します。 線は座標 (x1, y1) から (x2, y2) まで引かれます。
サンプル
<svg xmlns="http://www.w3.org/2000/svg" width="350" height="250" viewBox="0 0 350 250"> <line x1="0" y1="0" x2="200" y2="200" style="stroke:#FF00F0;stroke-width:5;opacity:1;"/> </svg>
多角形の描画
polyline 要素は複数の線（折れ線グラフの折れ線をイメージすると解りやすい）を、polygon は多角形を定義するための要素です。
複数の線を line 要素で設定することは現実的ではありません。 複数の線を同時に描画する場合は polyline 要素を使用します。
また多角形を描画するには poligon 要素を使用します。
polyline 要素と polygon 要素では points 属性を指定することで描画をします。
points 属性に指定する値は、複数の線、または多角形を定義する複数の座標点の値です。 座標はカンマ（ , ）と半角スペースで区切ります。
points= “x1,y1 x2,y2 x3,y3 … xn,yn” という形で x と y 座標のセットを複数組指定します。
値が奇数個の場合はエラーになります。
polyline 要素は閉じた図形ではなくpoints 属性を使って複数の線を描画します。
polygonタグを用いてpolyline と同じpoints 属性を指定したなら、最後のポイント座標と最初の座標が線で結ばれて閉じた状態になります。
polulineサンプル
<svg xmlns="http://www.w3.org/2000/svg" width="350" height="250" viewBox="0 0 350 250"> <polyline points="200,200 200,10 70,10 15,130 35,150 18,200" style="stroke:#FFA905;stroke-width:5;fill:none;opacity:1;"/> </svg>
polygonサンプル
<svg xmlns="http://www.w3.org/2000/svg" width="350" height="250" viewBox="0 0 350 250"> <polygon points="200,200 200,10 70,10 15,130 35,150 18,200" style="stroke:#FFA905;stroke-width:5;fill:none;opacity:1;"/> </svg>
pathの描画
<path> 要素は、パスを定義するために使用します。
path 要素で描画するのに必要な属性は「d属性」です。d属性は次のコマンドとパラメータを使用することで描画することができます。
d属性のコマンド
- M = moveto
-
“moveto” 命令（M または m）これは移動するということです。 ペンを持ち上げて新たな地点へ動かすのと同様に考えます。つまり、パスデータはまず “moveto” 命令で始めることになります。
M（大文字）の後には絶対座標が続き、 m（小文字）の後には相対座標が続きます。 - L = lineto
-
現在の点から (x,y) で与えられる座標へ直線を引くということです。
L（大文字）の後には絶対座標が続き、 l（小文字）の後には相対座標が続きます。 複数の座標を与えて、多角形を描かせることもできます。
サンプル
<svg xmlns="http://www.w3.org/2000/svg" width="350" height="250" viewBox="0 0 350 250"> <path d="M10,10 l100,100" style="stroke:#559B03;stroke-width:5;fill:none;opacity:1;"/> </svg>
- H = horizontal lineto
-
現在の点から x サイズの水平線を描きます。 H（大文字）の後には絶対座標が続き、 h（小文字）の後には相対座標が続きます。
<svg xmlns="http://www.w3.org/2000/svg" width="350" height="250" viewBox="0 0 350 250"> <path d="M10,10 l100,100 h50" style="stroke:#559B03;stroke-width:5;fill:none;opacity:1;"/> </svg>
- V = vertical lineto
-
現在の点からyサイズの垂直線を描き、 V（大文字）の後には絶対座標が続き、 v（小文字）の後には相対座標が続きます。
サンプル
<svg xmlns="http://www.w3.org/2000/svg" width="350" height="250" viewBox="0 0 350 250"> <path d="M10,10 l100,100 h50 v50" style="stroke:#559B03;stroke-width:5;fill:none;opacity:1;"/> </svg>
- C = curveto
-
ベジエ曲線は始点と終点そしていくつかの制御点からできる曲線です。始点と終点を必ず通り、制御点という特殊な座標で曲線を作成します。
ベジエ曲線は制御点を増やすことでより複雑な曲線になります。
制御点が一つの場合を２次ベジェ曲線といい、制御点が２つになると３次ベジェ曲線と呼びます。3次ベジェ曲線を引くにはCコマンド及びSコマンドを用います。
Cコマンドでは始点に対する制御点，終点に対する制御点そして終点の3つの点の座標を記述します。サンプル
<svg xmlns="http://www.w3.org/2000/svg" width="350" height="250" viewBox="0 0 350 250"> <path d="M10,100 c100,200 200,-200 300,0" style="stroke:#559B03;stroke-width:5;fill:none;opacity:1;"/> </svg>
- S = smooth curveto
-
S x2 y2, x y
複雑ななめらかな曲線を描くためには、複数のベジェ曲線をつなぎます。簡単に言うと三次ベジェ曲線の短縮版です。通常、いくつかのベジェ曲線をつないだ場合、ある点の片方の制御点はもう一方で使われる制御点の対向になる場合が多いです。この場合にコマンド S (または s) を使います。
S は前に示したものと同種の曲線を生成します。これが前の S コマンドや C コマンドに続く場合は、1 番目の制御点が前の曲線で用いられた制御点の対向にするものとみなします。
S コマンドが別の S または C コマンドの後にない場合は、その曲線の 2 つの制御点は同じ場所であるとみなされます。
サンプル
<svg xmlns="http://www.w3.org/2000/svg" width="350" height="250" viewBox="0 0 350 250"> <path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" style="stroke:#559B03;stroke-width:5;fill:none;opacity:1;"/> </svg>
- Q = quadratic Bézier curve
-
現在の点から制御点 (x1, y1) を用いて点 (x, y) へ二次ベジェ曲線を描きます。 Q（大文字）の後には絶対座標が続き q（小文字）の後には相対座標が続きます。
サンプル
<svg xmlns="http://www.w3.org/2000/svg" width="350" height="250" viewBox="0 0 350 250"> <path d="M10,10 l100,100 h50 v50 q50,-100,100,0" style="stroke:#559B03;stroke-width:5;fill:none;opacity:1;"/> </svg>
- T = smooth quadratic Bézier curveto
-
T は二次ベジェ曲線のセットをつなぎ合わせるためのショートカットです。ショートカットコマンドは前に使った制御点を参照し新しい制御点を推測します。
Tでは最初の制御点を指定した後は終点を指定するだけです。ただし、このコマンドは前のコマンドが Q または T コマンドである場合のみ動作することに注意してください。これらのコマンドの後にない場合、制御点は前の点と同じであるとみなして直線が描画されるだけになります。サンプル
<svg xmlns="http://www.w3.org/2000/svg" width="350" height="250" viewBox="0 0 350 250"> <path d="M10,10 l100,100 h50 v50 q50,-100,100,0 t 180 -150" style="stroke:#559B03;stroke-width:5;fill:none;opacity:1;"/> </svg>
-
円弧を描きます。
A = elliptical Arc -
Aコマンドで次のように記述します。パラメータは5つあります。
A 30,50 -45 0 0 215,110
複雑なパラメータですので、まず円弧の半径と終点を決めてしまうのがコツです。パラメータの意味は次のとおりです。
- 円弧の半径dx,dy
- 円弧の回転(度)
- 大きく回るか小さく回るか(0,1)
- 右を回るか左を回るか(0,1)
- 終点x,y
サンプル
<svg xmlns="http://www.w3.org/2000/svg" width="350" height="350" viewBox="0 0 700 700"> <path d="M10 350 A 30,50 -45 0 0 215,110" style="stroke:#559B03;stroke-width:5;fill:none;opacity:1;"/> </svg>
- Z = closepath
- “closepath”（Z または z）は現在の部分パスの終了を意味し、現在の点から現在の部分パスの始点への直線が自動的に描かれます。 もし “closepath” の後に “moveto” が続く場合、”moveto” が次の部分パスの始点を指定します。
注: 上記のコマンドのすべては、小文字で表現することもできます。 大文字は絶対配置を意味し、小文字は相対的に配置を意味します。
ベジェ曲線の理屈を解りやすく解説しているサイトがあります。：中学生でもわかるベジェ曲線
WordPressの投稿でインラインSVGを使用する
WordPressの投稿でインラインSVGを記述してもうまく表示されません。
ビジュアルエディタとテキストエディタを行き来すると、SVGコードが消されたりします。
これを防ぐには以下の一文をfunctions.phpに記述します。
function elements_attributes( $init ) {
$ext = '*[*]';
if ( isset( $init['extended_valid_elements'] ) ) {
$init['extended_valid_elements'] .= ',' . $ext;
} else {
$init['extended_valid_elements'] = $ext;
}
return $init;
}
また、表示されない原因はSVGコードを記述する際に改行をしたりスペースを入れたりすると余計なタグ（brタグなど）が入りコードがおかしくなるためです。WordPressの記事にインラインSVGコードを記述するときは、改行などせずに続けて記述すると問題なく表示されるようになります。
コメントを投稿するにはログインしてください。