SVG画像ファイルとは？（Scalable Vector Graphics）
SVGは、ウェブで利用できるベクター画像です。
DTPなどの印刷系のスキルのある方は馴染みがあると思いますが、イラストレーターなどで扱うことのできる
ベクター形式の画像をWebで利用できるのが大きな特徴です。
SVGファイルの概要
SVGとは「Scalable Vector Graphics（スケーラブル・ベクター・グラフィックス）＝ 大きさを変えられるベクター画像」という言葉の頭文字を取ったものです。文字通りベクター画像をウェブで使用するためのフォーマットです。
PNGやJPEG、GIFなどがピクセルという小さな四角の点のデータの集まりとして表現されるビットマップ画像であるのに対して、
ベクター画像は、直線や、曲線を数式として扱いイメージを表現します。
＊元々ベクター画像は、Adobe Illustratorなどの画像編集ソフトで扱うことができ（ベジェ曲線などと呼ばれていますね。）印刷物のデータとしてはよく使われていました。
SVGの画像フォーマットは、Web関連の技術的な規格策定を行なっているW3Cによって1998年に提案されましたが、
1998年当時はブラウザ開発会社が競合技術を持っている状態だったため長らく普及しませんでした。
現在は多くのブラウザがSVG規格に対応しています。
SVGの特徴
SVGの特徴は「WEB上で綺麗な画像のまま大きさを変えられる」という点です。ベクター画像はブラウザが表示の際に描画を行うため、どんなサイズでも画質を綺麗に表示することができます。
PNGやJPEG、GIFなどのピクセルでできている画像は拡大すると画像が荒くなり（ぼやけたり、ギザギザしたり）劣化して見えてしまうという性質があります。
これに対し、ベクター形式のSVGは拡大・縮小を伴う編集を行っても画質の劣化がありません。
拡大縮小しても画質が劣化しないため、Webサイトの制作などでは、
様々なデバイスに合わせて大小各種のデータを用意しないといけない
JPEGやPNGと比べて、SVGは１つ用意すればOKです。
そのためレスポンシブデザインに非常に使いやすい性質を持っています。
SVGのテキスト表現
SVGはテキストデータの埋め込みができます。ビットマップの画像（PNGやJPEG等）と同じような、画像で作られた文字のようにWebサイト上では表現されますが、テキストデータなので、ユーザーがブラウザ上で、選択したり、テキストコピーをする事も可能です。
SVGの作成方法
Adobe イラストレーターやフォトショップなどの画像編集ソフトで作成ができます。
SVGを作成するときは、作成するコンテンツを「パス」データとしておく必要があります。
＊テキストに関しては、テキスト状態のまま埋め込むことができます。
ただし、表示する際の環境によって変わってしまったりしますので、デザインした状態と全く同じ表示にするのであれば、書き出し前にアウトライン化をした方がいいです。
コンテンツをイラストレーターなどで作成したら、保存のファイル形式でSVGを選び保存すると、SVGファイルの出来上がりです。
SVGファイルをWebページで表示するタグ
HTMLの「img」タグを使でjpgやPNGなどと同じように指定することでSVGを表示させる事ができます。CSSでもJPEG、PNGなどと同様に、例えば「background-image」などで表示させる事ができます。
また、HTMLには「svg」というタグもあります。このタグを使用すれば、HTMLファイル内に直接SVGを埋め込むことも可能です。