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