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ライフを!

投稿日:2016年02月22日 (月)

コメント2

この記事へのコメント
  • 2016年02月23日 09:20

    by 堀内

    すごいですねー!名前は知っていましたが、もっと導入が難しいんだと思ってました
    イラレで作ったもっと複雑な形も可能ですか?重くなっちゃうでしょうか?

  • 2016年02月24日 09:56

    by 熊谷

    コメントありがとうございます!
    簡単なイラストやパーツ程度なら通常のJPG,PNGと大差ないのですが、SVGは非圧縮なのでオブジェクトやパスの数によってどんどん大きくなります。
    イラストレータからSVG形式で簡単に保存できるので測ってみて下さいね。
    Canvasと違って、大きなSVGでも読み込んでしまえばjsでのパフォーマンスは変わりません。

この記事へのコメントを投稿する

お名前
Eメールアドレス
コメント
 

右に表示されている文字を入力してください。

※コメントは承認制のため、投稿をしてもすぐには反映されない場合があります。ご了承ください。

※スパム対策の為、お名前・コメントは必ず入力して下さい。

※記事が削除された場合は、投稿したコメントも削除されます。ご了承ください。