svg画像？のwidthは3以上じゃないとChromeで表示されない？説
svg画像をiconとして表示しようとするとダメなだけっぴ
widthは3以上じゃないとダメっぽいことが分かった
理由は不明
なんかタコピーみたいな語尾になっちゃってて一人でウケてる
/icons2/red1.icon←A width=1 stroke-width=5 icon記法
svg画像？のwidthは3以上じゃないとChromeで表示されない？説.icon←B width=2 stroke-width=10 icon記法
https://svg-hosting.vercel.app/api/svg?url=https://scrapbox.io/api/code/villagepump/svg画像？のwidthは3以上じゃないとChromeで表示されない？説/line3.svg←C width=3 stroke-width=10
https://svg-hosting.vercel.app/api/svg?url=https://scrapbox.io/api/code/villagepump/svg画像？のwidthは3以上じゃないとChromeで表示されない？説/line4.svg←D width=4 stroke-width=10
MacのChromeとSafariで確認
https://gyazo.com/81ed65a48629a1dbd1efda616f1fa554
code:line2.svg
<svg viewBox="0 0 1 100" width="2" height="100" xmlns="http://www.w3.org/2000/svg">
<path stroke="red" stroke-width="10" fill="#b22" d="M 0 0 L 0 100"/>
</svg>
code:line3.svg
<svg viewBox="0 0 1 100" width="3" height="100" xmlns="http://www.w3.org/2000/svg">
<path stroke="red" stroke-width="10" fill="#b22" d="M 0 0 L 0 100"/>
</svg>
code:line4.svg
<svg viewBox="0 0 1 100" width="4" height="100" xmlns="http://www.w3.org/2000/svg">
<path stroke="red" stroke-width="10" fill="#b22" d="M 0 0 L 0 100"/>
</svg>
miyamonz.iconのchromeだと
Aは見えない
B,Cは見える
BとCの太さが結構違う気がする
https://gyazo.com/46676f1164e221fbc5a07b5c7249c8ad
2対３じゃない気がする
https://gyazo.com/56c3cf9cc5b825909b07dbb362ed95e2
ブラウザで拡大しても表示されないMijinko_SD.icon
Aに関しては、[/icons2/red1.icon]で、アイコン記法だと縮小されて潰れて消えた可能性がありそう
/Icons2/red1#5fd70c101280f000003d1a68
元のsvgは、Bと同じではないか
https://gyazo.com/6a542649c20774c7a406f68717dae68e
一応0.1875pxだけ横幅があるらしいMijinko_SD.icon
Bは0.583333px
縦長の画像を、アイコン記法の画像に変換する際に、
縦横のアスペクトを維持したまま縦幅を一行になるように縮小して、横幅が潰れた？
なるほどです。縦幅半分にしてみてもダメでしたがもっと減らすと良かったかなぁ
アイコン記法として表示させるためにページ分けて作るか、先頭の画像を変更しないと試せないのがめんどいですよね
svgのアイコン記法の検証
https://gyazo.com/9d9c449edb456d4ebe29e47088010a38
正しく出てる気がする
svgのheightを一行の長さの18pxにすると良さそう