連休中は鏡開きでしたね。
大量の餅を胃袋におさめ、始めたダイエットがなんとかの藻屑。
今回は珍しくweb制作ネタを扱ってみようの坂田です、こななつわ。

マルチデバイスの時代、様々なサイズのデバイスを考慮するのは当たり前だのクラッカー(古典)なお時代であります。シンプルかつフラットで視認性を意識したデザイン、テキストでいけるところはできる限りテキストで済ませ、軽量化も考えなければというところ。

しかし、画像だけはどうしても … しかし、それぞれにサイズを用意するにしても限界があるし、なにより手間も大きいからなんとかしたい ! そんな中、図説やイラストなどベクター画像ならラスタライズしなくてもイイじゃなーい ? と期待が大きいのがSVGです。

➤ 10分でわかるSVG 基礎編 – [@IT]

まあ、SVG自体はなんにも目新しくないんですけど。
さっぱり流行ってくれないのでゴリ押しです。

それもそのはず、SVGは古いわりにブラウザの実装状況が曲者で、だいぶ対応が進んだとはいえ、img タグではメディアタイプの無いサーバではうまく表示されなかったりとか、ちょいズレたりとか、小さな難があったりするわけです。

スケーラブルなので画像ファイルひとつで良いとか、フィルターとか使えたりとか、便利で面白いと思うんですけどね。

➤ アイコンフォントからSVGへ！より手軽にベクター画像を表示しよう – [ webクリエイターボックス ]

HTML5にはcanvasという似たような要素があります。それぞれの特徴はこちら -[Microsoft MSDN] の説明がよくできているので読んでいただくとして。

どちらも自由度が高くプログラムで操作することができますが、そこまでは必要がないのよ ! もっと手軽に扱えるものはないのー ? という場面も多々。

その願いに応えるのが deSVG というライブラリです。

これだけ前振りしてやることはimgタグにclassを記述するだけ。
ライブラリがsvgファイルをSVGタグでインライン展開してくれるので、CSSを使ってスタリングが楽チンですのよ。

あらやだ、本題がたったお二行ですみましたわ奥様。いろんなパーツをじゃんじゃんSVGに置き換えてwebもダイエット ! 容量制限のあるモバイルにも優しいレスポンシブデザインにしちゃいましょ。

私の腹回りも手軽に軽量化できるライブラリないですかね ?
モイモイ !!