<svg>と<img>の違いがわかりません。

Question

自身で調べてみたのですが、違いがわかりません。

何が違うのでしょうか？

違いを挙げるとキリがないかもしれないので、大きな違いだけでも把握できればと思います。

Answer 1

<img>タグとは

画像形式の「外部ファイル」を表示させるためのタグです。
形式の種類には.jpg .png .gif .svgなどが有ります。

例

<img src="hoge.svg">

<svg>タグとは

SVG形式の種類の画像は、JPEG画像などのように<img>タグでファイルを読み込む方法以外に、直接HTMLファイルの中に<svg>タグを書いて表示させることが可能です。

つまり外部ファイル読み込みではなく、画像を構成する情報を直接コードとしてHTMLの中に書いてしまうということです。
ちなみにこれを 「インラインSVG」 と呼びます。

例

<svg>
  <!-- ここに画像を構成する情報のコードをかく -->
</svg>

SVG画像とは

JPEGやPNGなど普段使い慣れた画像がビットマップ画像という種類なのに対し、SVG画像はベクター画像という種類になります。
Adobe Illustratorで作成した.aiのデータみたいなもの、といえばわかりますでしょうか。

ビットマップ画像はいわゆるドット絵です。
非常にたくさんのドットで構成された画像です。
つまり拡大するとドットが大きくなるので、拡大すればするほど画像が荒れます。

対してベクター画像は、すべての情報が座標（位置関係）によって構成された画像になります。
ロゴなどの単純な幾何学模様に強いです。
写真などは曲線や色数が多すぎますのでベクター画像には向いていません。

座標（位置関係）で構成されていますので、コードで描けるということです。

SVG画像のメリット

• 拡大しても位置関係を保ったまま相似的に拡大・縮小されるので、画像が荒れることがない。
• インラインSVGなら、CSSで色などを変更することができる。

Comments

[退会済みユーザー]

ご回答ありがとうございます。
<svg>は<img>と違って直接情報を書き込んで使うんですね。
おかげさまですっきりしました。

Answer 2

svgっていうのはsvgという画像形式を表示させるもので
imgはpngやJPEGなどの画像形式を表示させるものです

SVGは円とか四角、曲線などの簡単な
図形を組みあわせて画像を作って行くものなので
拡大しても荒くはなりません
しかし、その他の画像形式は細かい点を何万も
組み合わせてそれを数値化しているので、
拡大し続けるとだんだん荒くなっていきます

なので、楽に画像を使いたい場合はimg
少し手間だけど綺麗に見せたい場合はSVGがいいですよ