このツールについて
このツールは、ブラウザ内で SVG ベクターファイルを選択した解像度の PNG または JPEG 画像に変換します。.svg ファイルをドロップすると、ファイル自体の width、height、viewBox を読み取って適切な初期サイズを提案します。その後、変換前に好きな出力寸法を入力できます。
ベクターアートワークのラスター版が必要なときに便利です。SVG アップロードに対応していないプラットフォーム向けにロゴやアイコンを PNG にする、1つのマスターベクターファイルから複数の固定ピクセルサイズ(アプリアイコン、favicon、SNS アバター)を生成する、通常の画像形式を求めるドキュメントやスライドに鮮明なグラフィックを挿入する、といった場面で役立ちます。
SVG はピクセルの格子ではなくベクターアートワークであるため、選択した出力サイズに拡大・縮小しても鮮明さを保ちます — JPEG や PNG の写真を元の解像度を超えて引き伸ばしたときのようなぼやけやピクセル化は起こりません。元の SVG の透明度を保持したい場合は PNG を、完全に不透明なフラット画像が必要な場合は背景色付きの JPEG を選んでください。すべて Canvas API によりローカルで処理され、SVG ファイルがどこかにアップロードされることはありません。
よくある質問
なぜ大きなサイズでラスタライズされたPNGがピクセル化して見えるのですか?
これは、変換自体が正しく機能していれば起こらないはずです——SVGはベクターデータであるため、ラスター画像を拡大するのとは異なり、ピクセル化なしにどのような出力ピクセルサイズにもきれいにスケーリングされます。PNGがピクセル化して見える場合は、設定した出力幅/高さが実際に意図したものかどうかを再確認してください(意図したよりもはるかに小さいターゲットサイズは「正しく」見えますが小さく、その後最終的な使用ケースでずっと大きなサイズで表示すると、ぼやけて/ピクセル化して見えます——これは表示時のスケーリングの問題であり、変換時の問題ではありません)。鮮明な結果を得るには、本当に意図した最終的なピクセル寸法で再エクスポートしてください。
カスタム寸法を設定する前に、なぜSVGが期待より小さく/大きく表示されるのですか?
表示されるデフォルトサイズは、SVGファイル自体が宣言している`width`/`height`属性があればそこから、なければ`viewBox`寸法から、ファイルにどちらもなければ汎用の512×512フォールバックから来ています——多くのSVG(特にデザインツールからエクスポートされたもの)は明示的なピクセル寸法なしで`viewBox`のみを宣言しているため、表示される「自然な」サイズが常に意味を持つとは限りません。実際に必要なものに幅/高さフィールドを設定するだけです。SVGはベクターデータであるため、検出されたデフォルトとは異なるサイズを選択しても品質のトレードオフはありません。