SVGでつくる美麗なWebサイト

皆さんはウェブサイトを作成するときにpngやjpgを使用していませんか？
もちろん、そういった画像にも利点があるのですが、ビットマップであったり、画像の読み込みが遅かったりなどの問題もあります。
そこで有用なのが、SVGです。SVGはベクタ画像なので画像が荒くならないし、読み込みもある程度は早いという利点もあります。

今回はHTMLに埋め込む形で使用するSVGについて説明します。Adobeのイラレとか使用すると文字のふちに沿ってアニメーションするSVGとかも作成できますが今回は使用しません。

線を書いてみる

SVGで線だけを描く機会はあまりないとは思いますが、組み合わせ次第によって綺麗なSVGを描けます。

<svg width="200" height="100">
	<path></path>
</svg>

図形

円を描く

四角をかいてみる

塗りつぶしと線の色について

SVGのサイズとviewboxについて

Reactコンポーネント化

---

自分の中でかなりSVGについて詳しくなったつもりでこの記事を書いていましたが、まだまだだなと感じました。いろいろ調べた内容も多いのでここに参考文献を置いておきます。