2013-12-03

Inkscapeでオブジェクトを丸く等間隔に並べる

昨日の記事のローディング・アイコンを作成する時に、SVGで丸が均等な間隔で丸く並ぶようにしたくて必死に計算してた。最初ストロークで調節しようと四苦八苦してたけど無理そうで、計算しよう……として頑張ったけど辛かったので一旦諦めた。その後、よく調べたらInkscapeにはビルトイン・エクステンションにパスから生成→散乱というのがあって、これを使うととても簡単に出来るようだ。

1. 丸く並べたいオブジェクトを作る
2. 円/弧ツールで円を書く
3. 円のフィルをなし、ストロークを単一色に変更する(色やサイズは何でも良い)
4. オブジェクトを選択し、メニューからオブジェクト→最前面を選択して実行する
5. Shiftを押しながらオブジェクトと円を両方選択する
6. メニューからエクステンション→パスから生成→散乱を選択して実行する
7. ダイアログで以下を編集する
   1. ライブプレビューをオン
   2. スケルトンパスの長さに合わせて間隔を広げるをオン
   3. コピー間の間隔を編集しプレビューを見ながら好きな間隔でオブジェクトが配置されるようにする
8. 適用を押してからダイアログを閉じて完了

上記アニメーションはこの作業の様子を撮影したもの。

これでオブジェクトが丸く並ぶ。場合によってはひとつオブジェクトが多く配置されていたりするので、XMLエディタで確認しながら消すと良い。transform()等が使われているのが気になる人はパスの簡略化で消すとサイズが抑えられる。