SVGをPNGに変換して高解像度で書き出すまでの手順
SVGのコードを貼るだけでPNGに書き出す手順を画面で追います。出力サイズを何から決めたかの読み方、画像化で落ちる箇所の見つけ方、書き出したPNGが空でないかの確かめ方までまとめました。
公開読了目安 約4分
この記事の要点
- コードを貼るかファイルを選ぶと、すぐに結果が出る
- 出力サイズを何から決めたかが根拠つきで画面に出る
- 画像化で落ちる箇所を変換の前に一覧で知らせる
- 書き出したPNGの画素を数えて、空でないかを確かめる
- 倍率でも実寸でも指定でき、背景は透明のままにできる
目次
手元にあるのがSVGだけで、貼りたい先はPNGしか受け付けない。よくある場面ですが、変換したら中身が消えていた、という失敗も同じくらいよくあります。
そこを画面で見えるようにしたのがSVG→PNG変換です。
貼り付けるか、ファイルを選ぶ
入口は3つあります。コードをそのまま貼る、SVGファイルを選ぶ、枠にドラッグして落とす。
どれを選んでも、読み込んだ内容は端末の中だけで処理されます。ロゴや図面のSVGが外に出ることはありません。
何を入れればよいか迷ったら「例を入れる」を押してください。すぐ結果が出る短いSVGが入ります。
「読み取った大きさ」が出発点になる
貼り付けるとまず「読み取った大きさ」が出ます。ここがすべての出発点です。
大事なのは数字の下の1文です。その大きさを何から決めたかが書いてあります。
読み取り方は3通りあります。図の中に大きさが書いてある場合、縦横の比だけが書いてある場合、どちらも無い場合です。
大きさが書かれていないSVGは小さく出る
3つ目の「どちらも無い」に当たると、画像の既定の大きさである300×150pxが基準になります。
アイコン素材でよく起きる話です。「変換したら小さすぎた」の正体はほとんどこれで、変換ツールの不具合ではありません。
このツールは根拠を毎回出すので、小さかった理由をその場で読めます。
倍率か実寸で書き出す大きさを決める
出力サイズの決め方は2通りです。1x〜4xのボタンを押すか、幅か高さをpxで打ちます。
幅を打てば高さは比のまま付いてきます。逆も同じです。縦横がずれる心配はありません。
指定した結果は「出力: 1,200 × 600 px」のように出ます。押した倍率と実寸の両方が同時に読めます。
上限は1辺8,000px、合計4,000万画素までです。超える指定は黙って縮めず、超えていることをその場で知らせます。
変換の前に「落ちる箇所」を知らせる
SVGを画像として読み込むと、外部のファイルを見に行く指定は無視されます。これはブラウザの決まりごとで、どのツールを使っても同じです。
そこでこのツールは、貼られたSVGを走査して該当箇所を先に一覧にします。
重さは致命・注意・情報の3段階です。致命があっても変換は止めません。実際にどう欠けるかを見てから判断できるようにしています。
該当が1件も無ければ「見つかりませんでした」と出ます。空欄にはならないので、調べたうえで無かったことが分かります。
書き出したPNGを画素で確かめる
変換が終わると、そのPNGをもう一度読み直して画素を数えます。
不透明な画素が1つも無ければ「中身が写っていない可能性があります」と知らせます。描かれている色が1色だけのときも同じように伝えます。
原因までは断定しません。図形の座標が枠の外にある場合など、コードを読むだけでは分からない理由もあるためです。
背景は透明のままにもできる
既定は透明です。プレビューの下に敷いた市松模様は、透明な部分を目で見分けるためのものです。
白い紙に貼るなら透明のままで問題ありません。暗い背景に置くと文字が読めなくなることがあるので、そのときは「単色を敷く」を選んで色を決めてください。
使用例
たとえば、社外向けの資料にロゴを入れる場面。共有フォルダにあるのはSVGだけで、資料の作成ソフトはPNGしか受け付けません。
貼り付けると「読み取った大きさ」が150×150pxと出ました。小さいので4xを押し、600×600pxで書き出します。
診断には「書体を名前で指定している箇所が1件」とだけ出ていました。ロゴの文字は図形化されているので影響はなく、そのまま保存して資料へ貼れます。
スマホでも同じ並びで使える
画面が狭いときも項目の順番は変わりません。上から入力、大きさ、出力サイズ、背景、診断、プレビューの順です。
保存ボタンは横幅いっぱいに広がります。iPhoneでは共有シートが開くので、「“ファイル”に保存」や「写真に保存」を選んでください。
まとめ
このツールが普通の変換サイトと違うのは、決めたことと落ちたことを毎回画面に出す点です。
出力サイズの根拠、落ちる箇所の一覧、書き出した結果の検算。この3つがそろっていれば、真っ白なPNGを気づかずに配ってしまう事故は減らせます。
まずはSVG→PNG変換に手元のSVGを貼ってみてください。
真っ白になる原因を症状から切り分けたい方は、SVGをPNGに変換すると真っ白になる原因と確かめる順番もあわせてどうぞ。
補足: 開発者の方へ
内部では、ルートの<svg>要素に出力サイズをwidthとheightとして書き込んでから描画しています。大きさを持たないSVGの扱いはブラウザによって差が出るためです。
viewBoxが無い場合は、読み取った基準サイズからviewBox="0 0 w h"を組み立てて足します。これが無いままwidthだけ大きくすると、拡大ではなく余白の追加になります。
描画はBlobのURLを<img>に読ませ、CanvasのdrawImageへ渡す形です。検算にはgetImageDataを使い、最大20万点に間引いて不透明な画素と色の種類を数えています。
あわせて読みたい
同じテーマ・関連ツールの記事です。