Inkscape で作成された SVG ファイルを、.ai ファイルに保存して、最終的にプレーン SVG を出力する方法です。
Inkscape SVG を Illustrator で編集して、.svg で出力しようとすると、エラーが表示されたり大きくずれたりします。これは、知らないとまったく理由がわからず対処できません。
Wikimedia Commons から頂いてきた、Inkscape Logo.svg を例にして解説します。
Inkscape Logo.svg をテキストエディタで開くとすぐに次の構文が見えます。
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
これは、ネームスペースといって「Inkscape や前身の sodipodi 特有の命令を使います」 という宣言です。
本文にも SVG には見慣れない記述が見つかります。
sodipodi:version="0.32"
inkscape:version="0.48.4 r9939"
これが、Inkscape SVG を Illustrator で扱う場合にエラーになる直接の原因ですが、他にも注意したい箇所がいくつもあるので、順番に解説します。
必要なもの
Inkscape か Inkscape Portable と Illustrator
Illustrator で編集する前に下ごしらえをします。
- Inkscape Logo.svg を Inkscape で開きます。
- ファイルメニュー、ドキュメントのクリーンアップ。
- 名前を付けて保存。プレーン SVG を選択して保存します。
保存した.svg ファイルをメモ帳などテキストエディタで開きます。
<title>…</title>
<metadata>…</metadata>
を削除します。
まだ不要なネームスペースが残りますが、編集には影響ないのでそのままにします。
SVG を Illustrator で開きます。
この項目が最も重要で、Inkscape SVG 以外の 普通の SVG を扱う場合にも該当します。
SVG をそのまま保存してはいけない
新規ドキュメントを作成して、svg のパスをコピーして貼り付けます。こうしないと座標がずれます。viewBoxを大きく外れてなにも表示されないこともあります。ずれる理由がないので、おそらく Illustrator のバグです。
一旦、新規ドキュメントを .ai ファイルで保存します。
この状態が、エラーがない svg を出力できる最低ラインですが、もう一つ重要な作業があって、こちらもやったほうが良いです。
transform 属性が付く
出力した.svg に 意図していない transform 属性が付くことがあります。
transform="matrix(0.9905442,0,0,0.9905442,0.6051535,0.604136)"
これも知らないと、ちゃんと表示できているだけに気づかないと思います。
transform が付くのはグループです。
.ai ファイルを開いて、グループ、複合パス、クリッピングマスク、レイヤー を一旦、解除してすぐに元のグループに戻します。グループ アピアランスには注意。
これは、大きなファイルだと対処しきれないので、どこかで妥協することになります。
再グループ化すると、なぜ正しくなるのか不明で これも多分 Illustrator のバグです。
これで完了です。
Inkscape SVG はパスに id が付いているので、削除するとより綺麗になります。
SVGOMG を通すと、不要な id のみ削除できます。オプションの説明が長くなるので解説は省きますが、基本的に SVG ファイルを画面にドロップするだけです。
実は先の <title> を削除する手順のところでも SVGOMG を通すと簡単にクリーンにできます。
自分で作成する時には SVG は必ず最終出力にします。