SVGのtips - prog-g/prog-g.github.io GitHub Wiki

GIMP を使った SVG 画像の作り方とその最適化について。

.png などの画像ファイルをエンコードして埋め込む方法では、サイズが小さくならないしスケールしない。 サイズの小さい SVG を作るには、図形自体をパスで描く必要がある。 パスは GIMP なら パスツール で書ける。

パスは パスダイアログ の右クリックで出るメニューにある「パスをエクスポート」で、レイヤー毎に SVG として出力できる。

出力された SVG にはパスの情報しかないため、画像としては黒い線だけになっている。 この SVG をテキストエディタで開き、 fill="none" stroke="black" を例えば fill="red" のように書き換えると、パスを赤で塗りつぶせる。

各 SVG は、 <path ... /> の部分を別の SVG の末尾に追記することで合成できる。 パーツごとに色を変えたい場合は、そのパーツをあらかじめ別のレイヤーで描いて別の SVG として出力し、色を指定してから合成すればよい。

GIMP が出力する SVG は無駄が多いため、 svgo でサイズを小さくする。

svgo test.svg -o test.min.svg

で test.svg を最適化した test.min.svg が得られる。

svgo で最適化した後の SVG は人間には読めないが、エクスポートと同様に「パスをインポート」すれば GIMP 上で編集できる。

• 座標の小数点以下を四捨五入して整数にすると、かなりサイズを小さくできる
• 選択範囲をパスに を使うとある程度簡単に画像からパスが得られる