💨

SVGファイルについて

2023/01/01に公開

この記事では、ヘッダーやSNSのアイコンなどで使用されるSVGについてまとめます。

SVGとベクタ形式

SVGとは、 Scalable Vector Graphicsの略で画像フォーマットの1種です。
Vectorはベクタ形式のデータのことであり、SVG最大の特徴です。
ベクタ形式とは、画像や文字などの2次元情報を数値化した形式のことです。

SVGは、このベクタ形式であるがゆえに拡大や縮小の際に、画質が崩れないというメリットがあります。
また、CSSやJSを使用することできるため、デザインやアニメーションも簡単に設定できます。

HTMLにsvg要素を記述するには、
・svg開始タグ
・xmlns
・widthとheight (viewport)
・veiwBox
の4つが必要です。

<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 500 500">

viewPort(widthとheight)は、SVG本体の領域を指します。
viewBoxは、viewPortのうち、表示させる領域範囲を指します。
viewBoxは4つの数字から成り、開始座標と終了座標があります。

例えば、この例を参考にします。

width="600" height="400" viewBox=“100 50 500 350“

本来 600×400 (下図の赤い部分)あるうち、開始座標(100,500)と終了座標(500, 350)でできる四角形(下図の青い部分)が表示されることになります。

コードの意味を理解した上で、SVGを使えるようにしていきたいですね！