SVG Weblog

Chapter 10 : Polygon & Polyline element SVG

2008-07-23T11:53:03Z

Polygon element(ポリゴン要素)と Polyline element (ポリライン要素)で描く

Polygon element と Polyline element には、points属性があります。 Polygonは下の図のように各点を結ぶ線の始点と終点が結ばれていますが、 Polylineは始点と終点が指定された位置になります。（黒い丸点はパスを分かり易く見えるようにしたものです。）

points = 図形を線で結ぶためのX軸Y軸を指定した各点

]]>

SVGがサポートされていないブラウザでは、SVG Viewerプラグインをインストールしてください。

IEで、Adobe SVG Viewer をインストールしてあれば、Altキーを押したまま上の画面をマウスでドラッグすれば動きます。また、Ctrlキーを押してクリックでズームイン、Ctrl + Shift キーを押してクリックするとズームアウトすることができます。

左上の "defs" はポリラインとポリゴンのパスだけを定義したものです。スタイル属性は何も指定されていません。

その下の☆型の図形は、フィルの色をオレンジに、ストロークの色を青にしています。ポリゴンはストロークが繋がっていますが、ポリラインは最後に指定したパスでストロークは終了しています。

スタイル属性を何も指定しなければポリゴンもポリラインもフィルの部分のみが黒になります。右下は、フィルの色を無くしてストロークの色と幅のみを指定したものです。

色の名称はこちらを参考：Name, Hex, RGB of Color

下のコードは上のSVGファイルのコードです。

<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xhtml="http://www.w3.org/1999/xhtml" width="850" height="520"> <desc>shapes of line element</desc> <title>polygon-polyline element</title> <style type="text/css"> <![CDATA[ .txt {font-family:Arial;font-weight:bold; } ]]> </style> <defs> <pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"> <polyline points="10,0 0,0 0,10" fill="none" stroke="gray" stroke-width="0.25" /> </pattern> <polygon id="polygon1" points="201,246 125,191 62,261 90,171 5,133 98,133 108,39 138,128 230,109 154,165" /> <polyline id="polyline1" points="201,246 125,191 62,261 90,171 5,133 98,133 108,39 138,128 230,109 154,165" /> </defs>  <rect fill="white" width="850" height="530" /> <rect fill="url(#grid)" stroke="black" stroke-width="1" x="0" y="0" width="850" height="550" />  <g style="fill:blue;stroke:blue;stroke-width:15;fill:orange;stroke-linejoin:round;stroke-linecap:round"> <use xlink:href="#polygon1" transform="translate(20,80) scale(0.75)" /> <use xlink:href="#polyline1" transform="translate(220,80) scale(0.75)" /> </g> <g style="fill:none;stroke:blue;stroke-width:15;"> <use xlink:href="#polygon1" transform="translate(450,280) scale(0.5)" /> <use xlink:href="#polyline1" transform="translate(650,280) scale(0.5)" /> </g> <use xlink:href="#polygon1" transform="translate(450,80) scale(0.5)" /> <use xlink:href="#polyline1" transform="translate(650,80) scale(0.5)" /> <g class="txt"> <text font-size="16" fill="red" x="15" y="20">defs</text> <text font-size="12" x="15" y="35"><polygon id="polygon1" </text> <text font-size="12" x="15" y="50">points="201,246 125,191 62,261 90,171 5,133 98,133 108,39 138,128 230,109 154,165" /></text> <text font-size="12" x="15" y="75"><polyline id="polyline1"</text> <text font-size="12" x="15" y="90">points="201,246 125,191 62,261 90,171 5,133 98,133 108,39 138,128 230,109 154,165" /></text> <text font-size="12" x="5" y="300"><g style="fill:blue;stroke:blue;stroke-width:15;</text> <text font-size="12" x="50" y="315">fill:orange;stroke-linejoin:round;stroke-linecap:round"></text> <text font-size="12" fill="green" x="5" y="330"><use xlink:href="#polygon1" transform="translate(20,80) scale(0.75)" /></text> <text font-size="12" fill="green" x="5" y="345"><use xlink:href="#polyline1" transform="translate(220,80) scale(0.75)" /></text> <text font-size="12" x="5" y="360"></g></text> <text font-size="12" x="430" y="430"><g style="fill:none;stroke:blue;stroke-width:15;"></text> <text font-size="12" fill="green" x="430" y="445"><use xlink:href="#polygon1" transform="translate(450,280) scale(0.5)" /></text> <text font-size="12" fill="green" x="430" y="460"><use xlink:href="#polyline1" transform="translate(650,280) scale(0.5)" /></text> <text font-size="12" x="430" y="475"></g></text> <text font-size="12" x="430" y="315"></text> <text font-size="12" fill="green" x="430" y="240"><use xlink:href="#polygon1" transform="translate(450,80) scale(0.5)" /></text> <text font-size="12" fill="green" x="430" y="255"><use xlink:href="#polyline1" transform="translate(650,80) scale(0.5)" /></text> <text font-size="12" x="430" y="360"></text> </g> </svg>

Chapter 9 - 5 : SVG & Canvas Matrix Transformation

2008-07-23T05:51:30Z

これは、SVG & Canvas で使われているMatrix Transformation をJavascript で計算して値を求めるためのツールです。そのMatrix値を使ってCanvas に描くようにしました。Matrix は、3×3ですので2Dです。3Dは4×4のマトリックスになります。

How to : & example
input value of translate(t_xt_y) ---> translate(50,40)
input value of scale(s_xs_y) ---> scale(2) or scale(1,-0.75)
input value of rotate(angle) ---> rotate(25)
input value of skewX(angle) ---> skew(-45)
"Get Matrix" button is to get values of Matrix Transformation
"Clear Text" button is to clear the textarea
"Draw Matrix" button is to redraw the image below
"Clear Canvas" button is to clear images which is drawn.

IEでも表示させるために Google の excanvas.js を使っていますが、excanvas.js に Matrixで描写するための setTransform 属性がないためにスクリプトを改造しています。しかし、IEでは、外側の赤い部分しか Matrix を Transform 出来ません。

]]> マトリックスの計算方法は、上の図のようになります。

translate, scale, rotate, skewX, skewY 式にそれぞれの値を代入して、下の図で2つの式を計算させます。transform 属性で書かれている順番に従いさえすれば、頭から計算しても最後から計算しても同じです。

transform = "translate(tx [ ty]) rotate(angle [cx cy]) scale(sx [sy]) skewX(angle) skewY(angle)" transform = "matrix(a, b, c, d, e, f)" --->matrix(a, b, c, d, e, f, 0, 0, 1) transform = "translate(tx, ty)" ---> transform = "matrix(1, 0, tx, d, 1, ty)" transform = "rotate(angle)" ---> transform = "matrix(cos α, -sin α, 0, sin α, cos α, 0)" α = angle * π/180 transform = "skewX(angle)" ---> transform = "matrix(1, tan α, 0, 0, 1, 0)" transform ="skewY(angle)" ---> transform ="matrix(1, 0, 0, tan α, 1, 0)" transform = "scale(sx, sy)" ---> transform = "matrix(sx, 0, 0, 0, sy, 0)"

W3Cで標準化されている要素、スタイル属性がサポートされているブラウザ、またはSVG Viewerプラグインをインストールしてください。

<use xlink:href="#cup" transform="translate(0,0)" /> <use xlink:href="#cup" transform="matrix(1,0,0,1,0,0)" /> <use xlink:href="#cup" transform="translate(450,450) scale(-1,1) rotate(165)" /> <use xlink:href="#cup" transform="matrix(0.9659,0.2588,0.2588,-0.9659,450,450)" />

これは、translate, scale, rotate, skew でTransform されたものをMatrix変換して纏めたものです。SVGレンダラーは、transform 属性で設定された各プロパティ値をMatrix変換してして処理するのでMatrix transform属性を使うことで計算量が減少した分、パフォーマンスが得られます。

