94611
最終的にやりたいこと  
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画像と何が異なるのですか？
CC BY-SA 4.0
2023-04-22T06:08:07.883
94610
2023-04-22T15:17:04.920
7886
question
svg
HTMLに組み込まれていたSVGタグを画像へ変換したいのですが、正常変換されません。HTMLに組み込まれていたSVGタグは普通のSVGとは異なる？
「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画像では, 絶対単位を大きく取り画像を大きくしたこと  
ビューポートを該当する領域にしたこと  
で, (そこそこ)見やすくなったはず
CC BY-SA 4.0
2023-04-22T06:29:34.483
94611
2023-04-22T15:17:04.920
2023-04-22T15:17:04.920
43025
43025
94610
answer