エディタ付きのSVG→PNG変換

まずファイルを見せてくれるコンバーター

多くのSVG→PNGコンバーターは中身を見せずに動きます。ファイルを渡すと、解析できた範囲をそのままラスタライズし、結果を初めて目にするのはダウンロードフォルダの中。SVGがコンバーター側にないフォントを使っていれば文字は置き換えられ、作者がアートワークの背後に白い長方形を残していれば、透過のはずのPNGに背景が焼き付いて届きます。

Rayziaは変換の前にファイルをエディタで開くので、キャンバスにはPNGに含まれる内容がそのまま表示されます。間違った色は 塗り替えできます。 背景の図形は選択して削除でき、これが透過PNGになるか不透明PNGになるかの分かれ目になることがよくあります。フォントがファイルに同梱されていなければ、完成画像ではなくキャンバス上で置き換えに気づけますし、フォント一覧からGoogleフォントをその場で読み込むことも、自前のフォントをアップロードすることもできます。

変換自体はローカルで行われます。ドラッグしたファイルはアップロードされずブラウザ内で開かれ、PNGはお使いのマシン上のキャンバスでラスタライズされます。クラウド保存はサインインしたユーザー向けの別のオプション操作で、サインアウト状態では何も外に出ません。

SVGをPNGに変換する手順

1. エディタを開く。 rayzia.com にアクセスし、 /vector/でエディタを開きます。Windows・Mac・Linux・ChromeOS・タブレットのどのブラウザでも動作し、インストール不要、開始にアカウントも要りません。
2. .svgをドラッグする。 ファイルをキャンバスにドロップするか、「ファイル」→「開く」を使います。RayziaはネイティブSVGとして読み込むため、各シェイプや各テキスト行はロックされた画像ではなく編集可能なオブジェクトとして開きます。
3. 表示を確認する。 キャンバスにはPNGに含まれる内容が表示されます。色がずれていれば変更し、残った背景の長方形が透過を隠していれば、書き出す前に削除しましょう。
4. アートボードで書き出し範囲を決める。 ショートカット Shift+O を押してアートボードツールに切り替え、アートワークを囲むようにボードをドラッグするか、オプションバーからA4やフルHDなどのプリセットを選びます。書き出しはボードの矩形にクロップされるため、ボードがPNGの端を決めます。
5. 書き出す。 「ファイル ▸ 書き出し」でPNGを選べば、標準解像度・透過込みのファイルを無料で入手できます。特定のスケールや別の形式が必要なら、「ファイル ▸ スクリーン用に書き出し」で0.5xと1xが無料、Proなら最大4xまでのスケールに加えJPGとWebPが使えます。

必要なピクセルサイズを得るには

PNGは固定のラスター画像なので、書き出し時のサイズが重要です。Rayziaではアートボードがフレームの役割を担い、書き出し時に出力のviewBoxがボードの矩形に設定されるため、ボード上にあるものは画像に入り、外にあるものはクリップされます。プリセットのドロップダウンにはフルHD(1920×1080)やスクエアといった定番のほか、印刷モックアップ向けのA4とLetterがあり、ボードを好きな矩形にドラッグすることもできます。

スケールはそのフレームを倍率で拡大します。「ファイル ▸ スクリーン用に書き出し」では、チェックしたターゲットとスケール・形式のすべての組み合わせが、[email protected] のような名前でそれぞれ別ファイルとしてダウンロードされます。Documentは常設のターゲットで、何かを選択しているとSelectionが現れるので、シートから1つのアイコンだけを他に触れずに変換できます。0.5xと1xは無料、それ以上最大4xまでのスケールは月額$8のProで、Proには 書き出し形式としてのPDF.

SVG→PNG:よくある質問