福野泰介の一日一創

お手軽SVG編集アプリを目指す「svgedit」にインポート機能追加。SABAEフォントのそれぞれ文字のSVGデータをドロップすると、どのようなデータで構成されているかの可視化と簡易的な編集ができるようになりました。

「svgedit」
サンプルとして、SABAEフォントα3の「9」を読み込むように仮にしています。
ベクターデータを編集する雰囲気を楽しんでみてください！

色を変えたり、線の太さを変えて、ダウンロードできます。

今週末は、サイフラ、NTふくい、クマンドウデジタルアライブ！
→ サイバーフライデー 9/26金19:00-22:00 at エルパ2Fフードコート

links
- SVGを手軽に編集したい！svgeditづくりはじめのいっぽ
- 手書きの文字からフォントを作成、SABAEフォントα版の作り方

SABAEフォントを仕上げるために、スマホで手軽にフォントの調整ができたら便利そう！

「svgedit」
直線と曲線によって作られているベクター形式、SVGを編集するツール「svgedit」を作り始めました。まだできることは曲線を描く、調整する、点を削除する、SVGファイルとしてダウンロードするのみ。まずはフォントの修正ができる程度を目指します！

「code4fukui/svgedit」
どなたでも貢献可能、活用可能なMITライセンスによるオープンソース！

links
- 手書きの文字からフォントを作成、SABAEフォントα版の作り方

SABAEフォントづくりを効率化するために、画像からSVGへの変換をWebアプリ「SVGcode」ではなく、コマンドラインで自動処理したい。

「Potrace」
SVGcodeのソースを探ったところ、2001年から開発が続く、画像からベクトルデータへの変換ライブラリ「Potrace」をWebAssembly化した、「tomayac/esm-potrace-wasm」がコアであることを発見。フォークして、Denoで動くように手を加えた「code4fukui/esm-potrace-wasm」を作りました。（WASM版の開発者、joy-con-webhidでもお世話になったtomayacさん！） ）

「esm-potrace-wasm demo」
フォントの元画像からSVGへウェブアプリ＆コンソール上で、自在に変換できるようになりました！

links
- 手書きの文字からフォントを作成、SABAEフォントα版の作り方