【Inkscape】WEBで扱えるSVGの作り方のメモ

前置き

こんにちは。
オリジナルキャラクター「のりおばけ 」でWEBの波海苔を始めました。
この可愛らしいキャラクター（ページ半ばに登場）をInkscape形式で保存したファイルをReactで扱うとエラーが返ってきて、「あぁ、困った」 ということでの記事です。

ということで、
Inkscapeで作ったSVGデータをInkscape形式で保存したSVGファイルを
Reactに置いてビルドしてみるとコケたことをメモにしました。

構成

• Inkscape 1.2
• React
• Firebase

手順

1.Inkscape形式で保存するとコケる

Inkscape＞名前を付けて保存＞InkscapeSVG(*.svg)
の手順で保存したファイル
「noriobake.svg」

この画像をReactで扱うとビルド時エラーが返ってきてコンパイルできない。

2.保存形式を変えてみる。

Inkscape＞名前を付けて保存＞最適化 SVG(*.svg)
選択し「保存」をしたら、最適化SVG出力のオプションのウィンドウが表示される。
ここで「除去する」にチェックを入れる。

出力されたSVGファイル（ソース）を見る。

noriobake.svg

<svg width="72.273mm" height="81.027mm" version="1.1" viewBox="0 0 72.273 81.027" xmlns="http://www.w3.org/2000/svg">
 <g transform="translate(-85.55 -32.995)">
  <g transform="matrix(1.5 0 0 1.5 -68.255 -62.495)">
   <path d="m145.66 97.654s2.6819-1.4614 3.9608-4.7007c1.8202 5.6256 0.0934 13.645-4.4102 17.758-7.6865 7.02-21.017 8.1287-30.865 4.7549-3.1004-1.0622-5.5757-4.0847-6.7581-7.1414-1.1875-3.07-0.72906-5.5927 0.19391-9.873 0.55138-2.557-0.85236-3.9792-1.0854-8.6528-0.233-4.6736 1.0031-8.4269 1.0031-8.4269l14.412-4.5651 19.941 5.2477 0.28637 13.549z" fill="#fff" stop-color="#000000" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width=".73964" style="paint-order:markers fill stroke"/>
   <g transform="matrix(3.1025 0 0 3.1025 -264.57 -668.12)" stroke="#000" stroke-linejoin="round" stroke-width=".2384">
    <circle cx="121.86" cy="243.59" r="1.3241" fill="#fff" stop-color="#000000" stroke-linecap="round" style="paint-order:markers fill stroke"/>
    <circle cx="121.77" cy="243.49" r=".77885" stop-color="#000000" style="paint-order:stroke fill markers"/>
    <circle cx="127.33" cy="243.59" r="1.3241" fill="#fff" stop-color="#000000" stroke-linecap="round" style="paint-order:markers fill stroke"/>
    <circle cx="127.25" cy="243.49" r=".77885" stop-color="#000000" style="paint-order:stroke fill markers"/>
   </g>
   <circle cx="110.86" cy="94.182" r="1.8891" fill="#f55" stop-color="#000000" style="paint-order:stroke fill markers"/>
   <circle cx="133.1" cy="94.182" r="1.8891" fill="#f55" stop-color="#000000" style="paint-order:stroke fill markers"/>
   <path d="m106.75 106h-3.1486s-2.3405-17.036-0.0952-25.093c1.2796-4.5923 3.3029-9.8478 7.4421-12.213 7.5396-4.3077 18.129-3.9456 26.048-0.38164 4.2285 1.9032 7.4832 6.1904 9.0709 10.547 2.9453 8.0822-0.29288 25.805-0.29288 25.805l-8.3962-0.38168-0.76332-22.422h-28.814l-1.2404 5.5339 0.28605 4.9614 0.76332 3.6257-0.0956 4.1027-0.95409 3.0532z" stop-color="#000000" style="paint-order:markers fill stroke"/>
   <path d="m127.99 100.25s-0.10548 4.7883 2.6765 4.6755c2.7819-0.11262 2.2483-5.0496 2.2483-5.0496" fill="#fff" stop-color="#000000" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width=".73964" style="paint-order:markers fill stroke"/>
   <path d="m111 100.25s-0.10548 4.7883 2.6765 4.6755c2.7819-0.11262 2.2483-5.0496 2.2483-5.0496" fill="#fff" stop-color="#000000" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width=".73964" style="paint-order:markers fill stroke"/>
   <rect transform="matrix(-.97656 -.21524 -.21524 .97656 0 0)" x="-145.37" y="63.367" width="8.2309" height="14.303" ry=".94453" stop-color="#000000" style="paint-order:stroke fill markers"/>
   <path d="m118.06 91.677s0.18088 1.6696 1.76 1.7407c1.5792 0.07105 2.0308-1.8374 2.0308-1.8374s0.5986 1.9271 2.0308 1.7406c1.4322-0.18646 2.0308-2.2242 2.0308-2.2242" fill="#fff" stop-color="#000000" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width=".73964" style="paint-order:markers fill stroke"/>
   <g transform="matrix(3.1025 0 0 3.1025 -319.6 -671.72)">
    <g transform="matrix(-1 0 0 1 284.96 0)">
     <path d="m142.38 239.74c0-1.607-3.3948-3.0388-4.4829-2.4187s-0.0968 2.4187-0.0968 2.4187-0.88123 1.7698 0.1935 2.3543 4.3861-0.62672 4.3861-2.3543z" fill="#008000" stop-color="#000000" stroke="#1a1a1a" stroke-linecap="square" stroke-width=".3" style="paint-order:markers fill stroke"/>
     <path d="m137.87 239.79s-0.44924-0.95791-0.29094-0.96571c1.6196-0.0798 2.9663 0.0884 4.4028 0.56258l-0.0645 0.85462c-1.5316 0.42598-2.9471 0.68402-4.3862 0.71015-0.17149 3e-3 0.0486-0.64564 0.0486-0.64564z" fill="#f00" stop-color="#000000" style="paint-order:markers fill stroke"/>
     <path d="m142.38 239.74c0-1.607-3.3948-3.0388-4.4829-2.4187s-0.0968 2.4187-0.0968 2.4187-0.88123 1.7698 0.1935 2.3543 4.3861-0.62672 4.3861-2.3543z" fill="none" stop-color="#000000" stroke="#1a1a1a" stroke-linecap="square" stroke-width=".3" style="paint-order:markers fill stroke"/>
    </g>
    <path d="m142.38 239.74c0-1.607-3.3948-3.0388-4.4829-2.4187s-0.0968 2.4187-0.0968 2.4187-0.88123 1.7698 0.1935 2.3543 4.3861-0.62672 4.3861-2.3543z" fill="#008000" stop-color="#000000" stroke="#1a1a1a" stroke-linecap="square" stroke-width=".3" style="paint-order:markers fill stroke"/>
    <path d="m137.87 239.79s-0.44924-0.95791-0.29094-0.96571c1.6196-0.0798 2.9663 0.0884 4.4028 0.56258l-0.0645 0.85462c-1.5316 0.42598-2.9471 0.68402-4.3862 0.71015-0.17149 3e-3 0.0486-0.64564 0.0486-0.64564z" fill="#f00" stop-color="#000000" style="paint-order:markers fill stroke"/>
    <path d="m142.38 239.74c0-1.607-3.3948-3.0388-4.4829-2.4187s-0.0968 2.4187-0.0968 2.4187-0.88123 1.7698 0.1935 2.3543 4.3861-0.62672 4.3861-2.3543z" fill="none" stop-color="#000000" stroke="#1a1a1a" stroke-linecap="square" stroke-width=".3" style="paint-order:markers fill stroke"/>
    <path transform="rotate(10.372 129.1 251.14)" d="m141.58 238.94c-0.0812 0.0931-1.1124-0.11463-1.2328-0.087-0.12047 0.0276-0.95836 0.66343-1.072 0.61495-0.11369-0.0485-0.23473-1.0933-0.29819-1.1994-0.0635-0.10605-0.92712-0.70645-0.91613-0.82955 0.011-0.1231 0.96729-0.56109 1.0485-0.65423 0.0812-0.0931 0.38538-1.1 0.50585-1.1276 0.12047-0.0276 0.83254 0.74656 0.94622 0.79505 0.11368 0.0485 1.1653 0.0266 1.2288 0.13264 0.0635 0.10604-0.45276 1.0225-0.46374 1.1456-0.011 0.1231 0.33481 1.1165 0.25356 1.2096z" fill="#ff0" stop-color="#000000" stroke="#1a1a1a" stroke-linecap="square" stroke-width=".3" style="paint-order:markers fill stroke"/>
   </g>
  </g>
 </g>
</svg>

3.ビルドしてみる

SVGファイルを用意できたので、再度Reactでビルド。
問題なくビルドできました。
そして、Firebaseデプロイ。サイトの画像のSVG化ができました。

まとめ

InkscapeでWEBで扱えるSVGの作り方は、
Inkscape＞名前を付けて保存＞最適化 SVG(*.svg)＞保存
＞オプションウィンドウ＞SVG出力＞ドキュメントのオプション
＞除去するにチェック ＞OK

▼のりおばけ、よろしくね！