SVGのviewBoxをみてwidthとheightをつけるやつ
<svg>にwidth, height属性が付いていないために横幅が親要素の100%になってしまう蟹
viewBoxは"0 0 36 36"と指定されている
この情報を用いて正方形で表示したいところ
https://cdnjs.cloudflare.com/ajax/libs/twemoji/14.0.2/svg/1f980.svg
https://cdnjs.cloudflare.com/ajax/libs/twemoji/14.0.2/svg/1f980.svg より
クリックしてmodalで表示すると極小サイズで描画される
<svg>にwidth, heightが付与された蟹
等身大 (viewBoxで指定されたサイズ) の蟹
https://svg-wh.vercel.app/?svg=https://cdnjs.cloudflare.com/ajax/libs/twemoji/14.0.2/svg/1f980.svg
https://svg-wh.vercel.app/?svg=https://cdnjs.cloudflare.com/ajax/libs/twemoji/14.0.2/svg/1f980.svg
アスペクト比を保ちつつ横幅を200pxにした蟹
https://svg-wh.vercel.app/w/200?svg=https://cdnjs.cloudflare.com/ajax/libs/twemoji/14.0.2/svg/1f980.svg
https://svg-wh.vercel.app/w/200?svg=https://cdnjs.cloudflare.com/ajax/libs/twemoji/14.0.2/svg/1f980.svg
他の例
https://svg-wh.vercel.app/?svg=https://daiiz-paprika.appspot.com/doc/9be8ab658e4a6aac5b20663be62199c5#.svg
https://svg-wh.vercel.app/h/50?svg=https://daiiz-paprika.appspot.com/doc/9be8ab658e4a6aac5b20663be62199c5#.svg
仕様
?svg=srcUrl
<svg>に書かれたviewBox属性の値をそのまま使う
/
片辺のピクセル数を与えてアスペクト比を保って拡縮する
/w/100
/h/100
GitHub
https://github.com/daiiz/svg-wh
Vercel app
https://svg-wh.vercel.app/
#作った