最終的にやりたいこと
HTMLに組み込まれていた下記SVGタグを画像変換したい
<svg id="sidebar" viewBox="0 0 1000 600" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink;" width="100%" height="60vh" transform="matrix(1,0,0,1,0,0)" style="transform: matrix(1, 0, 0, 1, 0, 0); margin: 0px;">
<text x="660" y="45" font-size="1.2em" font-weight="bold" fill="RGB(0,162,115)">快 速</text>
<text x="740" y="45" font-size="0.6em" font-weight="bold" fill="RGB(0,162,115)">Rapid</text>
<line x1="660" y1="55" x2="820" y2="55" stroke="RGB(0,162,115)" stroke-width="10"></line>
<circle cx="660" cy="55" r="4.5" stroke="RGB(0,162,115)" fill="RGB(0,162,115)"></circle>
<circle cx="820" cy="55" r="4.5" stroke="RGB(0,162,115)" fill="RGB(0,162,115)"></circle>
<text x="820" y="55" font-size="0.4em" font-weight="bold" dominant-baseline="central" text-anchor="end" fill="white">みどり/Green</text>
<text x="660" y="90" font-size="1.2em" font-weight="bold" fill="RGB(0,104,183)">普 通</text>
<text x="740" y="90" font-size="0.6em" font-weight="bold" fill="RGB(0,104,183)">Local</text>
<line x1="660" y1="100" x2="820" y2="100" stroke="RGB(0,104,183)" stroke-width="10"></line>
<circle cx="660" cy="100" r="4.5" stroke="RGB(0,104,183)" fill="RGB(0,104,183)"></circle>
<circle cx="820" cy="100" r="4.5" stroke="RGB(0,104,183)" fill="RGB(0,104,183)"></circle>
<text x="820" y="100" font-size="0.4em" font-weight="bold" dominant-baseline="central" text-anchor="end" fill="white">あお/Blue</text>
</svg>
試したこと
複数のオンラインツールを試したのですが、いずれも正常に画像変換されませんでした。
何も表示されなかったり、一部の文字だけが黒色表示されたりしました。
質問
HTMLに組み込まれているSVGタグは、いわゆる普通のSVG画像と何が異なるのですか?