インターネットの画像処理はJPG、GIFから始まり、2003年にPNG標準化。
そこからしばらく動きはなかったが、最近定着し始めている画像としてSVGがある。
SVG(Scalable Vector Graphics)はベクター画像としてWEBに扱える。まじか。
つまりどういうことか。

SVGを使用するメリット

1、デバイスの解像度に依存しないで拡大縮小

ベクター画像なので拡大縮小で画質に影響しない。解像度別にファイルを用意する必要もない。

2、CSSで配色が変更できる

hover画像を別に用意する必要がなくなる。

3、透過やアニメーションにも対応

いいことづくし！と思えるかもしれないが当然デメリットもある。

SVGを使用するデメリット

1、ベクター画像なので写真などには不向き

まあ、写真をわざわざベクターに書き出す事もあまりないだろう。

2、複雑な形だと重くなることもある

SVGOというツールで圧縮可能

3、未対応ブラウザ

IE8、Android2.3で未対応。
まあ要件にはいることもあまりないか。

実装

アートボードサイズを調整しながらイラレで作成。SVG形式で保存。
パスファインダなどでエレメント数を減らすなど工夫。無駄なグループも削除しておく。

1、普通にimgで実装
2、SVGコードで実装

SVGファイルをeditorで開くとxmlのコードがでてくるのでこちらから不要なタグを削除する。残ったコードをhtml上に貼り付けて実装。

3、SVGスプライト

SVG画像をまとめた1枚を用意しておき、個別に読み出す。これはアプローチがいくつかあるので別途記事にしようと思っている。

SVGを扱えるCSS

上記の1の方法には対応していない。
コードで実装すると以下のCSSに対応する。

fill:#f00;

要素内部の塗りつぶし。

stroke:#f00;

アウトライン部分の塗り潰し

stroke-width:1px;

アウトラインの線幅

stroke-opacity:0.5;

アウトラインの不透明度

stroke-linecap

線の端の形状
・butt（端の部分が線の長さと等しく平ら)
・round（丸）
・square（端を四角く）
デフォルトは butt

stroke-linejoin
線の頂点の部分のスタイル
・miter（鋭角）
・round（丸）
・bevel（面取り）
デフォルトは miter