インターネットの画像処理は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