So-net無料ブログ作成

SVGの要素 [SVG]

何があるのかが分かってきましたが、まだまだもやもやしていているので、出てきたSVGの要素についてどういう意味があるのかまとめておきます。

svgSVG文書はこの要素の中に書かれる。svg要素は他のXML文書の中に書き込めるらしい。ただし、svg要素の中にsvg要素をネストすることはできないとのこと。
xmlns名前空間の定義。「http://www.w3.org/2000/svg」固定?
xmlns:xlink
widthSVG文書の幅を示す。負の値は取れない。数値と単位で示す。単位は、in、cm、mm、pt、pc、px、%のいずれか。%はviewportの幅に対する割合となる。
heightSVG文書の高さを示す。負の値は取れない。数値と単位で示す。単位は、in、cm、mm、pt、pc、px、%のいずれか。%はviewportの高さに対する割合となる。
viewBox内包するグラフィック要素が収まるべきviewportの指定を行う。値はmin-x、min-y、width、heightの順にスペースかコンマで区切って指定するか、もしくはnoneとするとのこと。
versionSVGのバージョン。1.0、1.1、1.2のいずれかを指定。
baseProfileSVGのプロファイル。none、full、basic、tinyのいずれかを指定。
titleSVG文書のタイトル。プレインテキストで、SVG文書内に1つ以上含むことができる様子。
descSVG文書の説明。プレインテキストで、より詳細に記述するとのこと。こちらもSVG文書内に1つ以上含むことができる様子。
defs参照される要素を定義するためのコンテナ要素(?)。マクロ定義的な要素でしょうか?詳細不明(と言うか、必要になったら見ます)。
ggraphics elements」関連をグルーピングするためのコンテナ要素。
fillグラフィック要素の内部が塗りつぶされるべきかどうかを指定する。値は、none、currentColor、sRGBによる表記(?)、Functional IRIでの表記(?)、System paintによる表記(?)、inheritがある様子。HTMLで行われている表記も利用できる様子。
stroke線を描画する際のペン先を決める。値は、こちらの表記か、inherit。色などでいい様子。
fill-opacity現在のオブジェクトの内部を描画する際の透過度を指定する様子。0-1の間の任意の値かinheritを設定
vector-effectオブジェクトのアウトラインの幅を制御するためのものの様子。例えば、2pxの幅の線があった時、拡大表示されてもその線の幅を2pxに維持したい時などに使用するとか。値は、non-scaling-stroke、none、inherit。non-scaling-strokeで、幅を維持する設定になる様子。
stroke-width詳しい説明が見当たらないんですが、名前から線の幅でしょうね。値は数値もしくは、inheritで、値は現在のユーザー座標系に従うらしいです。
fill-rule描画された「形」の「内部」の決め方を指定。値はnonzero、evenodd、inherit」の3種。が、外か内かの決定のアルゴリズムがちゃんと理解できません・・。
stroke-linecap線分の終端の形を指定する様子。値は、butt、round、squareで、buttは終端を描かない、roundは丸く、squareは四角く描画するとのこと。
stroke-linejoin線分の接合点の形を指定する様子。値はmiter、round、bevelで、miterはきれいな角を、roundは丸まった角を、bevelは平坦な角を描く様子。
stroke-opacity描画する線の透過度を指定する様子。0-1の間の任意の値かinheritを指定するとのこと。
transform座標系の方法の指定の様子。値は<transform-list><transform-ref>、noneのいずれかを取るとのこと。今回のデータで設定されているmatrix(1,0,0,1,0,0) は特に変換しないことを示している様子
font-familyfont関連の様ですが、今回は文字は扱っていないので、とりあえず無視しておきます。
font-size
font-weight
font-style
pathmoveto、lineto、curveto、closepathで複数の点を指定することにより、形の輪郭を描画するとのこと。
fill-ruleg要素の項目を参照。
d形のアウトラインを定義する。「moveto」「lineto」「curveto」「closepath」で指定。データに出てきている「M」「L」はそれぞれ、「moveto」「lineto」を意味する。
【参考】8.3 Path data - SVG Tiny 1.2
polylinebasic shape」として分類される要素の一つ。線分の組み合わせで閉じていない線の定義に使用。
fillg要素の項目を参照。
points線を構成する点の集合。座標はユーザー定義の座標系上の値。svg要素のviewBoxで定義するもののようです。X座標、Y座標を「,」で並べ、各点をスペースで区切る様子。


を見ていると、svg要素のviewBoxアトリビュートで指定した値が各グラフィック要素で指定する点の座標系になるように思えます。で、実際の表示についてはwidthアトリビュートなどと合わせて変換することになるのか・・?と言うのが、今の理解です。座標系については、もっとちゃんと読んで理解しないとだめな感じですね・・・。


ま、とりあえず次回から、ここまでの知識でSVGから内部データの変換を試みてみます。つづく。

【参考】
Scalable Vector Graphics (SVG) Tiny 1.2 Specification - W3C
Scalable Vector Graphics - Wikipedia






デル株式会社

ブログを作る(無料) powered by So-netブログ

この広告は前回の更新から一定期間経過したブログに表示されています。更新すると自動で解除されます。

×

この広告は1年以上新しい記事の更新がないブログに表示されております。