デザイナーのためのSVG+vue.jsいろいろ

最近人気急上昇中で、なにかと話題のJavaScriptのフレームワークvue.js。とてもシンプルなフレームワークなので今後どんどんと広がっていくのを感じさせてくれますね。

他のフレームワークに比べると比較的シンプルなので、初心者の方にもおすすめです。今回は、SVGフォーマットの画像をvue.jsと組み合わせて、グラフやアイコン、イラストなどを制御する方法をご紹介します。スクリプト側で色味やアニメーションをダイナミックに制御出来るので、HTMLやCSSがかなりシンプルになります。

早速vue.jsを使ってみましょう!vue.jsは日本語の公式サイトがありますので、詳細はこちらからどうぞ!

vue.js

以下のコードをHTMLに追加することでvue.jsを導入出来ます。

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

↑こちらを見れば簡単に初期設定の方法がわかると思います。

SVG+vue.jsで出来ることサンプル

アイコン

SVGのアイコンをマウスオーバーするとカーソルの動きに合わせて虫眼鏡が動きます。

See the Pen Vue + SVG by Vincent Snagg (@vinchenzotwo) on CodePen.

SVGのアイコンをクリックするとハサミがちょきちょき。

See the Pen Editable SVG Icon System: Animated icon by Vue (@Vue) on CodePen.

マウスの動きに合わせてウォーリーっぽいイラストが動きます

See the Pen focked-vue-svg-demo by shawn (@dongxl) on CodePen.

パイチャート

SVGで描かれたチャートをスクリプトで色味や割合などが調整出来きます。

See the Pen Vue Donut Chart – Final Version by Salomone Baquis (@soluhmin) on CodePen.

こちらにもサンプルがいろいろ掲載されています。

SVG+vue.jsを使えば…

  1. ダイナミックにデータを変更できるので、グラフなどに便利
  2. アニメーションも可能
  3. SVG画像を使っているのでサイズ変更しても画質が劣化しない
  4. インラインで記述されているのでHTTPリクエスト数を削減できる

などなど、メリットもたくさんあり、vue.js楽しそう。SVG+vue.jsでまだまだいろんな可能性がありそうですね!

関連記事

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です