☰AboutBlogSlideAtomSearchAboutBlogSlideAtomSearchInkscapeで描いたパーツをブラウザ上で合成する2020-11-03SVGInkscapeκeenです。最近紙芝居みたいなSVGをブログ(スライド)に載せる需要があったときに調べたのでそのメモ。Inkscapeで描いたSVGを組み合わせます。1.0.1での情報です。紙芝居みたいにちょっとずつ内容が違う画像をたくさん作るのは面倒です。Inkscapeで描くこと自体はレイヤとかを使えばパーツのon/offを切り替えられるのでいいんですが、それを画像に出力するのが面倒です。1枚1枚どのレイヤをonにしてどのレイヤをoffにして出力先のファイル名は何々で〜というのを管理しないといけません。気になったところがあって微調整するとまた全部出力し直しになります。私のブログの管理上も画像が沢山あると面倒です。可能ならパーツだけ出力しておいてブラウザ上で合成したいですし、画像ファイルを置くのが面倒なのでテキストでブログのソースに直打ちできると嬉しいです。いうと以下の手順で実現できます図を描くこのとき1パーツに1レイヤを割り当てるSVGをソースにコピペ不要な要素は消してよいレイヤをシンボルにするこのとき分かりやすいidもつける使う実例を交じえて解説します。図を描く適当な図をInkscapeで描きます。ここで、矩形2つと矢印1つの都合3つをバラバラのパーツにしたいとします。1パーツあたり1レイヤを割り当てます。SVGをソースにコピペこういうSVGが生成されるはずです。