SVG Weblog http://www.samurai-logic.com/svg/ ja Copyright 2009 Wed, 23 Jul 2008 20:53:03 +0900 http://www.sixapart.com/movabletype/ http://www.rssboard.org/rss-specification Chapter 10 : Polygon & Polyline element SVG Polygon element(ポリゴン要素)と Polyline element (ポリライン要素)で描く

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

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

polygon.png

polyline.png

]]> http://www.samurai-logic.com/svg/2008/07/chapter-10-polygon-polyline-el.html http://www.samurai-logic.com/svg/2008/07/chapter-10-polygon-polyline-el.html Polygon & Polyline element polygon polyline Wed, 23 Jul 2008 20:53:03 +0900 Chapter 9 - 5 : SVG & Canvas Matrix Transformation これは、SVG & Canvas で使われているMatrix Transformation をJavascript で計算して値を求めるためのツールです。そのMatrix値を使ってCanvas に描くようにしました。Matrix は、3×3ですので2Dです。3Dは4×4のマトリックスになります。

How to : & example
input value of translate(txty) ---> translate(50,40)
input value of scale(sxsy) ---> 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 出来ません。

matrix.png

]]> http://www.samurai-logic.com/svg/2008/07/chapter-9-5-svg-canvas-matrix.html http://www.samurai-logic.com/svg/2008/07/chapter-9-5-svg-canvas-matrix.html Canvas Matrix Transform attribute Canvas Matrix Transform Wed, 23 Jul 2008 14:51:30 +0900 Chapter 9 - 4 : Transform attribute (skewX, skewY) SVG skewX, skewY から構成されるスキュー・トランスフォーメーションは、その形状からシアリング(shearing) と呼ばれたりします。

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

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

skew.png

]]> http://www.samurai-logic.com/svg/2008/07/chapter-9-4-transform-attribut.html http://www.samurai-logic.com/svg/2008/07/chapter-9-4-transform-attribut.html Transform attribute Translate skewX skewY skewX skewY Fri, 18 Jul 2008 22:01:41 +0900 Invader Game SVG Svg で書かれた懐かしのインベーダーゲームです。

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

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

invader.JPG

]]> http://www.samurai-logic.com/svg/2008/07/invader-game-svg.html http://www.samurai-logic.com/svg/2008/07/invader-game-svg.html Game game Fri, 18 Jul 2008 17:06:32 +0900 Chapter 9 - 3 : Transform attribute (negative scale)SVG transform 属性の、scale のプロパティ値がマイナスになった場合、オブジェクトはミラーリング(mirroring)します。Chapter 9 の今回のセクションでは、これにrotate, translate などをミックスさせた位置関係を説明します。

transfrom scale

]]> http://www.samurai-logic.com/svg/2008/07/chapter-9-3-transform-attribut-1.html http://www.samurai-logic.com/svg/2008/07/chapter-9-3-transform-attribut-1.html Rotate Scale Transform attribute Translate rotate scale transform translate Fri, 18 Jul 2008 07:23:49 +0900 Chapter 9 - 2 : Transform attribute (rotate)SVG 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 があるので有効です）

]]> http://www.samurai-logic.com/svg/2008/07/chapter-9-2-transform-attribut.html http://www.samurai-logic.com/svg/2008/07/chapter-9-2-transform-attribut.html Rotate Transform attribute Translate Transform rotate Wed, 16 Jul 2008 20:56:43 +0900 Chapter 9 - 1 : Transform attribute (translate, scale) SVG 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

]]> http://www.samurai-logic.com/svg/2008/07/chapter-9-transform-attribute.html http://www.samurai-logic.com/svg/2008/07/chapter-9-transform-attribute.html Scale Transform attribute Translate Transform scale translate Tue, 15 Jul 2008 10:14:16 +0900 Chapter8 : CSS Style attributes SVG SVG でカスケード・スタイル・シート(CSS)を利用する。

SVG ではCSSもサポートサポートされています。Style 属性で指定できるプロパティはスタイルタグ(<style>)の中で設定することが出来ます。Fill & Stroke プロパティの他に、線形グラデーション、放射グラデーション、Fillter Effect などがあります。

fill, fill-opacity, stroke, stroke-opacity, stroke-width, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, linerGradient, radialGradient,　Fillter, etc.

]]> http://www.samurai-logic.com/svg/2008/07/css-style-attributes-svg.html http://www.samurai-logic.com/svg/2008/07/css-style-attributes-svg.html CSS Style attribute CSS style attribute Mon, 14 Jul 2008 20:20:28 +0900 Chapter 7 : Group element & Use element SVG Group element(グループ要素)と Use element (Use 要素) を利用する

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

<use xlink="ID" .... />

]]> http://www.samurai-logic.com/svg/2008/07/chapter-7-group-element-use-el.html http://www.samurai-logic.com/svg/2008/07/chapter-7-group-element-use-el.html Group emement group use Mon, 14 Jul 2008 09:08:25 +0900 Chapter 6 : Ellipse element SVG 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)

ellipse.png

]]> http://www.samurai-logic.com/svg/2008/07/ellipse-element-svg.html http://www.samurai-logic.com/svg/2008/07/ellipse-element-svg.html Ellipse element Ellipse element Sun, 13 Jul 2008 06:30:17 +0900 Chapter 5 : Rect element SVG 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)

rect.png

]]> http://www.samurai-logic.com/svg/2008/07/rect-element-svg.html http://www.samurai-logic.com/svg/2008/07/rect-element-svg.html Rect element rectangle element Sat, 12 Jul 2008 17:31:36 +0900 Chapter 4 : Circle element SVG 前回のLine要素に引き続き、今回はCircle 要素を使って面白いデザインをした形を描いてみたいと思います。

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

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

]]> http://www.samurai-logic.com/svg/2008/07/circle-element-svg.html http://www.samurai-logic.com/svg/2008/07/circle-element-svg.html Circle element circle element Sat, 12 Jul 2008 13:18:57 +0900 Chapter 3 : Line element SVG Line 要素を使って面白いデザインをした形を描いてみたいと思います。

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

xy.png

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

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

]]> http://www.samurai-logic.com/svg/2008/07/line-element-svg.html http://www.samurai-logic.com/svg/2008/07/line-element-svg.html Line element line element Sat, 12 Jul 2008 08:16:50 +0900 Chapter 2 : SVG Fill & Stroke properties Fill プロパティ& Stroke プロパティの値を指定して描写するインテリア色とストローク色を設定します。下にサンプル(SVGファイル)と各プロパティ値のテーブル表を作りました。

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

]]> http://www.samurai-logic.com/svg/2008/07/svg-fill-stroke-properties.html http://www.samurai-logic.com/svg/2008/07/svg-fill-stroke-properties.html Fill & Stroke Fill stroke Wed, 09 Jul 2008 16:30:16 +0900 Chapter 1 : About SVG IEでSVGを見るためにはプラグインが必要です。ここで紹介するSVGは、W3CのWeb標準に則ったもので最も普及しているAdobe SVG Viewer 等で見ることができます。

SVG Viewer:

Adobe 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"タグを使って描きます。

]]> http://www.samurai-logic.com/svg/2008/07/about-svg.html http://www.samurai-logic.com/svg/2008/07/about-svg.html Introduction svg Tue, 08 Jul 2008 13:41:13 +0900