SVGについて学びました。 | ツクメモ - ウェブやアプリをツクるヒトのメモ
SVGについて、機能は魅力的ですが、使いどころは分かりにくかったので、学んでみました。 機能を一気に説明できない奥深さなので、今回はWEBサイトのロゴをSVGに差し替え、簡単なアニメーションを実装するまでやってみます。 Scalable Vector Graphics（スケーラブル・ベクター・グラフィックス）は以前からありましたが、2011年にIE9が対応したことにより広がりました。 当時、SVG 女子は話題になりましたね。 SVG 女子 また、グラフデータの視覚化を容易にできるライブラリ、D3.js（Data-Driven Documents データ・ドリブン・ドキュメント）にもSVGが使われています。 D3.js – Data-Driven Documents SVGのメリット・デメリット それでは、SVGの持つメリットはなんでしょう。 SVGのメリット 拡大縮小可能なグラフィックス
Retina対応にSVGは本当に使えるのか？
高解像度スクリーンに対応できるのは嬉しいですが、普通の解像度しか持たない端末にも大きなファイルをダウンロードさせなければならないのは、3G回線などの遅い回線での表示パフォーマンスを考慮すると、SVGが適していないケースもありそうです。ただ、サーバ上でGZIP圧縮した場合、平均30%ほどサイズを削減できることを考慮すると、数十KBの差がある場合を除いて、表示パフォーマンスと表示クオリティのバランスもとれてくる気がしています。 ちなみに、Illustratorで「圧縮」を選択してsvgzとして保存すると2,395Bになりました。これならPNG8のファイルサイズにだいぶ近くて良い感じですね。Apacheの設定にSVGZが記述されていれば圧縮版を使えるので、このサイズだったら現実的な気がしてきました。ただ、サーバの設定がうまくいかないのか、Illustratorでの書き出しが悪いのか、SVGZを表
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
