svgのアイコン記法の検証
from svg画像？のwidthは3以上じゃないとChromeで表示されない？説
svgのアイコン記法の検証.icon icon
https://svg-hosting.vercel.app/api/svg?url=https://scrapbox.io/api/code/villagepump/svgのアイコン記法の検証/line1.svg1
https://svg-hosting.vercel.app/api/svg?url=https://scrapbox.io/api/code/villagepump/svgのアイコン記法の検証/line2.svg2
https://svg-hosting.vercel.app/api/svg?url=https://scrapbox.io/api/code/villagepump/svgのアイコン記法の検証/line3.svg3
code:line1.svg
<svg viewBox="0 0 1 18" width="1" height="18" xmlns="http://www.w3.org/2000/svg">
<path stroke="red" stroke-width="10" fill="#b22" d="M 0 0 L 0 100"/>
</svg>
code:line2.svg
<svg viewBox="0 0 1 18" width="2" height="18" 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 18" width="3" height="18" xmlns="http://www.w3.org/2000/svg">
<path stroke="red" stroke-width="10" fill="#b22" d="M 0 0 L 0 100"/>
</svg>
細かい検証はしてないが、少なくともPCなら一行18pxなので、viewboxもheightも18にしてしまえば、横幅1pxも想定通り出るっぽい
https://gyazo.com/7163f0cb446c6ef915f8bb398a5ef56a
ところで、このsvg画像も横幅を合わせる形で拡大されて、サムネが真っ赤になる