【SVG】こんなに複雑なの？SVGのサイズ変更について

quake2moon

いつもお世話になってます。
カスタムアイコンに使うSVGに、よくここのヤツを使わせてもらってます。

サイズ変更して落とせるのですが、20、24、40、48 の4種類。vivaldiの推奨は、28 × 28 のキャンパスの中心に 16 ×16 を置く感じなので、サイズを合わせてやる必要がありますね。SVGの各サイズの中身を見てみるとこんな感じ。

ふむふむ、各heightとwidthにアイコンサイズが入っていて、 viewBoxの値はみんな同じなのね。…-960って何よ？
まあいいや、とりあえず、heightとwidthをvivaldi推奨の16に書き換えてやればいいんでしょ？、簡単簡単、上書き保存してアイコン登録！

…ん？ちょっとまて、サイズ変わってないじゃん。それどころか、heightとwidthの値を
16にしようが256にしようが8192にしようが65536にしようが、ま～～～ったく変わらないのです。

しょうがないのでviewBoxの値をいじる訳なんですが、いじった結果がこんな感じ。

これは、960をアイコンサイズで割ってみて出てきた数字に　×4、×8、×16とかして出てきた数字をviewBoxの元の数字に足したり引いたりして求めてるんですが…

SVGのサイズ変更ってこんなに複雑なんでしょうか?それとも、どこか見落としているんでしょうか?

もちろん他のもっと使いやすいSVG（viewBoxが　0 0 16 16　のヤツですか？よく分かりません）もあるとは思うんです。自分自身がSVGの事よく分かってないのもよ～く知ってます。でも、これじゃあ、あまりにも納得できないじゃあないですか？

おまけ
SVGは言う事聞いてくれなくてキライだけど、その中で唯一味方してくれるのが衣装担当のfillちゃん。この娘だけは、こちらのいう事をすぐに聞いてくれる、着せ替え上手な優しい娘。すき。

HongKong3

@quake2moon
元スレにも書いたのですが、「heightとwidthを書き換えれば良い」は完全に誤情報です。すみませんでした

で参照先のアイコンなのですが、画像サイズ内の5/6範囲で描かれてる為さらにややこしい事になってますw

viewBox="-220 -1180 1400 1400" で元の画像サイズ関係なくデフォルトアイコン準拠のサイズ感になると思います。
(もう計算めんどくさくてSVG編集ソフトで割り出してます)

…-960って何よ？

私は使ったこと無いですけど、数学系のY軸上向き座標で作成するとそうなってるのかも？

HongKong3

別案として、SVGタグにstyle属性追加してサイズ指定でもできそうです。

今回のアイコンなら style="width:19.2px;height:auto;"、画像目一杯に描かれたアイコンなら style="width:16px;height:auto;"て感じで、デフォルトCSSのサイズ指定弾いて中央配置になります。

こっちのほうが16/28の余白とか考えなくて良い分楽そうですね

quake2moon

@HongKong3
ありがとうございます

別案として、SVGタグにstyle属性追加してサイズ指定でもできそうです

これはラクチン！
これなら細かなサイズ調整もラク！
これが最終案ですかね～
まさか style を充てられるとは思いませんでした。

それにしても、SVGには細かな仕様？があるんですね。でも、少し一般的ではない気がします。

カスタムアイコンの変更は標準機能なので、誰でも問題なく出来そうなんですが、こういう細かいところは玄人向け？っていうか、一般人を寄せ付けない感じがあります…

HongKong3

まさか style を充てられるとは思いませんでした。

~~なんなら styleタグ作ってメディアクエリ(ダークモード)で色変えとかも出来ますよ。~~
(アイコンの場合 styleタグは削除されるようでした )

Vivaldiのアイコンの場合、imgタグ等のソースではなく直接SVGファイルを取り込んでくれるので、カスタムCSS同様に色々できそうです

カスタムアイコンの作り自体かなり特殊な気がしますし、アイコン自作までするようなコアなテーマ作者さん向けって考えた方が良いかもですw

quake2moon

@HongKong3
pngとかjpgみたいな通常形式の画像ファイルをSVGに変換するようなサイトなんかもありそうですね？
もっともそこまでSVGに拘らなくてもBTMでもカスタムアイコンに使用できるとの事ではありますけどね。

そういえば、ちょっと前にカスタムアイコンコンテストみたいなのがありませんでしたっけ?

HongKong3

@quake2moon
canvas 使って SVG => png ならそこら中ありそうですけど、逆となると品質的に微妙で一から描いたほうが良いってなりそうな気がします。

とりあえずSVGアイコンでできそうな事・・・

併せ技で動く背景付けたりできるかもですね、ものすごく効率悪いですけどw

そういえば、ちょっと前にカスタムアイコンコンテストみたいなのがありませんでしたっけ?

たぶん私はまだ居なかったんじゃないかと

quake2moon

CSS変数を参照可能

これは面白い！

#switch button[name="PanelWindow"] svg {
      fill: var(--colorAccentBgFaded);
}

ウインドウパネルのボタンアイコンが、ページのアクセントカラーを拾うようになった！

コレ、アイデア次第で色々な小技が出来そう。
…使えそうなアイデアを色々思いついたら、便利情報に挙げてみては？

たぶん私はまだ居なかったんじゃないかと

そうかもしれません