Javascriptが無効になっているため、正常に表示できない場合があります。

SVGをJavascriptで操作する!

NEWSニュース

BLOG

SVGをJavascriptで操作する!

こんにちは、熊谷です。
普段はボールペンや映画の話ばかりしておりますが、一応WEBのフロントエンド開発に携わっております。

なので、今回はフロントエンドな話題を記事にしたいと思います。

SVGのススメ

SVG(scalable vector graphics)はその名の通り拡大縮小しても画質が落ちないベクターデータです。
ブラウザーに古くから実装はされていましたが、なかなかハードルが高く利用しづらい面がありました。

ところが近年になって、急激にスマホなどの多種多様なディスプレイサイズが普及し始め、
デバイスごとに画像を差替えたり、ブレイクポイントで画像を差替えたり、フロントエンド開発者は泡を噴いていました。
そこで救世主となるSVGの登場です。

カンタンなSVG描画例

文字も入ります。

もっと手軽になんないのこれ

Snap.svgという便利なライブラリがあります。
これを読み込めば、みんなカンタンにSVGが利用できますね!

Snap.svg

Snap.svgを読み込むと、上記のSVGは以下のように書き換えられます。

要素をグループ化したり、

グループ化したものをドラッグ可能にさせることが出来ます。

ウェブフォントを読み込めば、SVG内の文字をウェブフォント化することも可能です。

Canvasとは違うの?

SVGはCanvasと違い、動きの度に描画する必要が無いため動作が軽快です。
単純な動きの場合はSVG・複雑な動きはCanvasといった具合で分けるべきかと思います。

それではよいSVGライフを!