拡大/縮小しても描写が崩れないSVG。アイコンや背景素材としてもすっかりポピュラーになりました。
今回はpathなどを使う複雑なものではなく、丸や長方形のような基本的な図形をsvgで描写しようという記事です。cssとはあまり関係ないのですが、自分の備忘録も兼ねて書くことにします。
最初にまとめ
svg図形の基本
svgはwidth 、heightで指定した範囲をキャンパスとして図形描画を行います。
svgの図形描画では、pxを単位として描画のための始点・終点などを指定します。width・heightも含め、基本的にはhtml側に記述します。
図形の装飾に用いるstroke（≒ border）やfillなどはcssに記述しても構いません。
rect 長方形を描画
rectは長方形を描画します。
x , y で始点の座標を指定し、width , heightで大きさを指定します。
<svg width="200" height="50">
<rect x="20" y="10" width="160" height="30">
</rect>
</svg>See the Pen oNbRYVW by Takashi Abe (@TakeshiAbe) on CodePen.
rx、 ry値を指定するとｘ方向・y方向の角の丸みを指定できます（≒ border-radius）
rx=”10″ ry=”10″ を追記
<svg width="200" height="50">
<rect x="20" y="10" rx="10" ry="10" width="160" height="30">
</rect>
</svg>See the Pen svg rect2 by Takashi Abe (@TakeshiAbe) on CodePen.
circle 円の描画
円です。
cx , cy で中心座標を指定し、r で半径の長さを指定します。
<svg>
<circle cx="100" cy="25" r="20">
</circle>
</svg>See the Pen svg circle by Takashi Abe (@TakeshiAbe) on CodePen.
ellipse 楕円
circle ・ ellipse と続くと放射状グラデーションの「radial-gradient」を思い出します。
ellipse は楕円を描写します。
circle同様にcx , cy で中心点を指定し、rx でx方向の半径。ryでy方向の半径を指定します。
<svg>
<ellipse cx="100" cy="25" rx="40" ry="20">
</ellipse>
</svg>See the Pen svg ellipse by Takashi Abe (@TakeshiAbe) on CodePen.
line
直線です。
x1とy1で始点を指定。 x2とy2で終点を指定し、２つの点を結ぶ直線を描きます。
lineは、stroke（縁取りの色）、 stroke-width（縁取りの大きさ）を指定しなければ表示されません。
<svg>
<line x1="20" y1="10" x2="180" y2="40" stroke="tomato" stroke-width="5">
</line>
</svg>See the Pen svg line by Takashi Abe (@TakeshiAbe) on CodePen.
polyline
始点・通過点（複数）・終点をつなぐ折れ線を描きます。
x y の座標を、カンマ区切りでpoints でまとめて指定します。
fillが未指定の場合、折れ線に囲まれた部分は黒く塗りつぶされます。fill=”none” fill=”transparent” などを加えて対処できます。
<svg>
<polyline points="10 10, 40 45, 80 25, 120 0, 160, 10, 200, 50" fill-opacity="0.3" stroke="salmon" stroke-width="5">
</polyline>
</svg>See the Pen svg polyline by Takashi Abe (@TakeshiAbe) on CodePen.
polygon 多角形
polygonもpolylineと同じくpointsで指定しますが、自動的に最初の座標と最後の座標が結ばれた多角形となります。
<svg>
<polygon points="15 40, 175 40,40 110, 100 0, 155 110 " stroke="red" stroke-width="3" fill="tomato" fill-opacity="0.3">
</polygon>
</svg>See the Pen svg polygon by Takashi Abe (@TakeshiAbe) on CodePen.
text
テキストもSVG描写させることが出来ます。
x , y で1文字目の開始位置（ベースライン = 文字の下端）を指定します
文字の大きさはsvgタグに font-size で指定することで調整可能です。
<svg>
<text x="0" y="50"> SVG TEXT
</text>
</svg>See the Pen svg text by Takashi Abe (@TakeshiAbe) on CodePen.
