まえがき
SVG
SVGとはScalable Vector Graphicsの略。XML形式でイメージを定義します。
標準的な SVG 作成文：
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://..org/Graphics/SVG/.1/DTD/.dtd">
<svg xmlns="http://..org/2000"/svg" version="1.1">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red" />
</svg>
最初の行はXML宣言です。standalone 属性に注意！この属性は SVG ファイルが「スタンドアロン」なのか、外部ファイルへの参照を含んでいるのかを指定します。
standalone="no" は SVG 文書が外部ファイル - この場合は DTD ファイル - を参照することを意味します。
2行目と3行目はこの外部SVG DTDを参照しています。 DTDは にあります。この DTD は W3C にあり、許可されたすべての SVG 要素を含んでいます。
SVG コードは
SVGは円を作るのに使われます。 cxとcy属性は円の中心のxとy座標を定義します。これら二つの属性が無視された場合、円の点は .r に設定されます。 r 属性は円の半径を定義します。
strokeとstroke-widthプロパティは、図形のアウトラインの表示方法を制御します。円の輪郭の幅を 2px に設定し、黒い境界線を付けます。
fill プロパティは、シェイプの内側の色を設定します。塗りつぶしの色を赤に設定します。
close タグは SVG 要素と文書自体を閉じる役割を果たします。
SVG
全ての要素について、SVGはCanvasで使われているのと同様の座標系（グリッドシステム）を使います。この座標系は次のようなものです：ページの左上隅が座標点、座標はピクセル単位、x軸の正方向は右方向、y軸の正方向は下方向。これは、あなたが子供の頃に教わった絵の描き方とは正反対であることに注意してください。しかし、HTML文書では、要素はこのように配置されます。
SVGHTML の埋め込み方
SVG ファイルは次のタグで HTML 文書に埋め込むことができます： , , または .
SVGコードはHTMLページに直接埋め込むことも、SVGファイルに直接リンクすることもできます。
<embed>
利点：すべての主要なブラウザでサポートされており、スクリプトが使用できます。
短所：HTML4やXHTMLでの使用は推奨されていません。
<embed src="circle1.svg" type="image/svg+xml" />
<object>
利点：すべての主要ブラウザでサポートされており、HTML4、XHTML、HTML5標準をサポートしています。
短所：スクリプトは使用できません。
<object data="circle1.svg" type="image/svg+xml"></object>
<iframe>
利点：すべての主要なブラウザでサポートされており、スクリプトが使用できます。
短所：HTML4やXHTMLでの使用は推奨されていません。
<iframe src="circle1.svg"></iframe>
直接埋め込み
<svg xmlns="http://..org/2000"/svg" version="1.1">
<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
</svg>
文書のリンク
www.w3.org/Graphics/SVことも可能です。
<a href="circle1.svg">View SVG file</a>
SVG基本図形
長方形
<svg xmlns="http://..org/2000"/svg" version="1.1">
<rect width="300" height="100"
style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)"/>
</svg>
- rect要素の width属性と height属性は、矩形の高さと幅を定義します。
- style属性はCSSプロパティを定義するのに使われます。
- CSS fillプロパティは、矩形の塗りつぶしの色を定義します。
- CSSのstroke-widthプロパティは、矩形の枠線の幅を定義します。
- CSSのstrokeプロパティは、矩形の枠線の色を定義します。
<svg xmlns="http://..org/2000"/svg" version="1.1">
<rect x="50" y="20" width="150" height="150"
style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;
stroke-opacity:0.9;opacity:0.5"/>
</svg>
- x プロパティは、矩形の左辺の位置を定義します。
- y属性は矩形の上端位置を定義します。
- CSS fill-opacityプロパティは、塗りつぶし色の透明度を定義します。
- CSSのstroke-opacityプロパティは、アウトラインの色の透明度を定義します。
- CSSのopacityプロパティは、要素の透明度の値を定義するために使用されます。
丸みを帯びた長方形：
<svg xmlns="http://..org/2000"/svg" version="1.1">
<rect x="50" y="20" rx="20" ry="20" width="150" height="150"
style="fill:red;stroke:black;stroke-width:5;opacity:0.5"/>
</svg>
rx と ry プロパティは矩形の角を丸めます。
円形
<svg xmlns="http://..org/2000"/svg" version="1.1">
<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
</svg>
- cx属性とcy属性は、円の点のx座標とy座標を定義します。cx と cy が省略された場合、円の中心は
- r属性は円の半径を定義します。
楕円
楕円は円によく似ています。違いは、楕円は x と y の半径が異なるのに対して、円は x と y の半径が同じであることです：
<svg xmlns="http://..org/2000"/svg" version="1.1">
<ellipse cx="300" cy="80" rx="100" ry="50"
style="fill:yellow;stroke:purple;stroke-width:2"/>
</svg>
- RXプロパティで定義される水平半径
- RY属性で定義される垂直半径
直線
<svg xmlns="http://..org/2000"/svg" version="1.1">
<line x1="0" y1="0" x2="200" y2="200"
style="stroke:rgb(255,0,0);stroke-width:2"/>
</svg>
- x1 プロパティは、X 軸上の線の始点を定義します。
- y1 プロパティは、Y 軸上の線の始点を定義します。
- x2 プロパティは、X 軸上の線の終点を定義します。
- y2プロパティは、Y軸上の線の終点を定義します。
多角形
<svg height="210" width="500">
<polygon points="200,10 250,190 160,210"
style="fill:lime;stroke:purple;stroke-width:1"/>
</svg>
points プロパティは、ポリゴンの各コーナーの x 座標と y 座標を定義します。
スターのタイプ
<svg height="210" width="500">
<polygon points="100,10 40,198 190,78 10,78 160,198"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:nonzero;" />
</svg>
<svg height="210" width="500">
<polygon points="100,10 40,198 190,78 10,78 160,198"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>
曲線
<svg xmlns="http://..org/2000"/svg" version="1.1">
<polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160" style="fill:white;stroke:red;stroke-width:4" />
</svg>
