SVG備忘録①「矩形、円、直線」

お久しぶりです。 自分のポートフォリオを作成する機会があったのですが、

お久しぶりです。

自分のポートフォリオを作成する機会があったのですが、せっかくなのでSVGアニメーションに取り組んでみました。

SVGは画像として切り出すことはあっても、描画したりアニメーションさせることはなかったので、良い経験となりました。

SVGの描画には若干クセがあったので、その点も含めて備忘録がてらまとめておこうと思います。

※以下の内容はある程度のhtml,cssの知見がある方が読みやすいと思います。

SVGとは

SVGとは、Scalable Vector Graphicsの略で、JPEGやPNGのような画像(ビットマップデータ)ではなくIllustratorやInk Scapeで扱うベクターデータです。

メリットとしては、

・ベクターデータなので、拡大してもキレイ

・テキストエディタで開いて編集可能

・CSSやJavascriptを使ってアニメーションさせることができる

といったところでしょうか。それでは、以下で詳しく触れていきます。

矩形

まず、SVGの描画で一番基本的となるのが、矩形の描画です。

矩形の描画には<rect>タグを使います。基本形は以下の通りです。

See the Pen SVG_rect by TakayaIgarashi (@takayaigarashi) on CodePen.

まず、SVGの基本形として、<svg>タグで括る必要があります。

<svg>タグはwidthとheightを指定してあげる必要がありますので、描画したい画像のサイズ分だけwidthとheightを指定してあげましょう。

さて、本題の矩形の描画ですが、これは<rect>タグにて行われています。

通常のhtmlでは見慣れないプロパティがありますので、1つずつ見ていきましょう。

x = SVGの描画領域のx座標。始点は描画領域の左上から

y = SVGの描画領域のy座標。始点は描画領域の左上から

width = 矩形の幅。

height = 矩形の高さ。

fill = 矩形の背景色。cssで言うところのbackground-color。

stroke = 矩形の線の色。cssで言うところのborderの色だけバージョン。

stroke-width = 矩形の線の太さ。cssで言うところのborderのpx指定してるとこ。borderとは違ってこちらはpxがいらないので注意。

ちなみに、これらのプロパティはrectタグ内に直書きしなくても、cssに記述することが可能です。

xとyで座標位置を指定するところが、普段htmlとcssを触っている方々にとっては若干不慣れかなと思います。。。では、次に円を見ていきます!

円の描画には、<circle>タグを用います。

それでは、基本形をご覧ください。

See the Pen SVG_circle by TakayaIgarashi (@takayaigarashi) on CodePen.

<circle>タグのプロパティは以下の通りです。

cx = 円の中心のx座標。始点は描画領域の左上から。

cy = 円の中心のy座標。始点は描画領域の左上から。

r = 円の半径。

fill = 円の背景色。cssで言うところのbackground-color。

先ほどのrectとの違いは、widthとheightがrに変わったぐらいでしょうか。ちなみに、rectと同じくstrokeとstroke-widthを指定可能です。

では、最後の直線を見ていきましょう!

直線

直線の描画には、<line>タグを用います。

それでは、基本形をご覧ください。

See the Pen SVG_line by TKY_rashishishi (@takayaigarashi) on CodePen.

直線なので一番簡単かな?と思いますが、実は2つの点を指定して、その間を結ぶと直線になるという考えなので、2つの座標を指定する分手間がかかるのです。。。

では<line>タグのプロパティを見ていきましょう。

x1 = 1こ目の点のx座標。始点は描画領域の左上から。

y1 = 1こ目の点のy座標。始点は描画領域の左上から。

x2 = 2こ目の点のx座標。始点は描画領域の左上から。

y2 = 2こ目の点のy座標。始点は描画領域の左上から。

stroke = 直線の色。

stroke-width = 直線の太さ。

stroke-linecap = 直線の始点と終点のスタイルを指定する。例えばroundなら、始点と終点を丸くする。

今回はまずsvgの基本部分を見ていきました!

次回はsvgでのテキストとアニメーション部分を見ていきます。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です