flexbox 内の SVG 画像のサイズ
普段あまり SVG 画像を使わないということもあってか flexbox と組み合わせたときに予想外な動きになって困りました

<!doctype html>

<style>
.row {
display: flex;
}
</style>

<div class="row">
<div><img src="00.svg"></div>
<div>00.svg</div>
</div>
<div class="row">
<div><img src="01.svg"></div>
<div>01.svg</div>
</div>

[00.svg]
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<rect width="100%" height="100%" fill="#ffc8aa" />
<circle cx="100" cy="100" r="80" fill="#b45829" />
<text x="100" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text>
</svg>

[01.svg]
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<rect width="100%" height="100%" fill="#ffc8aa" />
<circle cx="100" cy="100" r="80" fill="#b45829" />
<text x="100" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text>
</svg>

このページを表示すると 00.svg は期待通りに表示されますが 01.svg は表示されません
01.svg の img のサイズが 0x0 になって何も表示されないです

(確認用)

img に height: 100% を設定すると 高さを行の高さにでき それに合わせて幅も確保され表示されるようになりますが 親の div のサイズは幅が 0 なのは変わらず 文字と画像が重なります

画像は全部こうなのかと思いましたが PNG などではならなかったです
また SVG でも これが発生する SVG 画像と発生しない SVG 画像がありました
違いを探すと 00.svg と 01.svg のように viewBox か width+height かの違いでした
viewBox を使う場合は width と height は決まっていないので flexbox の中で自動で計算される場合は最小の 0x0 になるようです
width と height があればそれが画像サイズとなるのでちゃんと表示されます

SVG 画像側に width と height がないなら img タグの属性側に viewBox に合わせた width と height をつければ解決できます
ただしその場合 CSS で max-width を指定しても属性で指定しただけの height が確保されてしまうような違いが出ます
可能なら SVG ファイルの方に width と height を追加したほうが良さそうです
Google Maps で Polyline の表示
Google Maps で線引くときって中では SVG を使ってるのかなと思ったら タイルごとに canvas を用意してその canvas に線を引いてた
なので Polyline を SVG で取得は無理そう
canvas もタイルごとに分かれてるので 取り出すにも結合必要で面倒そう

SVG のパスじゃないならクリックイベントは座標でヒットテストして ドラッグで移動はマウス動かすたびに canvas 再描画してるのかな
チャート系ツールの感じだと SVG のほうが軽いように思うけどどうなんだろう