SVG を開くと、このページは厳格な許可リストでファイルを無害化し、安全になった内容を選んだ倍率で透過 PNG に描画します。すべてブラウザ内で行われます。スクリプトは実行されず、ファイルもアップロードされません。知っておきたいのは、CSS によるスタイル、フィルター、マーカー、埋め込み画像など、許可リストにないものは描画前に削除されるという点です。
タスクの道筋 / 入力から結果へ
「ファイルを選択」で一度に 1 つの .svg を選べます。元のマークアップがページに挿入されることはなく、プレビューはサニタイズ後の描画が終わってから表示されます。
「書き出しスケール」の下にある 1x・2x・3x・4x をクリックするか、「出力幅」と「出力高さ」に正確なピクセル値を入力します。
「サニタイズして変換」を押します。最終的なピクセルサイズと、安全でない・未対応のため削除された項目の数がまとめて表示されます。
削除数が 0 より多い場合は、PNG をダウンロードする前にプレビューと元のアートワークを見比べてください。
SVG は図形を記述する形式なので、どんなサイズでもくっきり表示されます。しかしスライド作成ツール、文書エディタ、ストアの掲載ページなど、固定のビットマップを求める場面は少なくありません。PNG にラスタライズすれば透過は残り、失うのは選んだピクセルグリッドの粗さだけです。
決め手になるのはそのグリッドです。倍率は SVG 自身の width と height(これらの属性がなければ viewBox)に掛けられるので、64×64 のアイコンは 2x で 128×128 になります。PNG をあとから拡大するとぼやけるため、必要な最大サイズで描画しておきましょう。
意外な結果の多くはサニタイズで説明がつきます。パス、基本図形、テキスト、グラデーション、クリップパス、マスク、パターン、ローカルの <use> 参照は残り、fill や stroke などのプレゼンテーション属性も保持されます。CSS クラス、style 属性、<style> ブロックにあるスタイルは削除されるため、そうした形で書き出したアートワークは黒くなったり塗りが消えたりすることがあります。
よくある質問