Fritzing用の任意形状の基板をInkscape1.2.1で作るためのメモ

# はじめに
　Fritzingを使って、任意形状の基盤を作るためには、条件にあったsvgファイルを用意しなければならない。

https://booth.pm/ja/items/1414214
　Fritzing入門実習テキスト「Fritzing Basics」を購入して、付属のハート型のファイルは読み込めるのだが、いざ自分でIllustratorでsvgファイルを作ってみても、うまく読み込めない。
ファイルの中身を覗いてみると、Illustratorで書き出したように見えるが、Inkscapeの文字もあって、どうやって、使えるsvgファイルを書き出せるのかわからなかった。海外サイトも多数あたってみたが、どれもうまく行かなかった。

　結局Inkscapeを使わなければならなかったのだが、使い慣れないInkscapeで作業するにあたり、良いまとめ動画があったことと、Inkscapeのバージョンが1.2.1となりUIが新しくなっていたので、要点を以下にまとめた。

# Fritzingで使うUI
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/510257/fe185bef-f8b7-50ec-ff03-9ac92406059b.png)
右上にあるボタンのうち、以下のボタンを覚えておけば十分。
■フィルストローク
■レイヤー
■XMLエディタ
■整列
■ドキュメントプロパティ
■環境設定
■スナップのオンオフ（外形かくのに、必要と思う）

# 外形を描く
　左端のツールを使って、外形を描く。基板を発注するので100×100mmよりも小さく作る必要がある。サイズ目安のために100x100mmの四角とか作っとくといいかもしれない。

外形は重なっていても、くっつけるので問題ない。くっつけるには、パスを２つ以上選択して「パス＞統合」。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/510257/44b4e03c-ff03-8f30-850f-ad221ba8105a.png)
■環境設定から「振る舞い＞パスの簡略化のしきい値」を最小値にする。
外形を選択し「パス＞簡略化」をする。

# 正しい名称のレイヤーを追加
■レイヤーパネルを表示し、下記２つの、レイヤーを追加する。
レイヤー名「board」
位置「現在のレイヤーのサブレイヤー」
レイヤー名「silkscreen」
位置「現在のレイヤーのサブレイヤー」
レイヤーの順番は、silkscreenが上。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/510257/a98692da-24ad-6e7e-9a1b-fa6539e01abf.png)

Layer1にある外形を、カットして、silkscreenレイヤとboardレイヤにそれぞれ貼り付ける。この時点では、ずれていて構わない。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/510257/77368ce4-19ca-0f5c-0455-d63e580ee377.png)

# 外形の設定
■フィルストロークパネルを表示する。
silkscreenにある外形を選択し
「フィル＞塗りなし」
「ストロークの塗り＞RGB(255,255,255,100)」
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/510257/0c6dc942-515a-9172-2cb7-ab7c3c620a2a.png)

「ストロークのスタイル＞0.2mm」または
「ストロークのスタイル＞0.008in」
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/510257/b9af9335-1727-4fef-4629-898207a213ac.png)

boardレイヤの外形を選択し、
「フィル＞緑RGB(0,128,0,100)」
「ストロークの塗り＞なし」

■整列パネルを開き、
両レイヤの外形を選択し、垂直の中央揃えと、水平の中央揃えをする。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/510257/bda61e66-bbb2-de70-e694-3316be5808ca.png)

# ページサイズの調整
■ドキュメントプロパティを開き
「ページサイズをコンテンツに合わせて変更」のボタンを押す。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/510257/8330f647-a7fa-71b8-fe74-32e3037cab6d.png)

# Fritzingに適したXMLファイルの修正
■XMLエディタを開く
idをboardに変更する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/510257/27ce3c53-b0b2-04cc-1955-59a579b4dbbc.png)
同様にidをsilkscreenにする。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/510257/62451c61-1f1e-d27c-fa3c-27bdcc7225e6.png)

idをboardoutlineに変更する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/510257/a9676b1c-24fe-9561-f0e1-94bf2f0285d2.png)

# プレーンsvgで保存
「ファイル＞名前を付けて保存＞プレーンSVGフォーマット」で保存

# Fritzingで読み込み
正常に読み込めて、寸法があっているか確認する。


# 参考動画
https://www.youtube.com/watch?v=ydcOzbCJltg
# 参考公式サイト
https://fritzing.org/pcb-custom-shape


```xml:hex.xml
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->

<svg
   width="40.230938mm"
   height="34.841015mm"
   viewBox="0 0 40.230938 34.841015"
   version="1.1"
   id="svg10136"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:svg="http://www.w3.org/2000/svg">
  <defs
     id="defs10133" />
  <g
     id="layer1"
     transform="translate(-42.943226,-34.796321)">
    <g
       id="board"
       style="display:inline">
      <path
         style="fill:#00ff00;stroke-width:0.264583"
         d="m 77.113845,73.46666 -25.871231,-10e-7 -12.935615,-22.405144 12.935617,-22.405143 25.871231,10e-7 12.935614,22.405144 z"
         transform="matrix(0.77305945,0,0,0.77305945,13.445109,12.743243)"
         id="boardoutline" />
    </g>
    <g
       style="display:inline"
       id="silkscreen">
      <path
         style="fill:none;stroke:#fffffe;stroke-width:0.258712;stroke-dasharray:none;stroke-opacity:1"
         id="path10142"
         d="m 77.113845,73.46666 -25.871231,-10e-7 -12.935615,-22.405144 12.935617,-22.405143 25.871231,10e-7 12.935614,22.405144 z"
         transform="matrix(0.77305946,0,0,0.77305946,13.445108,12.743242)" />
    </g>
  </g>
</svg>

```