translate(0,0) と matrix(1,0,0,1,0,0) は同じ位置に表示されます。
同じように、translate(450,450) scale(-1,1) rotate(165) と matrix(0.9659,0.2588,0.2588,-0.9659,450,450) も同じ位置です。

色の名称はこちらを参考：Name, Hex, RGB of Color

下のコードは上のSVGファイルのコードです。

<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xhtml="http://www.w3.org/1999/xhtml" width="850" height="530"> <desc>matrix attribute</desc> <title>matrix attribute</title> <style type="text/css"> <![CDATA[ .txt {font-family:Arial;font-weight:bold; font-size:15; } .arrow {stroke:black;stroke-width:2.5; marker-start:url(#start); marker-end:url(#end); } ]]> </style> <defs> <pattern id="gridPattern" width="10" height="10" patternUnits="userSpaceOnUse"> <polyline points="10,0 0,0 0,10" fill="none" stroke="gray" stroke-width="0.25" /> </pattern> <rect id="grids" width="800" height="530" stroke="gray" stroke-width="0.25" fill="url(#gridPattern)" /> <marker id="start" viewBox="0 -10 20 20" markerUnits="userSpaceOnUse" refX="0" refY="0" markerWidth="20" markerHeight="20" orient="auto"> <polygon points="0,0 20,-6 16,0 20,6" stroke="black" /> </marker> <marker id="end" viewBox="-20 -10 20 20" markerUnits="userSpaceOnUse" refX="0" refY="0" markerWidth="20" markerHeight="20" orient="auto"> <polygon points="0,0 -20,-6 -16,0 -20,6" stroke="black" /> </marker> <linearGradient id="shade1" x2="50%" y2="0%" spreadMethod="reflect"> <stop offset="0%" stop-color="darkslategray"/> <stop offset="100%" stop-color="white"/> </linearGradient> <g id="cup" stroke="black" stroke-linejoin="round" > <rect id="handle" width="35" height="50" x="90" y="30" rx="7" ry="30" style="fill:none;stroke:#002222;stroke-width:10" /> <rect width="100" height="150" rx="8" ry="8" fill="url(#shade1)" /> <rect width="104" height="5" x="-2" y="-1" fill="url(#shade1)" /> </g> <path id="bracket" d="M0,0 Q-30,50 0 100" style="stroke:blue;stroke-width:3;fill:none" /> </defs>  <use xlink:href="#grids" /> <use xlink:href="#cup" transform="translate(0,0)" /> <use xlink:href="#cup" transform="matrix(1,0,0,1,0,0)" /> <use xlink:href="#cup" transform="translate(450,450) scale(-1,1) rotate(165)" /> <use xlink:href="#cup" transform="matrix(0.9659,0.2588,0.2588,-0.9659,450,450)" /> <use xlink:href="#cup" transform="matrix(0.8192,-0.5736,-0.5736,-0.8192,500,200)" /> <use xlink:href="#cup" transform="translate(500,200) scale(1,-1) rotate(35)" /> <use xlink:href="#cup" transform="matrix(-0.7071,-0.7071,-0.7071,0.7071,400,200)" /> <use xlink:href="#cup" transform="translate(400,200) scale(-1,1) rotate(-45)" /> <use xlink:href="#cup" transform="matrix(0.39482239,0.58852073,1.2247,-0.7071,150,450)" /> <use xlink:href="#cup" transform="translate(150,450) scale(-1,1) rotate(165) skewX(45) skewY(-25)" /> <g class="txt"> </g> </svg>

Chapter 9 - 4 : Transform attribute (skewX, skewY) SVG

2008-07-18T13:01:41Z

skewX, skewY から構成されるスキュー・トランスフォーメーションは、その形状からシアリング(shearing) と呼ばれたりします。

skewX はX軸に対して、skewY はY軸に対して設定された角度分、図のようにオブジェクトを変形させます。

もし設定角度(angle)がマイナスの場合は、逆の方向になります。

]]>

W3Cで標準化されている要素、スタイル属性がサポートされているブラウザ、またはSVG Viewerプラグインをインストールしてください。

scale や rotate プロパティと同じように、同じtransform 属性で、skew の後にtranslate が設定されると移動する方向が違ってきます。

色の名称はこちらを参考：Name, Hex, RGB of Color

下のコードは上のSVGファイルのコードです。

<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xhtml="http://www.w3.org/1999/xhtml" width="850" height="530"> <desc>skewX skewY property</desc> <title>skewX skewY property</title> <style type="text/css"> <![CDATA[ .arrow {stroke:red;stroke-width:2.5; marker-end:url(#end_red); } .txt {font-family:Arial;font-weight:bold; font-size:15; } ]]> </style> <defs> <g id="grid"> <line x1="0" y1="265" x2="850" y2="265" fill="none" stroke-width="530" stroke="Gainsboro" stroke-dasharray="0.5 9.5" /> <line x1="425" y1="0" x2="425" y2="530" fill="none" stroke-width="850" stroke="Gainsboro" stroke-dasharray="0.5 9.5" /> </g> <marker id="end_red" viewBox="-20 -10 20 20" markerUnits="userSpaceOnUse" refX="0" refY="0" markerWidth="20" markerHeight="20" orient="auto"> <polygon points="0,0 -20,-6 -16,0 -20,6" stroke="red" /> </marker> <linearGradient id="shade1" x2="50%" y2="0%" spreadMethod="reflect"> <stop offset="0%" stop-color="darkslategray"/> <stop offset="100%" stop-color="white"/> </linearGradient> <linearGradient id="shade2" x2="50%" y2="0%" spreadMethod="reflect"> <stop offset="0%" stop-color="darkslategray"/> <stop offset="100%" stop-color="white"/> </linearGradient> <g id="can" stroke="black" stroke-linejoin="round" > <rect width="100" height="150" rx="8" ry="8" fill="url(#shade1)" /> <rect width="102" height="5" x="-1" y="-1" fill="url(#shade1)" /> <rect width="102" height="5" x="-1" y="146" fill="url(#shade1)" /> </g> </defs>  <use xlink:href="#grid" /> <line id="line1" x1="0" x2="800" y1="0" y2="0" stroke="blue" stroke-width="0.25mm" transform="rotate(45)" /> <use xlink:href="#line1" transform="rotate(-18.5)" /> <use xlink:href="#line1" transform="translate(750,0) rotate(90)" /> <line class="arrow" x1="110" y1="80" x2="650" y2="80" /> <line class="arrow" x1="630" y1="170" x2="460" y2="340" /> <use xlink:href="#can" /> <use xlink:href="#can" transform="skewX(45) skewY(45) translate(200,0)" /> <use xlink:href="#can" transform="translate(750,0) skewX(-45)" /> <use xlink:href="#can" transform="translate(750,0) skewX(-45) translate(0,350)" /> <use xlink:href="#can" transform="skewY(45)" /> <use xlink:href="#can" transform="skewY(45) translate(200,0)" /> <use xlink:href="#can" transform="translate(200,0) skewY(45)" /> <circle cx="750" cy="0" r="5" fill="red" /> <circle cx="0" cy="0" r="5" fill="red" /> <line class="arrow" x1="110" y1="210" x2="180" y2="280" /> <line class="arrow" x1="110" y1="120" x2="180" y2="120" /> <g class="txt"> text goes here </g> </svg>

Invader Game SVG

2008-07-18T08:06:32Z

Svg で書かれた懐かしのインベーダーゲームです。

グラフィックオブジェクトをECMAScipt で動かしています。SVGは、まだまだ発展途上の段階で大きな可能性を秘めています。 SVG2.0 でもっと自由度が増しそうです。

Invader game ©2007 simon place 方向キーを押してスタート

Chapter 9 - 3 : Transform attribute (negative scale)SVG

2008-07-17T22:23:49Z

transform 属性の、scale のプロパティ値がマイナスになった場合、オブジェクトはミラーリング(mirroring)します。Chapter 9 の今回のセクションでは、これにrotate, translate などをミックスさせた位置関係を説明します。

]]>

W3Cで標準化されている要素、スタイル属性がサポートされているブラウザ、またはSVG Viewerプラグインをインストールしてください。

左上のある#cup は、rotate(15) へ回転させた位置です。
rotate(15) scale(-1, 1) の位置は、X軸がマイナスの位置に表示されます。
rotate(15) scale(-1, 1) translate(-370, 0) の位置が右上2番目のオブジェクトです。この場合、translate(-370, 0) のマイナス370の方向は、scale(-1, 1) でX軸に反転してますので、逆の方向になります。これは、matrix 換算時にこうならなければいけないためです。
簡単に言うと、一旦scale(-1, 0)でX軸に反転させてますので、オブジェクトのカップの黒い取っ手のある方向がX軸にプラスの方向になります。もしscale が最後に設定されるのであれば関係ありません。また、transform での位置設定が終われば関係ありません。

●の位置は、x=650, y=250 の位置にあります。scale(-sx, -sy)の位置はその●にクロスしている青線の反対側に反転された位置になります。

基準となるオブジェクトの位置を、X=0, Y=0 の位置に設定すればその分簡単になります。

今回の#cup のx, y のオリジナルの位置は移動しています。前回までの#cup のrect 要素の左上(x, y) は指定していないので、x="0" y="0" でした。今回は、x="140" y="50" となっています。

色の名称はこちらを参考：Name, Hex, RGB of Color

下のコードは上のSVGファイルのコードです。

<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xhtml="http://www.w3.org/1999/xhtml" width="100%" height="100%"> <desc>rotate and negative scale property</desc> <title>rotate and scale property</title> <style type="text/css"> <![CDATA[ .arrow {stroke:red;stroke-width:2.5; marker-end:url(#end_red); } .style1 {stroke:black;stroke-width:1.5mm;} .txt {font-family:Impact; /*Arial;*/ font-size:14; } ]]> </style> <defs> <g id="grid"> <line x1="0" y1="300" x2="850" y2="300" fill="none" stroke-width="600" stroke="Gainsboro" stroke-dasharray="0.5 9.5" /> <line x1="425" y1="0" x2="425" y2="600" fill="none" stroke-width="850" stroke="Gainsboro" stroke-dasharray="0.5 9.5" /> </g> <marker id="start" viewBox="0 -10 20 20" markerUnits="userSpaceOnUse" refX="0" refY="0" markerWidth="20" markerHeight="20" orient="auto"> <polygon points="0,0 20,-6 16,0 20,6" stroke="black" /> </marker> <marker id="end" viewBox="-20 -10 20 20" markerUnits="userSpaceOnUse" refX="0" refY="0" markerWidth="20" markerHeight="20" orient="auto"> <polygon points="0,0 -20,-6 -16,0 -20,6" stroke="black" /> </marker> <marker id="end_red" viewBox="-20 -10 20 20" markerUnits="userSpaceOnUse" refX="0" refY="0" markerWidth="20" markerHeight="20" orient="auto"> <polygon points="0,0 -20,-6 -16,0 -20,6" fill="red" stroke="red" /> </marker> <linearGradient id="shade1" x2="50%" y2="0%" spreadMethod="reflect"> <stop offset="0%" stop-color="darkslategray"/> <stop offset="100%" stop-color="white"/> </linearGradient> <g id="cup" stroke="black" stroke-linejoin="round" > <rect id="handle" width="35" height="50" x="140" y="50" rx="7" ry="30" style="fill:none;stroke:#002222;stroke-width:10" /> <rect x="50" y="20" width="100" height="150" rx="8" ry="8" fill="url(#shade1)" /> <rect x="48" y="19" width="104" height="5" fill="url(#shade1)" /> </g> </defs>  <use xlink:href="#grid" />  <g class="arrow"> </g> <use xlink:href="#cup" transform="rotate(15)"/> <use xlink:href="#cup" transform="scale(-1,1)"/> <use xlink:href="#cup" transform="rotate(15) scale(-1,1) translate(-370,0)" /> <use xlink:href="#cup" transform="rotate(15) scale(-1,1) translate(-520,0)" /> <use xlink:href="#cup" transform="translate(600,250) rotate(-25)" /> <g style="stroke:blue; stroke-width:0.5mm"> <line x1="600" x2="600" y1="75" y2="425" transform="rotate(-25,600,250)" /> <line x1="600" x2="600" y1="75" y2="425" transform="rotate(65,600,250)" /> </g> <use xlink:href="#cup" transform="translate(600,250) rotate(-25) scale(-1,1)" /> <use xlink:href="#cup" transform="translate(600,250) rotate(-25) scale(-0.25)" /> <use xlink:href="#cup" transform="translate(600,250) rotate(-25) scale(-0.25,1)" /> <use xlink:href="#cup" transform="translate(600,250) rotate(-25) scale(1,-1)" /> <use xlink:href="#cup" transform="translate(600,250) rotate(-25) scale(-1,1) translate(350,-150)" /> <circle cx="600" cy="250" r="5" fill="red" /> <line x1="470" y1="400" x2="240" y2="400" class="arrow" /> <g class="txt"> text goes here </g> </svg>

Chapter 9 - 2 : Transform attribute (rotate)SVG

2008-07-16T11:56:43Z

Transform 属性の rotate プロパティは、オブジェクトを回転させるためのものですが、回転の軸(cx, cy)がどこにあるかで位置が変わります。rotate(angle, cx, cy) の cx, cy はオプションです。rotate(angle) と指定されてなければ、cx, cy はオブジェクトの x, y の位置になります。

circle 要素は、cx, cy の回転の軸が中心にあるため、このrotate プロパティはグラデーションやstroke-dasharrayなどのスタイル属性に対して有効になります。(ellipse要素は、X軸とY軸の半径（r) -->rx, ry があるので有効です）

]]>

左上のオブジェクトは、rotate(45) させたものです。この場合は、オブジェクトの位置は、x=0, y=0 ですので、rotate(45,0,0) と同じ意味になります。もしオブジェクトの位置が、 x=100, y=100 にあると、rotate(45) は rotate(45,100,100) と同じです。

rotate(45)と設定すると、オブジェクトが時計回りに45度、x, y を軸にして回転します。rotate(360) と設定すると rotate(0) と同じ位置ですので変化はありません。rotate(45)=rotate(405)

左側の図は#cup を translate(350,0) rotate(45) と rotate(45) translate(350,0) にトランスフォームさっせた図です。

translate(350,0) rotate(45) は、translate(350,0) と移動させた位置で rotate(45) と回転させています。

rotate(45) translate(350,0) は、rotate(45) と回転させた状態で translate(350,0) と移動させています。

右側の図は、translate(450,0) と移動させて、その位置から(200,75) の位置を軸にして回転させた例です。rotate(angle, 200, 75)と設定します。

#cup2 は、#cup をtranslate(200,200) の位置に移動させたものです。

#cup rotate(25) translate(200,200) の位置は #cup2 rotate(25) と同じになります。#cup2 はグループ化されたIDになります。そのIDを指定するということは、rotate がtranslate(200,200) よりも先になります。上の例は、rotate(-25) と反時計周りに移動させてます。

基準となるオブジェクトの位置を、X=0, Y=0 の位置に設定すればその分簡単になります。

#cup3 の例も同じです。

問題：#cup3 をrotate(15) させた位置を、#cup を使ってトランスフォームさせよ

W3Cで標準化されている要素、スタイル属性がサポートされているブラウザ、またはSVG Viewerプラグインをインストールしてください。

色の名称はこちらを参考：Name, Hex, RGB of Color

下のコードは上のSVGファイルのコードです。

<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xhtml="http://www.w3.org/1999/xhtml" width="100%" height="100%"> <desc>rotate property</desc> <title>rotate property</title> <style type="text/css"> <![CDATA[ .arrow {stroke:black;stroke-width:2.5; marker-end:url(#end); } .style1 {stroke:black;stroke-width:1.5mm;} .txt {font-family:Impact; /*Arial;*/ font-size:14; } ]]> </style> <defs> <g id="grid"> <line x1="0" y1="300" x2="850" y2="300" fill="none" stroke-width="600" stroke="Gainsboro" stroke-dasharray="0.5 9.5" /> <line x1="425" y1="0" x2="425" y2="600" fill="none" stroke-width="850" stroke="Gainsboro" stroke-dasharray="0.5 9.5" /> </g> <marker id="start" viewBox="0 -10 20 20" markerUnits="userSpaceOnUse" refX="0" refY="0" markerWidth="20" markerHeight="20" orient="auto"> <polygon points="0,0 20,-6 16,0 20,6" stroke="black" /> </marker> <marker id="end" viewBox="-20 -10 20 20" markerUnits="userSpaceOnUse" refX="0" refY="0" markerWidth="20" markerHeight="20" orient="auto"> <polygon points="0,0 -20,-6 -16,0 -20,6" stroke="black" /> </marker> <marker id="end_red" viewBox="-20 -10 20 20" markerUnits="userSpaceOnUse" refX="0" refY="0" markerWidth="20" markerHeight="20" orient="auto"> <polygon points="0,0 -20,-6 -16,0 -20,6" fill="red" stroke="red" /> </marker> <linearGradient id="shade1" x2="50%" y2="0%" spreadMethod="reflect"> <stop offset="0%" stop-color="darkslategray"/> <stop offset="100%" stop-color="white"/> </linearGradient> <g id="cup" stroke="black" stroke-linejoin="round" > <rect id="handle" width="35" height="50" x="90" y="30" rx="7" ry="30" style="fill:none;stroke:#002222;stroke-width:10" /> <rect width="100" height="150" rx="8" ry="8" fill="url(#shade1)" /> <rect width="104" height="5" x="-2" y="-1" fill="url(#shade1)" /> </g> </defs>  <use xlink:href="#grid" />  <use xlink:href="#cup" transform="translate(450,0)" /> <circle transform="translate(450,0)" r="5" /> <circle cx="650" cy="75" r="5" /> <use xlink:href="#cup" transform="translate(450,0) rotate(-45,200,75)" /> <use xlink:href="#cup" transform="translate(450,0) rotate(-90,200,75)" /> <use xlink:href="#cup" transform="translate(450,0) rotate(-135,200,75)" /> <use xlink:href="#cup" transform="translate(450,0) rotate(180,200,75)" /> <g style="stroke:gray; stroke-width:0.5mm"> <line id="line2" x1="450" y1="0" x2="650" y2="75" /> <use xlink:href="#line2" transform="rotate(-45,650,75)" /> <use xlink:href="#line2" transform="rotate(-90,650,75)" /> <use xlink:href="#line2" transform="rotate(270,650,75)" /> <use xlink:href="#line2" transform="rotate(225,650,75)" /> <use xlink:href="#line2" transform="rotate(180,650,75)" /> </g> <g class="arrow"> <line x1="450" y1="0" x2="650" y2="75" /> </g> <use xlink:href="#cup" transform="rotate(45)" /> <use xlink:href="#cup" transform="translate(350,0) rotate(45)" /> <use xlink:href="#cup" transform="rotate(45) translate(350,0)" /> <g class="arrow"> <line x1="100" y1="75" x2="250" y2="75" /> <line x1="50" y1="150" x2="175" y2="275" /> </g> <line x1="0" y1="0" x2="400" y2="400" stroke="gray" stroke-width="0.5mm" /> <path d="M100,0 Q100 35.35 70.7,70.7" style="fill:none;stroke:red;stroke-width:1mm;marker-end:url(#end_red)" /> <g class="txt">  <text x="215" y="230"></text> </g> </svg>

<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xhtml="http://www.w3.org/1999/xhtml" width="100%" height="100%"> <desc>rotate property</desc> <title>rotate property</title> <style type="text/css"> <![CDATA[ .arrow {stroke:black;stroke-width:2.5; marker-end:url(#end); } .style1 {stroke:black;stroke-width:1.5mm;} .txt {font-family:Impact; /*Arial;*/ font-size:14; } ]]> </style> <defs> <g id="grid"> <line x1="0" y1="300" x2="850" y2="300" fill="none" stroke-width="600" stroke="Gainsboro" stroke-dasharray="0.5 9.5" /> <line x1="425" y1="0" x2="425" y2="600" fill="none" stroke-width="850" stroke="Gainsboro" stroke-dasharray="0.5 9.5" /> </g> <marker id="start" viewBox="0 -10 20 20" markerUnits="userSpaceOnUse" refX="0" refY="0" markerWidth="20" markerHeight="20" orient="auto"> <polygon points="0,0 20,-6 16,0 20,6" stroke="black" /> </marker> <marker id="end" viewBox="-20 -10 20 20" markerUnits="userSpaceOnUse" refX="0" refY="0" markerWidth="20" markerHeight="20" orient="auto"> <polygon points="0,0 -20,-6 -16,0 -20,6" stroke="black" /> </marker> <linearGradient id="shade1" x2="50%" y2="0%" spreadMethod="reflect"> <stop offset="0%" stop-color="darkslategray"/> <stop offset="100%" stop-color="white"/> </linearGradient> <g id="cup" stroke="black" stroke-linejoin="round" > <rect id="handle" width="35" height="50" x="90" y="30" rx="7" ry="30" style="fill:none;stroke:#002222;stroke-width:10" /> <rect width="100" height="150" rx="8" ry="8" fill="url(#shade1)" /> <rect width="104" height="5" x="-2" y="-1" fill="url(#shade1)" /> </g> </defs>  <use xlink:href="#grid" />  <g id="cup2"> <use xlink:href="#cup" transform="translate(200,200)" /> </g> <use xlink:href="#cup2" transform="rotate(-25)" /> <use xlink:href="#cup" transform="rotate(25) translate(200,200)" /> <line id="line1" x1="0" y1="0" x2="200" y2="200" style="stroke:gray;stroke-width:0.5mm" /> <use xlink:href="#line1" transform="rotate(25)" /> <use xlink:href="#line1" transform="rotate(-25)" /> <circle id="dot" transform="translate(200, 200)" r="4.5" /> <use xlink:href="#dot" transform="rotate(25)" /> <use xlink:href="#dot" transform="rotate(-25)" /> <g id="cup3"> <use xlink:href="#cup2" transform="translate(400,0)" /> </g> <use xlink:href="#cup3" transform="rotate(-15)" /> <use xlink:href="#cup3" transform="rotate(15)" /> <g class="arrow"> <line x1="330" x2="580" y1="275" y2="275" /> </g> </svg>

Chapter 9 - 1 : Transform attribute (translate, scale) SVG

2008-07-15T01:14:16Z

transform 属性は、translate, rotate, scale, skewX, skewY の5つのプロパティから構成されています。

translate(tx, ty) はIDのある xlink:href 属性によってリンクされたオブジェクトをX軸(tx)、Y軸(ty)に移動させます。

rotate(angle)は、オブジェクトを回転させます。(Chapter9-2, 9-3)

scale(sx,sy)は、オブジェクトの大きさ(X軸にsx 倍, Y軸にsy 倍)を変更します。(Chapter9-1, 9-3)

skewX(angle)は、オブジェクトをX軸の方向に設定された角度分歪みを加えます。(Chapter9-4) skewY(angle)は、オブジェクトをY軸の方向に設定された角度分歪みを加えます。(Chapter9-4

]]>

matrixは、それらのプロパティ値を 3*3 マトリックスmatrix(a, b, c, d, e, f, 0, 0, 1) に纏めたものです。一番下の段に当たる 0, 0, 1 の部分はtransform 要素には関係ないので省略されます。SVGレンダラーは、transform 属性の各プロパティ (translate, rotate, scale, skewX, skewY) を1つの matrix に変換します。よって matrix プロパティを使うことでパフォーマンス的に有利になります。マトリックスは、Chapter 9 の最後の記事で説明します。

これは、scaleプロパティを使ったときのオブジェクトの位置を説明したものです。scale(0.5, 0.5)とした場合のX軸とY軸の値はオリジナルのオブジェクトの半分になります。もし、オリジナルのオブジェクトの位置が、x="0" y="0" にある場合は位置は変わりません。

scale(0.5 0.5) ---> x="x * 0.5" y="y * 0.5"

W3Cで標準化されている要素、スタイル属性がサポートされているブラウザ、またはSVG Viewerプラグインをインストールしてください。

左の図形は、id="can" にリンクをさせてtransform="translate(50, 30)" ---> X軸に50px、Y軸に30px 移動させたものです。最初のrect 要素には、x="", y="" が設定されていませんので、x="0" y="0" となります。

2番目の図形は、transform="translate(200, 30) scale(1.5 0.5)" と、X軸に200、Y軸に30、幅(X軸に対する倍率）が1.5倍、高さ（Y軸に対する倍率）が0.5倍の大きさになっています。

3番目の図形は、2番目の図形(id="drum")にネストさせてます。
transform="translate(400,0)　scale(0.20 0.75)"
transform="translate(400,168.75)　scale(0.20 0.75)"
translate(400, 0)とX軸に400px移動させた位置で大きさを変更しています。もし先にscaleで大きさを変更したまま translate で移動させる場合は下のように書かなければいけません。

これは、scale(0.2 0.75) とX軸の幅を先に20% にした状態で移動させなければいけないのでX軸に5倍(0.2×5=1) の距離 ---> translate(2000,0) となります( 400 × 5 = 2000 ) ---> matrix 換算値

Y軸：Y軸に168.75移動した位置で0.75倍の高さ(Y軸）にするということは、
0.75倍の高さ(Y軸）した状態でY軸に225動かすと同じことになります。(168.75 × 4 ÷ 3 = 225)

基準となるオブジェクトの位置を、X=0, Y=0 の位置に設定すればその分簡単になります。

色の名称はこちらを参考：Name, Hex, RGB of Color

下のコードは上のSVGファイルのコードです。

<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xhtml="http://www.w3.org/1999/xhtml" width="850" height="530"> <desc>scale property</desc> <title>scale property</title> <style type="text/css"> <![CDATA[ .txt {font-family:Arial;font-weight:bold; font-size:15; } .arrow {stroke:black;stroke-width:2.5; marker-start:url(#start); marker-end:url(#end); } ]]> </style> <defs> <g id="grid"> <line x1="0" y1="265" x2="850" y2="265" fill="none" stroke-width="530" stroke="Gainsboro" stroke-dasharray="0.5 9.5" /> <line x1="425" y1="0" x2="425" y2="530" fill="none" stroke-width="850" stroke="Gainsboro" stroke-dasharray="0.5 9.5" /> <line x1="0" y1="265" x2="550" y2="265" fill="none" stroke-width="550" stroke="gray" stroke-dasharray="1.5 48.5" /> <line x1="250" y1="0" x2="250" y2="550" fill="none" stroke-width="500" stroke="gray" stroke-dasharray="1.5 48.5" /> </g> <marker id="start" viewBox="0 -10 20 20" markerUnits="userSpaceOnUse" refX="0" refY="0" markerWidth="20" markerHeight="20" orient="auto"> <polygon points="0,0 20,-6 16,0 20,6" stroke="black" /> </marker> <marker id="end" viewBox="-20 -10 20 20" markerUnits="userSpaceOnUse" refX="0" refY="0" markerWidth="20" markerHeight="20" orient="auto"> <polygon points="0,0 -20,-6 -16,0 -20,6" stroke="black" /> </marker> <linearGradient id="shade1" x2="50%" y2="0%" spreadMethod="reflect"> <stop offset="0%" stop-color="darkslategray"/> <stop offset="100%" stop-color="white"/> </linearGradient> <g id="can" stroke="black" stroke-linejoin="round" > <rect width="100" height="200" rx="8" ry="8" fill="url(#shade1)" /> <rect width="102" height="5" x="-1" y="-1" fill="url(#shade1)" /> <rect width="102" height="5" x="-1" y="196" fill="url(#shade1)" /> </g> </defs>  <use xlink:href="#grid" /> <g id="drum"> <use xlink:href="#can" transform="translate(300,300) scale(2 1)" /> <use xlink:href="#can" transform="translate(300,366) scale(2 0.33)" /> </g> <use xlink:href="#drum" transform="scale(0.25 0.25)" /> <use xlink:href="#drum" transform="scale(0.5 0.5)" /> <use xlink:href="#drum" transform="scale(0.5 1)" /> <use xlink:href="#drum" transform="scale(1 0.5)" /> <g class="arrow"> <line x1="300" y1="0" x2="300" y2="300" /> <line x1="150" y1="0" x2="150" y2="150" /> <line y1="300" x1="0" y2="300" x2="300" /> <line y1="150" x1="0" y2="150" x2="150" /> </g> <g class="txt"> <text ..... /> </g> </svg>

Chapter8 : CSS Style attributes SVG

2008-07-14T11:20:28Z

SVG でカスケード・スタイル・シート(CSS)を利用する。

SVG ではCSSもサポートサポートされています。Style 属性で指定できるプロパティはスタイルタグ(

W3Cで標準化されている要素、スタイル属性がサポートされているブラウザ、またはSVG Viewerプラグインをインストールしてください。

左の図形は、circle 要素を使って円を１つ描いたものです。group 要素にCSSでプロパティ値を指定したクラス(style1)と、Circle 要素にクラス(dash1)を別々に設定することも出来ます。またFill に放射グラデーションを入れてます。Fill:url(#Gradient2);

HTML文と同じように、効率的に整理されることでファイルサイズが小さくなります。

色の名称はこちらを参考：Name, Hex, RGB of Color

下のコードは上のSVGファイルのコードです。

<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xhtml="http://www.w3.org/1999/xhtml" width="850" height="500"> <desc>CSS style attribute</desc> <title>CSS style attribute</title> <style type="text/css"> <![CDATA[ .style1 {fill:navy; fill-opacity:0.7; stroke:red; stroke-opacity:0.7; stroke-width:20; stroke-opacity:0.75;fill:url(#Gradient2); } .dash1 {stroke-dasharray:7.5 8.2;} .style2 {stroke:green; stroke-width:20; stroke-dasharray:2 7.42; stroke-dashoffset:4; fill:none; fill:url(#Gradient1); } .style3 {stroke:blue; stroke-width:40; stroke-dasharray:3 6.42; fill:yellow; fill-opacity:0.5; } .style4 {stroke:url(#Gradient1); stroke-width:30; stroke-dasharray:30 20; stroke-dashoffset:15; fill:none; fill:url(#Gradient3); } .style5 {stroke-width:25; stroke-dasharray:25 25; stroke-dashoffset:12.5; } .txt {font-family:Impact; /*Arial;*/ font-size:14; fill:url(#Gradient3); } ]]> </style> <defs> <g id="grid"> <line x1="0" y1="250" x2="850" y2="250" fill="none" stroke-width="500" stroke="Gainsboro" stroke-dasharray="0.5 9.5" /> <line x1="425" y1="0" x2="425" y2="400" fill="none" stroke-width="850" stroke="Gainsboro" stroke-dasharray="0.5 9.5" /> </g> <radialGradient id="Gradient1" cx="50%" cy="50%" r="3%" spreadMethod="reflect"> <stop offset="0%" stop-color="blue" stop-opacity="1"/> <stop offset="100%" stop-color="yellow" stop-opacity="1"/> </radialGradient> <radialGradient id="Gradient2" cx="50%" cy="50%" r="10%" spreadMethod="reflect"> <stop offset="0%" stop-color="lime" stop-opacity="1"/> <stop offset="100%" stop-color="red" stop-opacity="1"/> </radialGradient> <radialGradient id="Gradient3" cx="50%" cy="50%" r="100%" spreadMethod="reflect"> <stop offset="0%" stop-color="gold" stop-opacity="1"/> <stop offset="100%" stop-color="navy" stop-opacity="1"/> </radialGradient> </defs>  <use xlink:href="#grid" />  <g class="style1"> <circle class="dash1" cx="100" cy="100" r="75" /> </g>  <g class="style2"> <circle cx="300" cy="100" r="75" /> </g> <circle class="style3" cx="300" cy="100" r="75" />  <g class="style4"> <rect x="450" y="30" width="150" height="150" /> <rect x="500" y="80" width="50" height="50" /> </g>  <g class="style5"> <rect x="680" y="30" width="150" height="150" stroke="white" /> <rect x="705" y="55" width="100" height="100" style="stroke:red; fill:green" /> <rect x="730" y="80" width="50" height="50" style="stroke:blue; fill:url(#Gradient2)" /> </g> <g class="txt">  </g> </svg>

Chapter 7 : Group element & Use element SVG

2008-07-14T00:08:25Z

Group element(グループ要素)と Use element (Use 要素) を利用する

Group 要素は描いた図形をグループ化する役割があります。 Use 要素は、ID を持つ各オブジェクトを xlink:href 属性を使ってリンクによって何度でも使うことができます。これらの2つの要素は構造的に重要な役割を持ち、とても便利なので頻繁に使われます。

]]>

W3Cで標準化されている要素、スタイル属性がサポートされているブラウザ、またはSVG Viewerプラグインをインストールしてください。(FireFoxでは、現時点ではstroke-dasharray がサポートされていないようなので円のストロークが丸い状態になります。）

左側の3つの円と四角の図形は、Group 要素を使ってグループ内のオブジェクトにスタイル属性を指定して描写しています。グループ内のスタイル属性の各プロパティ値を Fill:navy;や Fill-opacity:0.3; というように指定しても、図形で fill:red;fill-opacity:1 と指定されるとこちらが優先されます。右の2種類の顔のオブジェクトはで定義しているオブジェクトのID を指定して、use xlink:href でリンクさせて描写したものです。各図形にID を設定してますので、必要に応じて別々にリンクさせることも出来ます。use 要素で設定する x, y はリンクさせるオブジェクトのx, y 属性で指定したオリジナルの位置からの移動させる値になります。

IEで、Adobe SVG Viewer をインストールしてあれば、Altキーを押したまま上の画面をマウスでドラッグすれば動きます。また、Ctrlキーを押してクリックでズームイン、Ctrl + Shift キーを押してクリックするとズームアウトすることができます。

色の名称はこちらを参考：Name, Hex, RGB of Color

下のコードは上のSVGファイルのコードです。

<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xhtml="http://www.w3.org/1999/xhtml" width="850" height="530"> <desc>defs. of group and use element, with attributes</desc> <title>group and use element</title> <defs> <g id="grid"> <line x1="0" y1="265" x2="850" y2="265" fill="none" stroke-width="530" stroke="Gainsboro" stroke-dasharray="0.5 9.5" /> <line x1="425" y1="0" x2="425" y2="530" fill="none" stroke-width="850" stroke="Gainsboro" stroke-dasharray="0.5 9.5" /> </g>  <g id="smile1"> <circle id="smile1_1" cx="85" cy="50" r="22" stroke-width="10" stroke-dasharray="48 91" stroke-dashoffset="20" stroke-linecap="round" /> <circle id="smile1_2" cx="155" cy="50" r="22" stroke-width="10" stroke-dasharray="48 91" stroke-dashoffset="28" stroke-linecap="round" /> <circle id="smile1_3" cx="120" cy="85" r="40" stroke-width="10" stroke-dasharray="1 50 1 50 90 50" stroke-dashoffset="22" stroke-linecap="round" fill="none" /> </g>  <g id="smile2"> <g id="smile2_1"> <circle cx="700" cy="50" r="22" stroke-width="10" stroke-dasharray="58 81" stroke-dashoffset="30" stroke-linecap="round" fill="none" /> </g> <g id="smile2_2"> <circle cx="750" cy="50" r="22" stroke-width="10" stroke-dasharray="45 112" stroke-dashoffset="22.5" stroke-linecap="round" fill="none" /> </g> <g id="smile2_3"> <circle cx="720" cy="85" r="40" stroke-width="10" stroke-dasharray="1 50 1 50 90 50" stroke-dashoffset="22" stroke-linecap="round" fill="none" /> </g> </g> </defs>  <use xlink:href="#grid" /> <g fill="navy"> <circle cx="50" cy="30" r="25" /> <circle cx="100" cy="30" r="25" fill="red" /> <rect x="125" y="5" width="50" height="50" /> </g> <g style="fill:navy;fill-opacity:0.3"> <circle cx="50" cy="200" r="25" /> <circle cx="100" cy="200" r="25" style="fill:red;fill-opacity:1" /> <rect x="125" y="175" width="50" height="50" /> </g>  <rect x="235" y="10" width="370" height="295" stroke="blue" stroke-width="2.5" fill="none" /> <g style="fill:navy;fill-opacity:0.3"> <circle cx="50" cy="385" r="25" /> <g style="fill:red;fill-opacity:1"> <circle cx="100" cy="385" r="25" /> <rect x="125" y="360" width="50" height="50" /> </g> </g>  <g stroke="orange"> <use xlink:href="#smile1" x="180" y="0"/> </g> <g style="fill:gray;stroke:blue"> <use xlink:href="#smile1_1" x="400" y="0"/> <use xlink:href="#smile1_2" x="400" y="0"/> <g style="stroke:red"> <use xlink:href="#smile1_3" x="400" y="0"/> </g> </g>  <g stroke="green"> <use xlink:href="#smile2" /> </g>  <g stroke="navy"> <use xlink:href="#smile2" x="-400" y="300" /> </g>  <g stroke="SpringGreen"> <use xlink:href="#smile2_1" x="-50" y="250"/> <use xlink:href="#smile2_2" x="-50" y="250"/> <g stroke="Magenta"> <use xlink:href="#smile2_3" x="-50" y="250"/> </g> </g> </svg>

Chapter 6 : Ellipse element SVG

2008-07-12T21:30:17Z

Ellipse element(楕円要素)で描く

Ellipse 要素を使った面白いデザインの形を描いてみたいと思います。

Ellipse element の属性(attribute)は、cx, cy, rx, ry の4つの属性があります。

cx = Ellipseの中心のX軸 (Center)
cy = Ellipseの中心のY軸 (Center)
rx = Ellipseの X軸の半径 (Radius)
ry = Ellipseの Y軸の半径 (Radius)

]]>

W3Cで標準化されている要素、スタイル属性がサポートされているブラウザ、またはSVG Viewerプラグインをインストールしてください。

左のEllipse は、stroke-linecap:butt; （指定されてないので初期値）でストロークがダッシュ間隔で描かれています。2つ目のEllipse は、stroke-linecap:round; ですので丸みが付いてます。またstroke-dasharray:10 20 30 20; と20px間隔で、10pxと30px で交互にストロークが描かれています。右の2つは、複数のEllipse をstroke-dasharray を巧みに使って描かれています。

IEで、Adobe SVG Viewer をインストールしてあれば、Altキーを押したまま上の画面をマウスでドラッグすれば動きます。また、Ctrlキーを押してクリックでズームイン、Ctrl + Shift キーを押してクリックするとズームアウトすることができます。

色の名称はこちらを参考：Name, Hex, RGB of Color

下のコードは上のSVGファイルのコードです。

Chapter 5 : Rect element SVG

2008-07-12T08:31:36Z

Rectangle element(四角形要素)で描く

rect 要素を使った面白いデザインの形を描いてみたいと思います。

rectangle element の属性(attribute)は、x, y, width, height の4つの基本属性に、 rx, ry のオプショナル属性があります。

x = X軸（Rectangle の左上のコーナーの位置）
y = Y軸（Rectangle の左上のコーナーの位置）
width = Rectangle の幅
height = Rectangle の高さ
rx = Rectangle のX軸の丸み(optional attribute)
ry = Rectangle のY軸の丸み(optional attribute)

]]>

W3Cで標準化されている要素、スタイル属性がサポートされているブラウザ、またはSVG Viewerプラグインをインストールしてください。

左の2つのRectangles は、Line 要素やCircle 要素のページで説明したようにストロークをstroke-dasharray で間隔を入れる方法で描いています。

3番目のRectangleは、2つのrectangle を描いています。両方ともFill の色はなしで、青と黒のストロークをstroke-dasharrayを使って描いています。右のRectangleは同じように3つ描いています。一見、とても複雑な模様に見えますがコード自体はとても小さいです。

色の名称はこちらを参考：Name, Hex, RGB of Color

下のコードは、Fill の色を transparent とCSSのように透明設定することも出来ます。これはFill="none"と同じです。stroke の色の初期値はありませんので色を指定しないときはストロークの色はありません。 fill="transparent" fill="none" stroke="transparent" <-- 意味なし

下のコードは上のSVGファイルのコードです。

Chapter 4 : Circle element SVG

2008-07-12T04:18:57Z

前回のLine要素に引き続き、今回はCircle 要素を使って面白いデザインをした形を描いてみたいと思います。

Circle 要素の属性(アトリビュート)には、cx, cy, r があります。

cx = 円の中心のX軸の値
cy = 円の中心のY軸の値
r = 円の半径(radius)の値

]]> Circle 要素の cx, cy, r の属性の他のStyle 属性のプロパティ値はCSS の書き方もサポートされています。以下のコードは２つとも同じ円を描きます。

W3Cで標準化されている要素、スタイル属性がサポートされているブラウザ、またはSVG Viewerプラグインをインストールしてください。

左の円は、少し透明度のある(fill-opacity:0.75;) 赤色の円に青いストロークが間隔を開けて描かれています(stroke-dasharray:15 16.4:)。15px の長さのストロークに16.4px の隙間の間隔があります。

計算の仕方は...半径は、75px ですので、75 × 2 × 3.14 = 471 と円周の距離が求められます。もし15個の間隔でストロークを描きたいのであれば、471 ÷ 15 = 31.4 となりますので、その31.4 を 2つに分けます。上の円のstroke-dasharray は、15 16.4 にしています。もっと細くしたければstroke-dasharray:1 30.4; とすれば30.4px の間隔で1pxのストロークが15個描かれます。

右の２つは円を３つ描いて人の笑顔のようなものを描いてみました。目と口は同じ円です。

SVGがとても強力なグラフィックツールと言われる一つ目の理由はここにあります。テキストのファイルサイズは非常に小さく収まり、拡大しても変わりません。

色の名称はこちらを参考：Name, Hex, RGB of Color

下のコードは上のSVGファイルのコードです。

Chapter 3 : Line element SVG

2008-07-11T23:16:50Z

Line 要素を使って面白いデザインをした形を描いてみたいと思います。

Line 要素の属性(アトリビュート)には、x1,x2,y1,y2 があります。

この始点(x1, y1) と、終点(x2, y2) を指定することで線を描くことが出来ます。スタイル属性のストロークの幅のプロパティ値(stroke-width property)は、初期値が1px になりますので指定されてなければ 1px で描かれます。

下に紹介しているのはLine 要素を多様に使って描いたSVGファイルです。グリッドもLine要素を使って描いています。（通常、グリッドはパターン要素を使って描かれています）

]]>

W3Cで標準化されている要素、スタイル属性がサポートされているブラウザ、またはSVG Viewerプラグインをインストールしてください。

左のLine は、グリッドの背面に描かれています。これは、コードに中でグリッドよりも先に線が描かれているためです。２番目のLine はstroke-dasharray を使ったバーコードのようなLine です。３番目のLine は、stroke-linecap を丸くしてstroke-dasharray を使って描いたLine です。右の図形は、Line を２つ描いています。

下のコードは、LIne要素を使ってグリッドを描いたコードです。stroke-dasharrayを使用して、幅10px (1px stroke幅を 9px) 間隔のグリッドを描いています。タグの中で定義してから、と use xlink を使って描いています。ここでは一度しか使っていませんが、同じ形の図形を何度も使用する場合に使うためのものです。一度、定義しておけば use 要素を使って多様に利用することが可能になりSVG に欠かせない要素です。

下のコードは上のSVGファイルのコードです。

Chapter 2 : SVG Fill & Stroke properties

2008-07-09T07:30:16Z

Fill プロパティ& Stroke プロパティの値を指定して描写するインテリア色とストローク色を設定します。下にサンプル(SVGファイル)と各プロパティ値のテーブル表を作りました。

色の名称はこちらを参考：Name, Hex, RGB of Color

]]>

上の左にある円は、Circleの r 属性(半径)のみに値を設定した場合に描かれる円です。X軸Y軸の位置もFill,Strokeの色等が指定されていませんので、指定されていない値は初期値で描かれてます。下のようなコードを書いても同じような黒い円なります。

四角い図形は、要素の各属性やスタイル属性を指定して描いたものです。x軸、y軸、幅、高さ、fillの色、strokeの色、strokeの幅等に値を設定して描きます。stroke-dasharray は"25 25" と指定されてますので、25px 間隔で 25px の長さのストロークが描かれます。もしこれを、stroke-dasharray="25 25 5 5" と指定すれば、 25px 間隔で 25px の長さのストロークの次に5px 間隔で 5px の長さのストロークが描かれます。これを利用してストロークのラインだけ(line要素)で、バーコードを描くことも出来ます。stroke-dashoffset でストロークの始まりの位置が指定されます。この場合、-12.5px 後にずらした位置から描かれます。stroke-linecap は、図のように、round、butt、square の３種類のラインの両端の形が設定出来ます。また、基本単位はpx ですが、他にも、em、ex、pt、pc、cm、mmなどの単位も使うことが出来ます。

インテリア色を白にしたい場合は、fill="#fff"、fill="#ffffff"、fill="white"、fill="rgb(100%,100%.100%)"、fill="rgb(255,255,255)"　と書くことも出来ます。色の名称は、W3Cで指定されているものは使えます。

色の名称はこちらを参考：Name, Hex, RGB of Color

*Fill プロパティ*
プロパティ	プロパティ値の説明	値の指定	スタイル属性を使った指定	初期値	アニメーション
Fill	インテリアの色を設定	fill="white" fill="#ffffff" fill="rgb(255,255,255)" fill="rgb(100%,100%,100%)"	style="fill:white"	Black	可(Yes)
Fill-opacity	インテリアの色の透明度を設定 0 ～ 1の範囲	fill-opacity="0.5"	style="fill-opacity:0.5"	1	可(Yes)
Fill-rule	図形の内側-外側を交差する線によって設定 nonzero evenodd inherit	fill-rule="nonzero"	style="fill-rule:nonzero"	nonzero	可(Yes)

*Stroke プロパティ*
プロパティ	プロパティ値の説明	値の指定	スタイル属性を使った指定	初期値	アニメーション
stroke	ストロークの色	stroke="#000"	style="stroke:black"	なし(none)	可(Yes)
stroke-width	ストロークの幅	stroke-width="5"	style="stroke-width:5"	1	可(Yes)
stroke-opacity	ストロークの透明度 0～1の範囲	stroke-opacity="0.5"	style="stroke-opacity:0.5"	1	可(Yes)
stroke-linecap	ストロークの端の形 butt round square inherit	stroke-linecap="butt"	style="stroke-linecap:butt"	butt	可(Yes)
stroke-linejoin	ストロークの角の形 miter round bevel inherit	stroke-linejoin="miter"	style="stroke-linejoin:miter"	miter	可(Yes)
stroke-dasharray	ストロークのダッシュのパターン設定 none inherit	stroke-dasharray="1 10"	style="stroke-dasharray:1 10"	なし(none)	可(Yes)
stroke-dashoffset	ストロークのダッシュのオフセット設定 inherit	stroke-dashoffset="-5"	style="stroke-dashoffset:-5"	0	可(Yes)
stroke-miterlimit	ストロークの角の限界比率	stroke-miterlimit="1"	style="stroke-miterlimit:1"		可(Yes)

下のコードは、上のSVGファイルのコードです。のGroup要素や、Transformを使用したコーディーネートシステムを利用しています。それらの要素は大変重要な位置付けがされています。後の記事で具体的な説明を加えていきます。

<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xhtml="http://www.w3.org/1999/xhtml" width="850" height="400"> <desc>fill stroke figures</desc> <title>fill stroke figures</title> <defs> <rect id="bg" x="0" y="0" width="850" height="400" fill="#f9f9f9" /> <rect id="rect1" width="175" height="50" style="fill:pink; stroke:blue;stroke-width:20;stroke-opacity:0.7"/> <g id="r1" style="stroke-linejoin:round"> <use xlink:href="#rect1" transform="translate(620,20)" /> <g id="r2" style="stroke-linejoin:bevel"> <use xlink:href="#rect1" transform="translate(620,110)" /> <g id="r3" style="stroke-linejoin:miter"> <use xlink:href="#rect1" transform="translate(620,200)" /> <g id="r4" style="stroke-miterlimit:1"> <use xlink:href="#rect1" transform="translate(620,290)" /> </g> </g> </g> </g> </defs> <use xlink:href="#bg" /> <use xlink:href="#r1" /> <text x="650" y="95" font-family="Arial" font-size="15">stroke-linejoin:round</text> <text x="650" y="185" font-family="Arial" font-size="15">stroke-linejoin:bevel</text> <text x="650" y="275" font-family="Arial" font-size="15">stroke-linejoin:miter</text> <text x="650" y="365" font-family="Arial" font-size="15">stroke-miterlimit:1 (0-1)</text> <g id="figure1"> <circle r="150" /> <rect x="175" y="10" width="150" height="150" fill="darkblue" stroke="yellow" stroke-width="15" stroke-dasharray="25 25" stroke-dashoffset="-12.5" stroke-linecap="round"/> <line x1="400" y1="20" x2="400" y2="170" stroke="#000" stroke-width="30" stroke-linecap="butt" /> <line x1="480" y1="20" x2="480" y2="170" stroke="darkgreen" stroke-width="30" stroke-linecap="round" /> <line x1="560" y1="20" x2="560" y2="170" stroke="red" stroke-width="30" stroke-linecap="square" /> <text x="75" y="230" font-family="Arial" font-size="15" text-anchor="middle"><circle r="150" /></text> <text x="380" y="210" font-family="Arial" font-size="15">butt</text> <text x="460" y="210" font-family="Arial" font-size="15">round</text> <text x="540" y="210" font-family="Arial" font-size="15">square</text> <text x="380" y="250" font-family="Arial" font-size="15"><line x1="400" y1="20"</text> <text x="380" y="270" font-family="Arial" font-size="15">x2="400" y1="170"</text> <text x="380" y="290" font-family="Arial" font-size="15">stroke="#000" stroke-width="30"</text> <text x="380" y="310" font-family="Arial" font-size="15">stroke-linecap="butt" /></text> <text x="150" y="230" font-family="Arial" font-size="15"><rect x="10" y="10"</text> <text x="150" y="250" font-family="Arial" font-size="15"> width="70" height="70"</text> <text x="150" y="270" font-family="Arial" font-size="15"> fill="darkblue" stroke="yellow"</text> <text x="150" y="290" font-family="Arial" font-size="15"> stroke-width="15"</text> <text x="150" y="310" font-family="Arial" font-size="15"> stroke-dasharray="25 25" </text> <text x="150" y="330" font-family="Arial" font-size="15"> stroke-linecap="round" </text> <text x="150" y="350" font-family="Arial" font-size="15"> stroke-dashoffset="-12.5"/ ></text> </g> </svg>

Chapter 1 : About SVG

2008-07-08T04:41:13Z

IEでSVGを見るためにはプラグインが必要です。ここで紹介するSVGは、W3CのWeb標準に則ったもので最も普及しているAdobe SVG Viewer 等で見ることができます。

SVG Viewer:

SVG(Scalable Vector Graphics)は、W3Cによってデザイン、開発された強力なオープンソースのベクターグラフィック言語です。Web標準化され、数多くの機能を持ったテキストベースのXML文法を使って記述されます。

ビットマップ形式
ビットマップグラフィックス(Bitmap graphics)のクラスに属するものををラスターグラフィックス(Raster graphics)と呼びます。ラスターグラフィックスは画像のピクセル(Pixel=Picture element)のマトリックス情報を格納する形式で描写されます。よってラスターイメージは、画像が拡大されたとき描写される画素数（ピクセル数）が少なくなるため画質が落ちます。

主なビットマップ形式(Bitmap Graphic)
拡張子	Name(正式名称)
JPEG(.jpg)	Joint Photographic Experts Group
GIF(.gif)	Graphics Interchange Format
PNG(.png)	Portable Network Graphics

ベクターグラフィックスはXML文法で、イメージやフォントの形の位置、大きさ、色などを明確なXML文法を元に指定して描写されますので、拡大されても画質が落ちることは基本的^*1にありません。

^*1円の描写には円周率が用いられますが、円周率を3.14...から最後まで正確に求めることは不可能ですので完全な円を描くことはできません。そのような理由から計算されるπは一定の範囲に納められてますのでカーブの画質の限界はあります。

下の画像は円を描いたものです。円は"circle"タグを使って描きます。

]]>

上のSVG画像は、IE+Adove SVG Viewerプラグインで、Altキーを押したままマウスでドラッグさせると動かすことが出来ます。またCtrlキーを押したままクリックでズームイン、Ctrl+Shiftを押してクリックでズームアウトします。(FIreFoxでは、特定の属性がサポートされていないようです。）

// SVG1.0 <?xml version="1.0" encoding="UTF-8" standalone="no" ?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/SVG/DTD/svg10.dtd"> // SVG tag <svg width="600" height="300"> <g id="circle">　// g--->group element <circle cx="125" cy="125" r="50" stroke="blue" stroke-width="75" stroke-dasharray="2 8.5" fill="yellow" fill-opacity="0.75" /> <text x="125" y="230" font-family="Arial" font-size="15" text-anchor="middle">circle with dasharray stroke</text> </g> </svg>

このコードは上の円とテキストを描いたXMLコードです。XML文の中にSVGタグを入れて、その中で図形やテキストなどのコードを記入します。
<---要素(エレメント)
cx="125" cy="125" r="50" <---"Circle"要素の属性(アトリビュート)

テキストタグの中の、circle with dasharray stroke をコンテンツと呼びます。

"Circle"要素の各属性のプロパティ値
cx属性のプロパティ値 = 125 (円の中心のX軸 (指定された範囲内の左からの距離))
cy属性のプロパティ値 = 125 (円の中心のY軸 (指定された範囲内の上からの距離))
r属性のプロパティ値 = 50 (円の半径)

strokeプロパティの値 = Blue
stroke-widthプロパティの値 = 75
strokeプロパティの値 = Blue

...... またこれらのstyleに関する属性は、style属性にまとめて書くことが出来ます。 <circle cx="125" cy="125" r="50" style="stroke:blue; stroke-width:75; stroke-dasharray:2 8.5; fill:yellow; fill-opacity:0.75" />

Animation
シンプルなアニメーションは、SMIL animation で動かしたり色を変化させたりすることが出来ます。またJavaScript に少し似た ECMAScript と呼ばれるプログラム言語でブラウザ上でゲームや複雑なアニメーションを実現することが出来ます。ECMAは、European Computer Manufacturers Association を略した呼び名です。