SVG を PNG に変換。
SVG ファイルや貼り付けた SVG コードを PNG 画像に変換します。サイズは 1 倍、2 倍、4 倍、または好きな幅で、背景は透明か単色を選べます。各画像は最終サイズでベクターから描き直すので、ぼやけません。ブラウザの中で動くので、ファイルがアップロードされることはありません。
SVG を PNG に変換する方法
- SVG ファイルを選ぶか、上の枠にドロップします。一度に複数追加でき、SVG コードを貼り付けることもできます。
- サイズを選びます。 SVG 本来のサイズの 1 倍、2 倍、4 倍、またはピクセルで幅を指定します。最初は 2 倍で、ほとんどの画面でくっきり見えます。
- 背景を選びます。 透明か、単色です。
- 変換して、PNG を 1 つずつ、またはまとめて ZIP でダウンロードします。
知っておきたいこと：
- どのサイズでもくっきり。 小さなビットマップを拡大するのではなく、出力サイズでベクターを描くので、4 倍の PNG も 1 倍と同じくらい鮮明です。
- サイズとファイル名。 サイズは SVG の width と height、または viewBox から決まります。ファイル名はそのままで、倍率が付きます。
logo.svgを 2 倍にするとlogo@2x.pngになります。 - フォントとリンクされた画像。 ブラウザは SVG を画像として描くとき外部ファイルを読み込まないので、Web フォントの文字は別のフォントになることがあり、リンクされた画像は描かれません。文字の形をそろえたい場合は、先にデザインツールで文字をアウトライン化してください。
SVG ではなく PNG が必要になるとき
Web サイトのアイコンやロゴには SVG が最適ですが、ビットマップしか受け付けない場所も多くあります。アプリアイコン、SNS のプレビュー画像、メール、スライド、一部の CMS の項目、そして多くのチャットツールやデザインツールです。SVG を元データとして残し、必要になったら各所が求めるサイズで PNG を書き出しましょう。
SVG を Codex が作ったなら、PNG をプロジェクトに入れて、どこで使うかを伝えます。
PNG 版を使う
SVG が使えない場所では [public/brand] の PNG ファイルを使ってください：[SNS のプレビュー画像、メールのヘッダー、README]。サイトのほかの場所は SVG のままにして、すべての <img> に width と height を付け、レイアウトがずれないようにしてください。
よくある質問
この SVG → PNG 変換ツールは無料ですか？
はい。登録も透かしも、1 日の回数制限もありません。
ファイルはアップロードされますか？
いいえ。ブラウザがあなたのデバイス上で SVG を読み込み、描いて、PNG を保存します。サイトが数えるのはツールが使われたことだけで、入れた内容は記録しません。
PNG の文字が元と違って見えるのはなぜ？
SVG が Web フォントを使っているためだと思われます。ブラウザは SVG を画像として描くとき外部ファイルを読み込まないので、代わりのフォントを使います。デザインツールで文字をアウトライン化するか、フォントを SVG に埋め込んでから、もう一度変換してください。
背景が透明な PNG にするには？
背景を「透明」のままにしてください。これが初期設定です。SVG が塗っていない部分は、PNG でも透明になります。