SVGをPNGに変換する方法

Question

###実現したいこと
次のSVGをPNGに変換したいです。

<svg viewBox="0 0 14 14" class="typesRelation" style="width: 400px; height: 400px; display: block; fill: rgba(55, 53, 47, 0.4); flex-shrink: 0; backface-visibility: hidden;">
    <polygon points="4.5 1 4.5 3 9.586 3 1 11.586 2.414 13 11 4.414 11 9.5 13 9.5 13 1"></polygon>
</svg>

###発生している問題
変換すると真っ黒になってしまいます。

###試したこと
■変換の方法
①上記HTMLをテキストエディタに記載し、.svgで保存
②保存ファイルをCnvertioにアップロードし、.pngに変換し、ダウンロード
③ダウンロードしたPNGが真っ黒

■元のSVGを確認
・JSFIDDLEで展開すると正常でした。

■代替案
・上記JSFIDDLでの展開をスクリーンショットすれば実現できますが…力業すぎてスッキリしません。

###ご回答を受けての修正
int32_t様へ、以下の修正でよろしかったでしょうか

<!-- 質問のHTML -->
<svg viewBox="0 0 14 14" class="typesRelation" style="width: 400px; height: 400px; display: block; fill: rgba(55, 53, 47, 0.4); flex-shrink: 0; backface-visibility: hidden;">
    <polygon points="4.5 1 4.5 3 9.586 3 1 11.586 2.414 13 11 4.414 11 9.5 13 9.5 13 1"></polygon>
</svg>

<!--
width: 400px; → width="400"
height: 400px; → height="400"
fill: rgba(55, 53, 47, 0.4); → fill="rgba(55,53,47,0.4)"
-->

<!-- ご修正の結果 -->
<svg viewBox="0 0 14 14" class="typesRelation" "width="400" height="400" fill="rgba(55,53,47,0.4)">
    <polygon points="4.5 1 4.5 3 9.586 3 1 11.586 2.414 13 11 4.414 11 9.5 13 9.5 13 1"></polygon>
</svg>

Answer 1

ネットに沢山ソースが落ちてますが、総じてこんな感じで

<svg viewBox="0 0 14 14" width="400" height="400">
 <polygon points="4.5 1 4.5 3 9.586 3 1 11.586 2.414 13 11 4.414 11 9.5 13 9.5 13 1" fill="rgba(55, 53, 47,0.4)" />
</svg>
<script>
const svg = document.querySelector("svg");
const src = "data:image/svg+xml;charset=utf-8;base64," + btoa(new XMLSerializer().serializeToString(svg));
const canvas = Object.assign(document.createElement("canvas"),{width:svg.width.baseVal.value,height:svg.height.baseVal.value});
const image = new Image;
image.addEventListener('load',()=>{
  canvas.getContext("2d").drawImage( image, 0, 0 );
  const a = Object.assign(document.createElement("a"),{href:canvas.toDataURL("image/png"),download:"image.png"});
  a.click();
});
image.src = src;
</script>

Comments

[gamugamu]

やばすぎますｗどうもありがとうございました。

Answer 2

Adobe Illustratorで変換しました。

Comments

[gamugamu]

遅くなりました。ご回答ありがとうございます。

Answer 3

1. ImageMagickをインストール。

• https://imagemagick.org/script/download.php

1. 件のsvgを、そのままhoge.svgファイルに保存する。
2. convert hoge.svg hoge.pngで変換。
3. 右上を向いた中抜きの矢印のpngファイルができた。

# ナニか使うのは反則ではないですよね...

Comments

[gamugamu]

ありがとうございます。もちろん反則ではありません。便利なツールをありがとうございました。

Answer 4

質問文のSVGはCSSのスタイルが含まれているため、ウェブブラウザ以外の環境では期待通りに描画されない可能性が高くなってます。できるだけSVGの機能で指定しましょう。
例:

• width: 400px; → width="400"
• height: 400px; → height="400"
• fill: rgba(55, 53, 47, 0.4); → fill="rgba(55,53,47,0.4)"

Comments

[gamugamu]

ありがとうございます。「ご回答を受けての修正」を記載しましたが、真っ黒のままでした。私の修正方法に誤りございますでしょうか？

[int32_t]

width の前の " が余計なこと以外は大丈夫に見えます。
rgba()もダメかもしれないですね。fill="#rrggbb" fill-opacity="40%" でどうでしょうか。

[gamugamu]

>width の前の " が余計なこと以外は大丈夫に見えます。
すみません。記載ミスです。

>rgba()もダメかもしれないですね。fill="#rrggbb" fill-opacity="40%" でどうでしょうか。
いずれでも真っ黒でした。