0

最終的にやりたいこと
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画像と何が異なるのですか?

1
  • その組み込んだ方のHTMLタグ(を含むHTML全体も?)や関連するCSSも提示した方が良いのではありませんか?
    – kunif
    Commented 2023年4月22日 7:56

1 件の回答 1

1

「SVGタグを画像変換」とはラスタライズしたいという意味でしょうか?

HTMLに組み込まれているSVGタグは、いわゆる普通のSVG画像と何が異なるのですか?

異なることはないと思います

以下は適当に変更したので, もっとわかりやすい方法あるかもだけど

  • viewBox 高さ少し変更
  • height 少し変更

colabでセルマジック指定した描画で確認

%%svg
<svg id="sidebar" viewBox="600 0 300 200" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink;" width="100%" height="100vh" transform="matrix(1,0,0,1,0,0)" style="transform: matrix(1, 0, 0, 1, 0, 0); margin: 0px;">

<!-- 以下同様 -->

<svg id="sidebar" viewBox="600 0 300 200" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink;" width="100%" height="100vh" 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画像の場合さらに, (パーツの)色や線の幅など各種の属性値を外部から動的に変更できるので, HTML側で SVGをコントロールしているなら, その情報ごと持ち出さないと
(うまくコントロールしないと) (SVG画像単体での)再現は難しいかも

例えば, 色違いのアイコンを PNGで用意するとそれぞれ別ファイルになるのかもだけど(一つを分割することも不可能ではないけれど),
SVGであれば CSSなど利用し, 色違いを用意できます。逆に言えば 緑のアイコン表示したければ緑を指定した CSSを用意するなりしないと再現できないことになります

「異なることがあるか」といえば, 画像だけで言えば「異なることはないと思います」
コントロールする部分まで含めていうなら … 微妙?

質問の SVG画像では, 絶対単位を大きく取り画像を大きくしたこと
ビューポートを該当する領域にしたこと
で, (そこそこ)見やすくなったはず

3
  • 「異なることはないと思います」大変参考になりました。
    – re9
    Commented 2023年4月22日 11:05
  • 「SVG画像の場合さらに, (パーツの)色や線の幅など各種の属性値を外部から動的に変更できるので, HTML側で SVGをコントロールしているなら, その情報ごと持ち出さないと」説明分かりやすかったです。出力結果としてのsvgに差異はないけれども、パーツを動的指定している場合には注意が必要ということですね
    – re9
    Commented 2023年4月23日 3:13
  • 1
    そうですね。動的なのもそうだし (属性セットしてるような) CSSなども
    – oriri
    Commented 2023年4月23日 8:05

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。