svgファイルで保存できるドット絵作成webツールを作ってみた

 SVGドット絵Webエディタ

https://blackstraycat.nobody.jp/webtools/svg-pixel-art-maker/

作ったのはこちらです。
好きに使ってみてください。

そもそもSVGファイルってなーに？

画像ファイルの形式です。
ですがjpgやpngなどと違いバイナリデータではありません。
内部構造はテキストデータです。
つまり、「ファイル名.svg」という画像はメモ帳で開いて編集すら可能です。

何が便利かというと拡大縮小しても画像データが全く劣化しません。
更に内部はテキストデータであるためWebPやjpgなどよりも軽量です。

要するに、複雑な画像でない限りは最強の画像形式という事です。

何で作ったの？

単純にサイトと作ってる時に軽量な画像が欲しかったからです。
簡単なアイコンを作る時に欲しいなって思って。

webでドット絵にする方法は実はcssで影を付けるという方法(box-shadow)もあるんですがsvgデータはcssにテキストで書き込む事も出来るし、ファイルとして保存すればキャッシュ出来るし、単独で管理できるので便利だろうなって。

ただまぁドット絵にすると座標の埋め込み列挙になるので本来最強の軽量形式ですが今回は利点が少し損なわれています。まぁ、それでも十分軽量ですけどね。

他の理由

今回は他にcssフレームワークのテイルウィンド（Tailwind）を使って見たかったという理由もあります。
Tailwindはオープンソースで利用に制限が無く、CDN (Content Delivery Network) 形式で簡単に実装出来るのでお試しです。
ちなみに、CDNを使った場合、consoleにも表示されますが「遅いから本番環境で使うのはやめておけ」みたいなメッセージが表示されます。
Tailwind君が何が言いたいのかというと、別に使うのは禁止しないけどデータ群が大きいのでテストサイト等には便利だが本番で使うにはページの表示が遅くなるよって事です。

(一応補足するとちゃんと使うならTailwindはビルドして必要なスタイルだけを適用するのでCDNを使わなければ遅いわけではないです。)

まぁ、今回作ったページの速度を見る限りはCDNでも問題なさそうに感じます。
むしろ触ってみた感じではコードが気持ち悪いという印象の方が強いです。

これはまぁリアクトのコード見た時みたいな拒否反応なのでなれの問題というのは分かっています。
でもやはり、タグで構成するWebデザインという構造上このスタイルはこの為に定義している(headerとかtop-menuなど)名称みたいな方が正しいような気がします。
後ですり替える際もhtmlを変更しないで良い訳ですし。

しかし、分離したcssで定義を書くならhtmlに書いても変わらないだという気持ちもわかります。
なおかつ記述はcssの通常記述よりも短いし、style名称を毎回考えなくても良いという利点もありますので。

でもhtml内の可読性が酷いような。
styleでゴリゴリに書いてるような感覚になる。しかもいっそstyleで全部書いた方がCDNを通さない分早い。
リアクトでも関心の分離的にえぐいと思ったけどあれは機能に対してデザイン込みで含めるものなのでまだ理解出来る。

今回は全体的に「その気持ちは分かる」と「でもそれは辛くない？」が交錯しながら作ってました。閑話休題。

使い方

話を戻して使い方ですが、スマホのタップでもPCのクリックでもポチポチ出ます。
フリーラインなのでドラッグとかでもそのまま描けます。
「消しゴムボタン」
押すと消しゴムに切り替わりもう一度押すか色変更で鉛筆に戻ります。

「全消去」を押すと全てを消します。
ピクセルカンバスサイズを変更しても同様に全て消えます。

「タグコピー」はテキストデータをそのままコピーします。
メモ帳を開いて「ファイル名.svg」で保存すればすぐ使えます。

「SVGでDL」はデータをsvgで直接保存できます。
まぁ元々がテキストデータなので拡張子を変更してるに過ぎません。

感想としてはそこそこいい感じに出来たので満足です(*´ω｀*)

■余談
最初ドット絵メーカーにしてたけどエディタに名称変えた