こんにちは、熊谷です。
普段はボールペンや映画の話ばかりしておりますが、一応WEBのフロントエンド開発に携わっております。
なので、今回はフロントエンドな話題を記事にしたいと思います。
SVGのススメ
SVG(scalable vector graphics)はその名の通り拡大縮小しても画質が落ちないベクターデータです。
ブラウザーに古くから実装はされていましたが、なかなかハードルが高く利用しづらい面がありました。
ところが近年になって、急激にスマホなどの多種多様なディスプレイサイズが普及し始め、
デバイスごとに画像を差替えたり、ブレイクポイントで画像を差替えたり、フロントエンド開発者は泡を噴いていました。
そこで救世主となるSVGの登場です。
カンタンなSVG描画例
文字も入ります。
もっと手軽になんないのこれ
Snap.svgという便利なライブラリがあります。
これを読み込めば、みんなカンタンにSVGが利用できますね！
Snap.svgを読み込むと、上記のSVGは以下のように書き換えられます。
要素をグループ化したり、
グループ化したものをドラッグ可能にさせることが出来ます。
ウェブフォントを読み込めば、SVG内の文字をウェブフォント化することも可能です。
Canvasとは違うの？
SVGはCanvasと違い、動きの度に描画する必要が無いため動作が軽快です。
単純な動きの場合はSVG・複雑な動きはCanvasといった具合で分けるべきかと思います。
それではよいSVGライフを！
2016年02月23日 09:20
by 堀内
すごいですねー！名前は知っていましたが、もっと導入が難しいんだと思ってました
イラレで作ったもっと複雑な形も可能ですか？重くなっちゃうでしょうか？
2016年02月24日 09:56
by 熊谷
コメントありがとうございます！
簡単なイラストやパーツ程度なら通常のJPG,PNGと大差ないのですが、SVGは非圧縮なのでオブジェクトやパスの数によってどんどん大きくなります。
イラストレータからSVG形式で簡単に保存できるので測ってみて下さいね。
Canvasと違って、大きなSVGでも読み込んでしまえばjsでのパフォーマンスは変わりません。