Kritaで描くSVGペン画

![202005_001-s960px-270frames-via-ScreenToGif-Encorder_ffmpeg-default.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/85140/20b1a8b1-346d-a274-a6ba-010c7bb5682c.gif)

# デジタルならではのペン画を描きたい、もっと楽に。

イラストレーターとして紙にペンや筆などで描くアナログなペン画制作の経験があります。
[https://www.shajitsu.com/#artwork](https://www.shajitsu.com/#artwork)

線の重なりで表現する描き方が好きで、それを [Inkscape]([https://inkscape.org/](https://inkscape.org/))を用いて[SVG(Scalable Vector Graphics)]([https://developer.mozilla.org/ja/docs/Web/SVG](https://developer.mozilla.org/ja/docs/Web/SVG))の直線に置き換えてみるということを以前に一度やりました。
[https://qiita.com/tksh/items/9e8e8fc04790a268870d](https://qiita.com/tksh/items/9e8e8fc04790a268870d)

仕上がりには満足だったのですが、ツールにはまだ改善の余地がある気がしていたので別のソフトウェアを探してみました。

---

# SVGで線画を描くのに使えるドローソフト探し

### 求めた条件

- プレーンなSVG形式で書き出せる
- ペンタブレットで感覚的に直線が引ける
- 参考資料用のビットマップ画像を配置できる
- 無料、もしくは低価格

## Inkscapeは重たかった

SVGで直線だけを使って線画を描くのにInkscape を使うと、（自分のPCが低スペックなこともあって）描き始めは軽くスムーズなのにだんだん描き進めて線の数が増えていくにつれレスポンスが悪くなった。最終的にはペンタブレットを動かした1・2秒後ぐらいにようやく線が描画されるほどのちょっと実用に耐えないレベルにまで悪化してしまった。

## Inkscapeは直線を描けるツールが無かった

直線を、**始点と終点のクリックとかではなく、**ペンタブレットを用いて直感的に描くための専用のツールはInkscapeに無く、自由に曲線も含めた線を描くための鉛筆ツールのスムージング設定を最低の値にあえてする事で直線しか描けない状態にして、疑似的な直線描画ツールとして運用するしかなかった。

そういう無理矢理な運用の副作用として、エクスポート後のSVGファイル中に始点と終点以外にも曲線表現のためのハンドルの分の座標データが含まれてしまうので、あとでそれをコードエディタ上で削除するという面倒な作業が発生してしまった。

## Figmaは絵を描くためには作られていなかった

最近勢いがありそうな[Figma]([https://www.figma.com/](https://www.figma.com/))も試してみた。直線(Line)ツールがあり、ペンタブレットによって感覚的に直線を引くことが出来た。すごく良い。**ただし、一本だけ。** なぜか一本直線を引くごとにツール選択がオブジェクトを移動させるためのMoveツールに切り替わってしまう。二本目の線を引くためにはまたもう一度直線ツールを選び直さなければならない。一応キーボードショートカット「L」で直線ツールに戻れるが、自然に絵を描くのは到底無理だった。

この仕様の理由はこのFigmaというものがデザインとかプロトタイピングのために設計されているためで、[引いた線のプロパティをその都度すぐ調整出来る]([https://help.figma.com/hc/en-us/articles/360040450133-Using-Shape-Tools#h_48696d32-dacf-4e4f-bdd3-b3caa7a304bf](https://help.figma.com/hc/en-us/articles/360040450133-Using-Shape-Tools#h_48696d32-dacf-4e4f-bdd3-b3caa7a304bf))ということが次の線を引くことよりも重要視されているからだと思う。

[Gravit Designer]([https://designer.gravit.io](https://designer.gravit.io/))も全く同じ理由で使えなかった。

## Affinity Designerも直線ツールは無かった

[Affinity Designer]([https://affinity.serif.com/ja-jp/designer/](https://affinity.serif.com/ja-jp/designer/))も有料だけどちょうど半額セールをやっていたこともあり購入して試してみた。けれどInkscapeと同様に直線ツールは備わっておらず、またInkscapeと違って鉛筆ツールにスムージング設定なども見当たらなかったので、完全な直線をペンタブレットで描く術は無かった。全体的な動作は軽くて良い感じなだけに残念だった。

## Kritaは描くために作られていた

結局、「完全な直線をペンタブレットで描いて引きたい」というニッチな要求に唯一応えてくれたのは[Krita]([https://krita.org/](https://krita.org/))だった。直線ツールがちゃんとある。Figmaのように一度線を引くごとに別のツールに切り替わってしまうこともなく、次々とペンタブレットによる自然な描画で完全な始点終点の座標のみで構成された直線が得られる。

なぜこのような作りになっているのかという理由には、このソフトウェアの成り立ちがそもそもラスターデータを扱うペイントソフトとして発展したのち、後付けでベクターデータも扱えるように進化している、ということがあるのかもしれない。とくにSVGに対応したのは[2018年のver.4からのようで]([https://krita.org/jp/item/krita-4-0-0-released-jp/](https://krita.org/jp/item/krita-4-0-0-released-jp/))かなり最近のこと。

Kritaは他の求めていた条件も満たしていた。ベクターレイヤーをプレーンなSVG形式で書き出せるし、元々絵を描くために考えられているので、参考資料用の画像を配置することも普通の描画レイヤーとは分けられた専用の機能として用意されていて便利だった。また、描き進めていってオブジェクトが増えても（最終的に今回の絵では線が2009本にもなった）動作は重くならず、描き心地が最後まで変わらなかったことも良かった。

## そもそもドローソフトに求めることではないのかも

他にも無料で試せるものをいくつか試したけれど、どれもペンタブレットで直線を描くという条件を満たすものは無かった。大抵のドローソフトでは直線を引くのは基本的に、ペンツールで始点をクリックした後、終点をダブルクリックするだけで可能なので、さらに直線を別の方法（ペンタブレット）で引くための機能を作ることなど考えもしないのかなという気がした。むしろ、機能が被ってしまってソフトウェアの設計として美しくない、みたいな考え方すらあるかもしれない。

---

# まとめ＆補足

という訳で、Kritaの時間をかけて徐々に出来上がってきたキメラ的な性質が、自分の特殊な目的にたまたま良く合致していたという感じでした。

描き上がったSVG線画をCSSを使って線が徐々に出現するようアニメーションさせてみたものが冒頭のGIFです。それらのファイルや資料とした[Generated.Photos]([https://generated.photos/](https://generated.photos/))の画像などはGitHubにあります。
[https://github.com/tksh/SVG-drawing-after-Generated-Photos](https://github.com/tksh/SVG-drawing-after-Generated-Photos)

またこの作品はアートエージェンシー[digmeout]([https://digmeout.net/](https://digmeout.net/))によって行われている「ART GIVES YOU A SMILE」プロジェクトのために制作しました。
[https://digmeout.net/art-gives-you-a-smile/](https://digmeout.net/art-gives-you-a-smile/)