kritaでsvg形式のロゴを作ってみる

ここ最近ずっとブログのテンプレートを改修していたのですが、いい機会なのでブログのタイトルロゴを作ってみることにしました。jpegやgifだと画面のサイズによっては表示がぼんやりしてしまうので、svgという形式のベクター画像を作成します。

完成した画像は、今画面の上のほうに表示されているひつじのイラストが付いたブログタイトルです。

イラストの作成

画像のサイズはA4横向きで、解像度は300ppiにしました。（後でわかったことですが、svgにエクスポートするとpxがptに変換されてるようなので、viewBoxをいじるならA4とかじゃなくてptでサイズ指定しておいた方が解りやすいかもしれない。。。🤔）
ベクターレイヤーにイラストを描く

ベクター画像を作成するので、イラストはベクターレイヤー上に描く必要があります。レイヤー一覧の下の方にある▼（画像の赤で囲ったところ）をクリックすると追加するレイヤーの種類が選べるので、ベクターレイヤーを選択して追加します。

追加したレイヤーにパスツールで羊のイラストを描いて、フリーのフォント（過充電FONT くれよん）をとってきて配置しました。

パスを使った詳しい描きかたについては以下を見てみて下さい。

kritaのベジェ曲線を使いこなしたい

拡大縮小しても劣化しないベクター画像をべジェ曲線を使って作成します。思ったように曲線を描くために必要なハンドル操作やショートカットの使い方を、ロゴの作成を例に具体的にまとめてみました。

darabba.blogspot.com

ベクターレイヤーにイラストを描くときは、ブラシツールが使えません。以下の赤枠で囲ったものが使用したツールになります。×を付けているツールはベクターレイヤーでは使えません。

使用するツール

あと、イラストをキャンバス上で移動させるときに緑で囲ったところにあるツールは使わない方がよいです。svgに出力したときに移動が反映されません。移動には赤枠で囲ったツールのうちselect shapes tool（矢印のアイコン） を使います。

イラストのトリミング

イラストは描けたましたが、余白がけっこうあるのでトリミングをします。
が、このときちょっと注意したいことがあります。

というのが、普通にトリミングしてしまうとsvgに出力したときにイラストが全く表示されなかったり断片しか表示されないといったことが起こるからです。
どうやら、イラストに合わせてトリミングしても、krita側ではそのサイズでキャンバスの左上部分をトリミングしてしまうみたいなのです。

トリミング問題

svgタグ側で説明すると、viewBoxで座標軸を指定するx-min,y-minが0で固定で、描画範囲を指定するwidthとheightがトリミングしたサイズになるようなのです。トリミングしたところの座標を新たに座標軸に設定すれば意図した通りの切り抜き画像になります。

というわけで、ロゴを左上に寄せてから切り抜ツール（crop tool）でトリミングしました。

svgとしてエクスポートする

SVGエクスポートは一枚のレイヤーに対してしか行えないため、イラストを一枚のレイヤーにまとめておきます。そして、メニューからLayer>Import/Export>Save Vector Layer as SVGとたどり、イラストを保存します。

これでイラストがsvg画像として保存できました。
保存したイラストをテキストエディタで見てみるとこんな感じです。（長いので省略してます）

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<!-- Created using Krita: http://krita.org -->
<svg xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
    xmlns:krita="http://krita.org/namespaces/svg/krita"
    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
    width="131.28pt"
    height="113.52pt"
    viewBox="0 0 131.28 113.52">
<defs/>
<path id="shape01" transform="matrix(0.781092882550367 0.00167227067589176 -0.00167227075935647 0.781092779815905 9.54077014651606 2.78307857912565)" fill="#ccffff" stroke="#000000" stroke-width="7.2" stroke-linecap="square" stroke-linejoin="miter" stroke-miterlimit="1.91999995708466" d="M18.5088 40.3747C6.23761 9.74202 49.2208 -15 ……

svgのイラスト自体はこれで完成です。
以降では、ブログに使うためにいくつか処理していきます。

svgを最適化する

出力したsvgは最適化することでもう少しサイズを小さくできるようなので、svgcleanerというツールを使って最適化し、サイズを小さくしました。

$ ./svgcleaner title_logo.svg title_logo.min.svg

レスポンシブ対応をしたいので、最適化した画像をテキストエディタで開いてheightとwidthを削除しておきました。

base64に変換する

画像をcssに埋め込んで使いたいので、svgをbase64にエンコードします。linuxのbase64コマンドで変換しました。

$ base64 -w 0 title_logo.min.svg

-w 0 とオプションをつけて、エンコードしたデータに不要な改行が入らないようにします。 出力された値をcssにコピペして完成です！


参考

Webサイト上にフォントをアウトライン化して表示してみよう
SVG ファイルを最適化する
背景画像の比率を保ったまま、レスポンシブ対応する
SVGのviewBoxをわかりやすく紐解く
SVG viewBox Attribute