大画面スマホも怖くない！SVGスプライトの作り方 | SONICMOOV LAB

最近になって、SVGを利用しているサイトさまをよく目にするようになりました。 それもこれもiPhone 6 Plusという画面サイズのどデカい問題児の存在が影響し ています。 なんとこいつだけ今までと違いピクセル比が3倍なのです。 今までretina対応で通常の2倍サイズの画像を書き出していましたが、ついに3倍サイズの画像を書き出さねばならぬ時代がやってきたわけです。 2倍サイズの画像でもスマホサイトなんかは容量的にもかなり無理があったのに、3倍サイズ画像とか現実的じゃ無いですよね… そこでベクターグラフィックのSVG画像の登場です。 そもそも、拡大を想定した画像にしておけば解像度なんかキニシナイでいいのです。 今回は、基本的なSVGの作り方、スプライトの作り方、ほんのちょっとしたテクニックまでをご紹介します。 目次 基本的なSVGの作り方 SVGスプライトの書き方 画像の呼び出し方 色を

[antennavoice]

“HTMLに直接埋め込む方法”