+++
date = "2019-12-14"
tags = ["svg"]
title = "svgにハマったついでに、新しいアイコンをデザインしてみた"
slug = "svg"
+++

### svg、全くわからん

svg、わかりにくすぎて、思った通りの変換、`inkscape`などによる編集も難しすぎた。

まず、変換が思った通りにいかないことも多く、そこそこ使えたのは、以下の方法。

変換サイト : https://image.online-convert.com/convert-to-svg

変換コマンド : https://eprev.org/2015/05/27/converting-png-to-svg

```sh
$ brew install potrace imagemagick
$ convert -alpha remove party-never.png pgm: \
| mkbitmap -f 32 -t 0.4 - -o - \
| potrace --svg -o party-never.svg
```

で、変換がうまくいったかは、大体がsvgファイルを見ればわかります。

`viewBox`などが普通の数字であること、及び、`path d`が入ってることが重要。viewBoxが変な値だと、操作するのが難しすぎるし、viewBoxわけわからん。まあ全体と位置を決めてるらしいけど、これを手動で合わせるとか無理。svg演算する専門アプリとかありそう。

```html:syui.svg
<svg width="512.000000pt" height="512.000000pt" viewBox="0 0 512.000000 512.000000" preserveAspectRatio="xMidYMid meet">
<path d="M0 2560 l0 -2560 2560 0 2560 0 0 2560 0 2560 -2560 0 -2560 0 0">
```

svgはパスで書かれていて、変換した際、なぜかパスが反転してしまうこともあって、例えば、pngで透明だった背景ベースでパスが構築されてしまう。これもパスを反転すればいいだけじゃんと思ったけど、画像編集の常識が通用しないので、正直、わけがわからんかった。これ、自由自在に編集できる人いるんだろうか？

その後、配色を黒にしたら、変換できました。

### 新しいアイコンのデザイン

そんなことをやりながら、ついでに新しいアイコンをデザインしてみた。

基本図形、記号に著作権は生じないので、今回もそれをもとに構成。三角形を用意。それを4つに分けて、一つは基準に透明。3つは、こう...変形させて、円に合わせる感じ。

![](https://raw.githubusercontent.com/syui/img/master/old/svg_icon_novel_codename_ai_01.png)

今回作ってるのは、自分がイラストに書いてるオリジナル小説に登場するアイ、本名・月見唯の瞳の形がモデルになっている。創造の力の象徴でもある。(中二病)

配色は、本作に登場する創造の力をポケモン・アルセウスから想起していることもあり、そこから抽出。

![](https://raw.githubusercontent.com/syui/img/master/old/svg_icon_novel_codename_ai_03.png)

こういうデザイン、すごくありそうだけど、検索した限りではなかった。

他のアイコンデザイン見てても、似てるのとか多かったりするので、デザインは、こういうのでいいのかもと思っている。