インクスケープでsvg作成。cssのbackgroundで使う

インクスケープを使ってウェブサイトで使う用のsvgを作る。

んで作ってそのまま使う分には使えるんですが、cssのbackgroundで作ったsvgを使おうとすると見事にハマった。

ここではinkscapeで作ったsvgをcssのbackgroundで指定するときのコツをつらつらと書く。

1. inkscapeの設定
1. viewboxの直し方
2. 画像サイズとキャンバスサイズを合わせる
3. background用に文字コード変換
4. svgが表示されない
1. inkscape1.0.1以上を使う

inkscapeの設定

インクスケープでsvgを出力する。これは保存時（エクスポートじゃなくて普通の保存）にsvg選べばいいだけなんで簡単。

ただインクスケープそのままの設定だとviewboxらへんがなんか変なことになってる。viewboxの直し方を。

viewboxの直し方

1. インクスケープ左上「ファイル」→「ドキュメントのプロパティ」をクリック
2. 一番上の「一般」のとこの単位を「px」に
3. 下の方の「カスタムサイズ」のとこの単位も「px」に。幅と高さを好きなpx数に設定
4. その下の「拡大縮小」のとこを「1.0」に

その下にviewboxの文字があって上の設定がちゃんとできてると、設定した幅と高さと同じ値がviewboxの幅と高さにも入力されてる。

これでOK。

画像サイズとキャンバスサイズを合わせる

話が変わるけど例えば配布のSVGをそのままインクスケープで読み込んだ場合など、キャンバスサイズがたぶんA4サイズだと思う。なので画像のサイズにキャンバスサイズを変える方法を。

「ファイル」→「ドキュメントのプロパティ」→「ページサイズをコンテンツに合わせて変更」で「Resize page to Drawing or selection」をクリック。これでキャンパスサイズが画像がぴったりおさまるサイズに変わる。

background用に文字コード変換

これでsvgができた。次はcssに入れ込んでく。

まずやるべきことがcssのbackground用にsvgのカッコなどを変換する。なんでかこの手順が必要らしい。

こちらのサイトで変換ができる。…書いてくれているのを読むとなんか関数はさむだけっぽいんで自作もできそう。

https://blog.s0014.com/posts/2017-01-19-il-to-svg/

svgが表示されない

困ったことに最新のインクスケープを使ってないと、なんか出力されたsvgが変に長い。んでtransformやらtranslate( -270.)みたいなようわからない記述もある。

パスの方の座標を見てもviewbox内に収めて書いたのにぜんぜん大きい座標を取ってる。推測だけどいったん270くらい下の位置に書いたpathをtransformで上に引き上げてるっぽい？何のためか知らないけどこのままだと、cssのbackgroundに指定しても座標がviewboxに収まってないから表示されない事態に。この解決方法はこちら。

inkscape1.0.1以上を使う

inkscape0.92.3を使ってた時に上記の変なsvgが出力された。現時点（2020/11/30）での最新版のインクスケープを入れなおすと出力されるsvgも正常になった。

これでやっと表示されるようになった。