わたねこコーリング

野良プログラマ発、日々のアウトプット

Vue.js で SVG.js を使って動的に画像生成する

以前に作った SVG.js でベクタ作画する処理を、Vue.js 製のウェブアプリに組み込もうとしてるのですが、npm モジュールが少し古いようなのでひと手間加えることになったというお話です。

SVG.js はコンパクトに纏まっており、他のリッチ志向なライブラリに比べて学習コストも低く、質実剛健さが好きなプロダクトです。最新版は ver.3.0.16 ですが、npm モジュールの方は3年前の ver.2.6 系とバージョンが乖離しているので、CDN の最新バージョンを scriptjs で読み込むことにしました。作画機能を Vue プラグインにして無理やり Vue プログラミング感を出してみましたw ○△□ボタンクリックで div 要素内に svg ノードを追加、削除ボタンクリックで全部削除という簡単なサンプルです↓。

codesandbox.io

この手の処理は昔ながらに DOM を直接いじるやり方のままなんですが、他にリアクティブ志向なやり方ってあるんですかね? どなたかご存知でしたらご教示を。