ラスタライズサイズが重要な理由
- プラットフォームのアセット要件では、パーセンテージではなく、正確なピクセル寸法が指定されます。
- ラスタライズが小さすぎると、SVG演算が保持するサブピクセルの詳細が失われます。
- 2倍のラスタライズにより、HiDPIスクリーン用の真のRetinaアセットが生成されます。
- ファビコンのサイズ（16ピクセル）では、ヒンティングとピクセルスナップに特に注意が必要です。
SVGは無限に拡大縮小可能な数学であり、従来の意味での「サイズ変更」は存在しません。実際に行っているのは、ラスタライズ解像度、つまりベクターが画像としてレンダリングされる際のピクセル寸法を選択することです。
または、ここに画像をドラッグアンドドロップしてください。
JPG, JPEG, PNG, WEBP, SVG, GIF, HEIC, HEIF, AVIF, BMP, TIFF, HDR, JP2, RAF, PSDをサポートします
Figma、Illustrator、Inkscape、またはその他のベクターツールから.svgファイルをドラッグ＆ドロップしてください。ブラウザのSVGエンジンが、指定したサイズでレンダリングします。
ピクセル単位で正確な幅または高さを入力してください。アスペクト比はデフォルトで固定されます。SVGは選択したサイズでレンダリングされるため、ぼやけやアーティファクトは発生せず、数式も鮮明に表示されます。
出力は、透明度を保持したロスレスPNG形式です。ラスタライズされたサイズでは鮮明さが維持されますが、より大きなディスプレイではこのしきい値を超えるピクセルが表示されます。今後の再エクスポートのためにSVG形式も保存してください。
これらの関連コンバーター間で画像を変換します
SVGはJPGのようにサイズ変更するものではありません。出力サイズを指定すると、ブラウザのSVGレンダラーがその寸法でピクセルを生成します。気が変わっても、同じSVGから再エクスポートすれば、画質は劣化しません。
デザインシステムでは、アイコン、ロゴ、UI要素の正確なサイズが指定されています。SVGマスターは、これらの仕様を満たすために存在し、再描画することなく、定義された任意のサイズでエクスポートできます。このツールは、サイズテーブルの各スロットに対して、SVGからピクセル単位で正確なPNGを生成します。
ラスタライズとスケーリング、透明度、プラットフォームサイズの関係。