SVGマークアップをPNGに変換する方法

変換前に確認すること

SVGの図形やイラストをPNGとして扱いたい場合は、SVGマークアップをテキストで入力して変換します。ファイルを用意せず、マークアップ本文を直接渡せる点が特徴です。変換に成功した結果では、PNGを表すBase64テキストに加えて、データのバイト数と報告された幅・高さを確認できます。

入力から変換までの進め方

変換したいSVGマークアップを入力欄へ貼り付けます。入力自体は省略できますが、SVG本文が空の場合は処理が変換前に失敗するため、実際の内容を入力してください。
2. 元のSVGに記載されたサイズを使う場合は、幅と高さをそれぞれ0のままにします。片方だけを変更するのではなく、出力サイズを上書きしたいときは、両方に0ではない数値を入力します。
3. 幅と高さの両方が0ではない場合、本文中で最初に一致するダブルクォート付きの width="..." と height="..." 属性が入力値へ置き換えられてから変換されます。シングルクォートや引用符なしの属性を使っている場合、この置換は行われません。
4. 入力内容とサイズを確認して変換を実行し、成功結果に表示されたPNGデータ、バイト数、幅、高さを確認します。幅または高さを0にした項目は、結果で「auto」と報告されます。

出力の読み取り方と境界

成功した場合、PNGデータはBase64形式のテキストで示され、同じ結果からPNGのバイト長と各寸法の報告内容を読み取れます。寸法の入力を0にした項目は自動扱いになるため、数値が表示されなくても直ちに変換失敗を意味するわけではありません。

指定した数値をSVG本文へ反映できるのは、幅と高さをともに0ではない値にし、対象となる最初のダブルクォート付き属性が見つかった場合です。空の本文だけでなく、壊れたSVGや対応されない形式も変換エラーにつながることがあります。また、必要なSVGからPNGへの変換機能が利用できない場合も処理は完了しません。

使用例

元のSVGに合わせた自動サイズで、単純な図形をPNGデータへ変換したい場面です。

青い円を描くSVGマークアップを入力し、幅と高さをどちらも0のままにして変換を実行します。

成功時には、PNGを表すBase64テキスト、PNGのバイト数、報告された幅、高さが返されます。幅と高さを0にした場合、各寸法は「auto」と報告されます。

制限事項

属性の置換は最初のダブルクォート付きパターンに限られ、SVGの内容や必要な変換機能の状態によって処理が失敗する場合があります。

よくある間違い

入力欄に本文がないか、SVGの構文または形式が変換で受け付けられない可能性があります。内容が空でないことを確かめ、マークアップの構文と対応形式を見直してから再実行してください。

よくある質問

幅と高さを指定すると、SVGのサイズは変更されますか？

幅と高さの両方に0ではない数値を入れ、本文内に対象となる最初のダブルクォート付き属性がある場合は、その属性が入力値に置き換えられます。条件を満たさない形式の属性は変更対象になりません。

SVGを入力しなくてもPNGを作成できますか？

SVG本文の入力は省略できますが、内容が空のままではPNGを作成できません。変換対象のマークアップを入力してから実行してください。

変換結果には何が表示されますか？

変換が成功すると、PNGを表すBase64テキスト、PNGのバイト数、報告された幅と高さを確認できます。0を入力した寸法は、結果上で「auto」と示されます。