SVGで基本の図形描写 – 1 

SVG サンプル

拡大/縮小しても描写が崩れないSVG。アイコンや背景素材としてもすっかりポピュラーになりました。

今回はpathなどを使う複雑なものではなく、丸や長方形のような基本的な図形をsvgで描写しようという記事です。cssとはあまり関係ないのですが、自分の備忘録も兼ねて書くことにします。

最初にまとめ

  • rect(長方形) ・・始点を指定
  • circle(円) ・・中心点と半径を指定
  • ellipse(楕円) ・・中心点と半径(たて横)を指定
  • line(直線) ・・始点と終点と指定
  • polyline(折れ線) ・・複数の点をつなぐ線
  • polygon(多角形) ・・polylineの始点を終点をつなぐ多角形
  • text(テキスト) ・・テキスト

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値を指定するとx方向・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で終点を指定し、2つの点を結ぶ直線を描きます。
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.

23:40まで受講できるから、仕事と両立できるHTML5/CSS3コース[オンライン]

2020年4月26日HTML/CSShtml,svg

Posted by ミフネWEB