ウェブサイトを制作するにあたって、昔から使われている画像ファイル形式といえば「JPEG」「PNG」「GIF」があります。
これは、いわゆるビットマップ形式と言われる画像ファイルで、ウェブの初期から使用されてきた画像ファイルです。
これらの画像ファイルに加えて、数年前から「SVG」というベクター形式の画像が使えるようになりました。
今では一般的に使われているブラウザではどれでも表示することができます。
ベクター形式については、詳しく説明してくれているサイトやWikiがあるので、ググってください。
すごくざっくりと簡単に説明すると、
・ビットマップ形式
ピクセル（点）を並べて画像が生成されるため、拡大・縮小を繰り返すとモザイクをかけたようになる。
グラデーションや細かな色表現ができる（写真とか）。
画像サイズが大きくなると、ファイルサイズも大きくなる。
・ベクター形式
座標情報を使って（点と点を線で結んで）画像を生成するため、拡大・縮小してもぼやけたりしない。
グラデーションは表現できるが、写真のような細かな色表現ができない。
座標情報だけなので、ファイルサイズはほとんど変わらない。
という感じです。
それぞれ長所・短所があるので、用途によって使い分けましょう。
全てにおいて完璧なファイルというのはありません。
さて、本題に入りましょう。
このSVGというファイルは、中身がXMLで記述されています。（XMLって何？って方は、ググってください。）
XMLで記述されているので、HTMLファイルに直接記述することができます。
つまり、JPEGやPNGのように別ファイルにする必要がありません。
もちろん別ファイルにしても問題はありませんよ。
じゃ、実際どのように書けば良いのでしょうか？
いくつか書き方があります。
まずは、imgタグと同じように記述する方法。
この場合は、画像ファイルと同様に別ファイルで保存している必要があります。
[code]
<html>
<body>
<img src="svg_01.svg" alt="SVG Image">
</body>
</html>
[/code]
HTMLソースコードは読みやすくてスッキリですね（当たり前か）
次に、HTMLソースに記述する方法。
[code]
<html>
<body>
<svg version="1.1" id="logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" viewBox="0 0 141.7 73.7" style="enable-background:new 0 0 141.7 73.7;" xml:space="preserve">
<style type="text/css">
.st0{fill:#1FA9C2;}
</style>
<g id="XMLID_271_">
<path id="XMLID_312_" class="st0" d="M57.1,57.9c-3.2-0.1-17.5-1.8-20.6-2.1c0.1-0.5,0.3-1.2,0.5-1.8c0.6-2.3,4.6-19.2,5.8-24.3
c2.5-1,4.8-2.5,6.4-4.5c4.6-5.7,3.7-16.4-4.2-14.3c-5,1.3-6.4,7.7-7,10.8c0,0-0.5,2.2-1.2,5.3c-6.2-0.6-11.5-1.7-13.9-2.4
c-2.4-0.6-13.2-2.3-18.4,0.5c-6.5,3.5-3.8,11.1-3.8,11.1c3.5-5.4,15.1-6.9,22.3-6.3c3.4,0.3,6.9,0.7,9.7,1
c0.9,0.2,1.9,0.3,2.9,0.3c0.1,0,0.3,0,0.4,0c-1.1,4.8-5.1,21.5-5.5,23.1c-0.1,0.6-0.3,1.1-0.4,1.6c-20.2,1.7-16.7,19.6-7.4,17
c4.6-1.2,8.8-3.9,12.1-11.7c3.5,0.7,23,3.3,25.9,3.4c31.1,1.2,53.3-8.3,56.2-9.6c8.9-4,8.7-14.8,8.7-14.8
C122.5,43,83.1,58.5,57.1,57.9z M44.9,19.8c0.4-1.6,0.7-3.7,2-4c1.5-0.4,2.4,2.8,0,6.6c-0.6,1-1.7,2-3.1,2.8
C44.1,23.1,44.6,21.2,44.9,19.8z M21.9,68.4c-3.6,1-4.1-6.8,5.9-7.5C25.6,66,23.8,67.9,21.9,68.4z"/>
<path id="XMLID_306_" class="st0" d="M140.8,10.5c-1.6,4.8-4.7,9.3-5.8,10.3c0-0.8,0-1.6-0.1-2.5c-0.2-2.6-0.5-7-0.5-7
s4.7-6.9-1-4.9c-2.2,0.8-3.4,2.3-3.9,4.1c0,0-0.1,0.1-0.1,0.1c-4,10.7-9.1,20.3-14.8,21.9c-2.9,0.8-4.5-0.6-4.6-3.4
c0.6,0.3,1.2,0.5,2,0.5c3.1,0.1,6-2.3,7.9-6.7c3.2-7.2-1.1-11-5.9-9.7c-2.9,0.8-6.8,4.6-8.9,11.5c-0.1,0.3-0.2,0.7-0.3,1
c-1.5,2.5-2.9,4.6-3.2,5.2c-0.7,1-1.3,1.9-1.6,1.7c-0.3-0.2,0.1-2.3,0.3-3.3c0.7-3.1,3.1-13.2,3.1-13.2l-5.3,1.5
c0,0-0.4,1.9-1,4.4c-3,4.4-8.2,11.5-8.9,12.5c-0.7,1-1.3,1.9-1.6,1.7c-0.3-0.2,0.1-2.3,0.3-3.3c0.3-1.2,1.3-5.5,2.4-10.2l4-1.1
c0.3-1.2,0.4-1.9,0.4-1.9l-4,1.1c1.5-6.6,2.2-9.1,2.2-9.1l-5.3,1.4c0,0-0.5,2.1-2.2,9.1l-3.8,1c0,0-0.2,0.7-0.5,1.9l3.9-1
c-0.4,1.7-0.8,3.4-1.2,5c-2.1,3.5-4.3,5.8-6.3,7.4c0-0.8,0-1.6-0.1-2.5c-0.2-2.6-0.5-7-0.5-7s4.7-6.9-1-4.9
c-2.9,1-3.9,3.1-4.2,5.7c-2.3,3.9-7.6,12.5-8.4,13.6c-0.7,1-1.3,1.9-1.6,1.7c-0.3-0.2,0.1-2.3,0.3-3.3c0.7-3.1,3.1-13.2,3.1-13.2
L58.9,28c0,0-0.6,2.6-1.4,5.9c-1.1,4-5.1,11.4-7,11.9c-1.9,0.5-1.5-1.8-1.2-2.9c0.7-3.1,3.1-13.2,3.1-13.2l-5.3,1.5
c0,0-3.3,14.3-4,17.2c-1,4,0.7,7.4,4,6.5c2.2-0.6,5.3-5.2,7.9-10.1c-0.3,1.3-0.5,2.2-0.7,2.7c-1,4,0.5,5.3,2.7,4.7
c1.4-0.4,3-1.7,5.1-5.2c1.4-2.3,6-10.2,8.7-14.9c0.1,1.3,0.3,2.7,0.4,3.9c0.1,1.6,0.2,2.9,0.1,4c-4,2.3-7.7,4.1-7.5,6.5
c0.2,3,3.4,2.9,5.4,2.4c3.4-0.9,6.5-2.9,7.2-9.3c1.6-1.4,3.5-3.4,5.3-5.7c-0.8,3.4-1.4,6-1.6,6.7c-1,4,0.5,5.3,2.7,4.7
c1.4-0.4,3-1.7,5.1-5.2c1.1-1.8,4.6-7.1,7.6-11.6c-0.9,3.7-1.7,7.3-2,8.5c-1,4,0.5,5.3,2.7,4.7c1.4-0.4,3-1.7,5.1-5.2
c0.6-1,1.7-2.8,3-5.1c0.6,4.6,3.9,7,9.7,5.5c3.1-0.8,5.9-3.2,8.2-6.2c0,0.1,0,0.1,0,0.2c0.2,3,3.4,2.9,5.4,2.4
c3.4-0.9,6.5-2.9,7.2-9.3c1.5-1.4,5.1-5.9,6.8-11.2C141.9,12.2,141.4,9.6,140.8,10.5z M70,45.5c-0.5,1.4-2.1,2.1-2.2,0.8
c-0.1-0.7,1.3-1.7,3-2.8C70.5,44.2,70.2,44.8,70,45.5z M115.8,16.8c1.7-0.5,0.9,3.9-0.7,6.3c-1.2,1.7-2.7,3.5-4.7,2.7
c0.1-0.2,0.1-0.4,0.1-0.5C111.7,21,114.1,17.3,115.8,16.8z M128.3,29.8c-0.5,1.4-2.1,2.1-2.2,0.8c-0.1-0.7,1.3-1.7,3-2.8
C128.9,28.6,128.6,29.2,128.3,29.8z M129.7,24.4c-2,1.2-4,2.2-5.4,3.3c2-3.3,3.7-7,5-10.6c0.1,1.1,0.2,2.2,0.3,3.3
C129.7,22,129.8,23.3,129.7,24.4z"/>
<path id="XMLID_305_" class="st0" d="M103.2,0.1c-4.3,1.1-2,11.6-2,11.6S107.5-1.1,103.2,0.1z"/>
<path id="XMLID_304_" class="st0" d="M99.6,13.1c0,0-1.8-10.8-4.3-7.2C92.9,9.5,99.6,13.1,99.6,13.1z"/>
<path id="XMLID_303_" class="st0" d="M110.9,1.6c-2.7-2.2-8.2,10.6-8.2,10.6S113.6,3.8,110.9,1.6z"/>
</g>
</svg>
</body>
</html>
[/code]
どこからこのコードが出てきたの？ってなると思いますが、SVGファイルをテキストエディタで開いてみましょう。
そうすると
[code]
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" viewBox="0 0 300 300" style="enable-background:new 0 0 300 300;" xml:space="preserve">
:
[/code]
という記述があります。
<svg 〜> 以降の部分が実際の画像データの部分になりますので、<svg>〜</svg> をコピペしましょう。
これでSVGの表示ができたわけですが、実践的ではないですよね。
どうせなら、fontawesomeのようにアイコンとしてSVG画像を使いたいなーと思うのが人情だと思います。
アイコンを表示したいところに都度 <svg 〜> コードを書くなんて、ソースコード見にくいし、面倒だし、他に方法ないの？
・・・ってなりますよね？ね？
というわけで、次回にその方法について書いてみようと思います。
