3.0 KiB
+++ 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
$ 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演算する専門アプリとかありそう。
<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つは、こう...変形させて、円に合わせる感じ。
今回作ってるのは、自分がイラストに書いてるオリジナル小説に登場するアイ、本名・月見唯の瞳の形がモデルになっている。創造の力の象徴でもある。(中二病)
配色は、本作に登場する創造の力をポケモン・アルセウスから想起していることもあり、そこから抽出。
こういうデザイン、すごくありそうだけど、検索した限りではなかった。
他のアイコンデザイン見てても、似てるのとか多かったりするので、デザインは、こういうのでいいのかもと思っている。