SVGタグ
「SVGタグ」は、ベクターグラフィックです。（「canvasタグ」は、ビットマップイメージです。）
SVG＝ScalableVectorGraphics
「SVGタグ」で図形を作成する場合は、すべて「svg要素」内に記述します。
「canvasタグ」よりもかなり簡単に絵画できます。
「SVGタグ」は、「X軸＝横方向」と「Y軸＝縦方向」を基本にして、 位置や範囲を指定します。
□形の作成
まずは、「width」属性と「height」属性で絵画領域を指定します。
「rect」要素は「□形」を絵画する要素です。
図の左上の座標「x（W＝X０～距離）、y（h＝Y０～距離）」と図の幅「width」図の高さ「height」等の属性を設定すると「□形」が絵画できます。
「fill」塗りつぶしの属性で「stroke」は、枠線の属性です。
色の属性は、「rbg」標記や「rbga」標記（透明度）や１６進数表記で利用できます。
「rx」か「ry」のどちらか一方を指定すると角丸になります。
＜svg width="７００" height="３００"＞
＜rect x="５０" y="５０" width="６００" height="２００" fill="rgb(255,0,0)" ry="10"＞＜/rect＞
＜/svg＞
真円の作成
まずは、「width」属性と「height」属性で絵画領域を指定します。
「circle」要素は「真円」を絵画する要素です。
図の左上の座標「cx（W＝X０～円心の距離）、cy（h＝Y０～円心の距離）」と図の半径「r」属性を設定すると「真円」が絵画できます。
「fill」塗りつぶしの属性で「stroke」は、枠線の属性です。
色の属性は、「rbg」標記や「rbga」標記（透明度）や１６進数表記で利用できます。
＜svg width="７００" height="３００"＞
＜circle cx="３５０" cy="１５０" r="１００" fill="#ffff00"＞＜/circle＞
＜/svg＞
楕円形の作成
まずは、「width」属性と「height」属性で絵画領域を指定します。
「ellipse」要素は「楕円形」を絵画する要素です。
図の左上の座標「cx（W＝X０～円心の距離）、cy（h＝Y０～円心の距離）」、
「rx」は、横方向の半径で、「ry」は縦方向の半径で、
各属性を設定すると「楕円形」が絵画できます。
「fill」塗りつぶしの属性で「stroke」は、枠線の属性です。
色の属性は、「rbg」標記や「rbga」標記（透明度）や１６進数表記で利用できます。
＜svg width="７００" height="３００"＞
＜ellipse cx="３５０" cy="１５０" rx="３００" ry="１００"fill="rgba(255,0,0,0.5)"＞＜/ellipse＞
＜/svg＞
直線の絵画
まずは、「width」属性と「height」属性で絵画領域を指定します。
「line」要素は「直線」を絵画する要素です。
「x1」と「y1」は始点で、「x2」と「y2」は終点です。
「stroke」属性で色を指定します。指定しないと絵画されません。
色の属性は、「rbg」標記や「rbga」標記（透明度）や１６進数表記で利用できます。
「stroke-width」属性は直線の幅です。
＜svg width="７００" height="３００"＞
＜line x1="５０" y1="５０" x2="６５０" y2="２５０" stroke="red" stroke-width="3"＞＜/line＞
＜line x1="５０" y1="１５０" x2="６５０" y2="１５０" stroke="yellow" stroke-width="3"＞＜/line＞
＜line x1="５０" y1="２５０" x2="６５０" y2="５０" stroke="blue" stroke-width="3"＞＜/line＞
＜/svg＞
線形グラデーションの作成
まずは、「width」属性と「height」属性で絵画領域を指定します。
次に、「rect」要素で「グラデーション」の領域を指定します。
図の左上の座標「x、y」と図の幅「width」図の高さ「height」等の属性を設定するとグラデーションの領域を指定できます。
線形グラデーションは、「lineargradient」要素でグラデーションを作って「id」を設定します。
適用したい要素の塗りを「id」で指定します。
「x１」、「y１」は色の始点で、「x２」、「x２」は色の終点で、「％」で指定する必要があります。
色の設定は、「lineargradient」の中に「stop」要素を色の数だけ作成して、 位置と色を指定します。
「offset」属性はその色の位置で、「stop-color」は色です。
＜svg width="７００" height="３００"＞
＜rect x="５０" y="５０" fill="url(#red-grad)" width="６００" height="２００" ＞＜/rect＞
＜lineargradient id="red-grad" x１="０" y１="０" x２="１００%"y２="１００%"＞
＜stop offset="０%" stop-color="#ff0000"＞＜/stop＞
＜stop offset="５０%" stop-color="#ffffff"＞＜/stop＞
＜stop offset="１００%" stop-color="#ff0000"＞＜/stop＞
＜/lineargradient＞
＜/svg＞
円形グラデーション
円形グラデーションは、内側から外側の円に向かって色が変化していくイメージで色を指定します。
円形グラデーションは、「radialgradient」要素でグラデーションを作って「id」を設定します。
円形グラデーションは、実際にコードを触ってみると理解しやすいです。
＜svg width="７００" height="３００"＞
＜rect x="５０" y="５０" fill="url(#blue-grad)" width="６００" height="２００" ＞＜/rect＞
＜radialgradient id="blue-grad" cx="３０%" cy="３０%" r="１００%" fx="７０%" fy="７０%" ＞
＜stop offset="０%" stop-color="#0000ff"＞＜/stop＞
＜stop offset="５０%" stop-color="#ffffff"＞＜/stop＞
＜stop offset="１００%" stop-color="#0000ff"＞＜/stop＞
＜/radialgradient＞
＜/svg＞
パターンで塗りつぶす
「パターン」で塗りつぶす場合は、「pattern」要素で囲みます。 「width」と「height」で繰り返す最小値を決めます。
「patternUnits」は、「width」と「height」の座標系を定義する属性です。
あとは「fill」に「id」を指定してパターンで塗りつぶされます。
＜svg width="７００" height="３００"＞
＜rect x="５０" y="５０" fill="url(#dot-pattern)" width="６００" height="２００" ＞＜/rect＞
＜pattern id="dot-pattern" patternUnits="userSpaceOnUse" width="２０" height="２０"＞
＜circle cx="５" cy="５" r="５" fill="#ffff00"＞＜/circle＞
＜/pattern＞
＜/svg＞
テキスト
「SVGタグ」では「テキスト」を絵画することもできます。
テキストをストロークで縁取りしたり、グラデーションで塗りつぶす等、 CSSではできない表現も可能になります。
テキストで絵画する場合、絵画したい文字列を「text」要素で囲みます。 文字の大きさは、「font-size」で、太さは「font-weight」で、設定します。
「text-anchor」は、文字を揃える位置を変更する属性です。 「start」で左揃え「middle」で中央揃え「end」で右揃えです。 そして、「fill」塗りつぶし「stroke」で縁取りとなります。
「tspan」要素は「text」要素の子として使用し、 「text」要素と同じ属性を使用して、色や大きさ等を変えたい場合等に使用します。
「textPath」要素は「text」要素の子として使用し、 「xlink:href」属性に「path」の「id」を指定することで文字をパスに沿わせることができます。
＜svg width="７００" height="３００"＞
＜text x="１００" y="１００" font-size="２４" font-weight="nomal" font-family="メイリオ" text-anchor="start" fill="#0000ff"＞
HTML５で＜tspan font-size="３６" fill="#0000ff"＞ホームページを制作しよう！＜/tspan＞
＜/text＞
＜path id="path" d="M １００ ２５０ L ３５０ １５０ L ６００ ２５０" fill="none" stroke="#ff0000"＞＜/path＞
＜text font-size="１６" font-family="メイリオ" fill="#008000"＞
＜textPath xlink:href="#path"＞HTML５でホームページを制作しよう！SVGでテキストを利用しよう！＜/textPath＞
＜/text＞
＜/svg＞
