SVGって何だろう？　他の画像との違いや使い方を説明します

こんにちは朱夏です。

今回はSVGについて学んだことを書いていきたいと思います。

朱夏

SVGってなんだろう？

JPEGやGIF画像と何が違うの？

こんな疑問を解決するため、初心者にわかりやすく解説していきます。

SVGってなんだろう？

最初に答えを言っちゃいます。

SVGというのは、画像データです。

もっと詳しく説明すると、SVGはベクター画像データです。

ベクター画像というのは、たとえば一本の線を描く場合を考えると、始点と終点、直線か曲線か、線の太さや色などの情報を持っています。こういった線が持った情報の集合体、それがベクター画像です。
illustratorで描かれたイラストなどが有名ですね。

そして、比較対象として出てくるのがラスター画像です。
こちらの特徴としては、一つの点、ドットが情報を持っている画像になります。
代表的なものにBMPやJPG、GIFなどがあります。
これらラスター画像の特徴は、ドットの集合体で出来ているということです

SVGを使うメリット

SVGを使うメリットとしては、以下のようなものがあります。

• 拡大しても画像が綺麗
• 描画線の修正が楽
• HTMLファイルでコードを書いて図形を描画できる

こんな感じです。
デメリットとしてはこんなものがあります。

• コードが複雑、長くなりやすい
• 使いこなすにはある程度の知識が必要

メリットに、拡大しても画像が綺麗とありますが、何故これが実現可能かというと、先程出てきた、ベクター画像が線の集合体だからこそ実現できています。

ラスター画像には解像度という画像の密度を表す言葉があり、画像を拡大してサイズが大きくなっても、密度は変わらないので、ドット1つ1つも大きくなったりします。
ラスターレイヤーでこれを対策するには、サイズが大きい、解像度の高い画像を用意する必要があります。

SVGの導入方法

SVGの導入方法はいくつかありますが、主な方法を2つ紹介します。

1. <img>タグでsvgファイルを読み込む
2. <svg>タグを使って直接描画する

SVGファイルというのは、ベクター画像のファイルです。
こちらはJPG画像などと同じ導入方法ですね。

直接HTMLにコードで書き込む場合は<svg>タグを使って書いていきます。

直接描画してみた

実際にHTMLにベクター画像の描画をしてみました。
今回は基本的な部分として、△、〇、□を描いてみました。

コードはこちらになります。

実行結果はこんな感じになりました。
※表示はイメージ画像です。

あとがき

今回は、SVGの基本的な部分と、どの様に導入すればいいのかといったところに焦点を当てて、初心者向けに書いてみました。
またスキルアップして、やれることが増えたら、テキストエフェクトの時の様に動きを付けていきたいと思います。

今回はここまでです。
次回もよろしくお願いします。