Incscapeで作成したSVG画像のtransformタグを削除したい

概要

• WebサイトでSVGにアニメーションをつけたいと思い、ベースとなるSVG画像をInkscapeで作成していました
• しかし、InkscapeでSVGを作成すると、transformタグが付与されてしまい、アニメーションと衝突して予期せぬ動きをすることがわかりました
• そこで、Inkscapeで作成したSVGのtransformタグを削除する方法を調査したので記載します

ゴール

• Inkscapeで作成したSVG画像からtransformタグが消えていること

作成物

• コミット

参考

• Removing transforms in SVG files
• inkscape-applytransforms

手順

inkscape-applytransformsのインストール

• 実装には、inkscape-applytransformsというinkscapeの拡張機能を利用します
• applytransform.inxとapplytransform.pyをGithubでダウンロードし、~/Library/Application Support/org.inkscape.Inkscape/config/inkscape/extensionに配置します（Macの場合）

SVGファイルの下準備

• SVGファイルからtransformタグを削除するときは、以下のポイントを押さえてください
  • グループ化されていないこと
  • オブジェクトをパスに変換していること
• グループ化の解除
  • 全てのオブジェクトを選択します
  • Home > Object > Ungroup を実行します
• オブジェクトをパスへ変換
  • 全てのオブジェクトを選択します
  • Home > Path > Object to Path を実行します

Transformタグの削除

• 全てのオブジェクトを選択します
• Home > Extensions > Modify Path > Apply Transform 実行します
• 以上で終了です

所感

• Incscape無料だし、超優秀だけどやはり所々辛いところあり
• Adobeイラストレーターを買えばいいのかもしれないけど、サブスクになってしまったし、お金がなぁ。。。（稼ぎに見合えばいいのだが