概要
ink2canvasはsvgからhtml5のcanvasで出力してくれるinkscapeのエクステンションです。
このエクステンションのインストール方法と使い方を書きます。
環境
- Windows
- inkscape 0.48.2
インストール
ソースコードはgithubに公開されています。
Step1
下記のURLからアーカイブをダウンロード＆展開して下さい。
https://github.com/hacktoon/ink2canvas
Step2
ink2canvas.inx
ink2canvas.py
lib(Folder)
展開して出来た上記のものを下記のディレクトリに置いて下さい。
[inkscapeをインストールしたディレクトリ]\share\extensions
インストールはこれで完了です。
使い方
イラストを描く
複雑でないものを描いて下さい。
html形式で保存する
名前をつけて保存 ＞ ファイルの種類 HTML 5(*.html) ＞ 保存
できたファイルをブラウザで確認
ソースコード
複雑なものだとどうなる？
この記事の最初のイラストを同じようにhtml5化してみました。
複雑なものになるときれいに出力はできないようです(^_^;)
また、テキストもパス化してないと、表示されないっぽいです。
ダウンロード場所が勝手に最新バージョンの場所に飛ばされるので気づきませんでした。
この記事に従うなら、現在は
https://github.com/jonata/Ink2canvas
がダウンロード場所で
ダウンロードは、このページの
「Ｄｏｗｎｌｏａｄ ZIP」ボタンをクリッくすれば始まります。
なお、記事中の
ink2canvas.inc
ではなくて
ink2canvas.inx
ですね。
最新版の
https://github.com/hacktoon/ink2canvas
からダウンロードした場合はどれをshare\extensionsフォルダにいれるのか未だ調べていません。
inkscapeは0.48.3以降は
http://inkscape.paix.jp/manual/overview/known-problems/
というバグもあるので、実質0.48.2が安定版と言えるから、このまましばらく使ってみます。
コメントありがとうございます！
typoとリンクを修正しました。
jnata/ink2canvasはフォーク先なのでそちらは使わないほうがいいかもしれません。
インストール方法は変更になっているかもしれないので、READMEを参照してみてください。
Windowsでの0.48.3以降のバグはinkscapeのバグではなくGTKのバグのようなので、そちらが修正されたら動くようになるとは思いますが、今のところどうなっているのかはわかりません。
（環境変数に英語の言語の設定をすれば、0.48.3以降でも動くことは動きます）
管理者様、早速の対応お疲れさまです。
当方、職場ではAdobe illustrator cs5を使って古地図のトレースなどをしているのです。
でも個人的には、illustratorは高価なので買えませんからしかたなく、その代替品としてｉｎｋｓｃａｐｅを使いはじめました。
ところが使ってみるとオープンソースということもあり、細かい部分ではillustratorとは違いますが色々とできそうです。
ink2canvasですが、少し使ってみたところグラデーションを施すと、結果は真っ黒になります。
グラデーションもHTML5ではサポートされているので、まだ改良の余地ありといったところでしょうか？
それとも最新版では修正されているのでしょうか？
どうもインストールすらよく判らないので、試すこともできません。
次はGoogle Web Designerを試してみます。
ありがとうございました。
私がこの記事を書いたのは随分前のことで、残念ながら現在このプラグインを使用していないので試してみていないのでわかりません。
試してみた時に追記したいと思います。
Inkscapeは印刷に使わないのであれば、結構いろいろとできますよ。