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