ラスタライズサイズが重要な理由
- プラットフォームのアセット要件では、パーセンテージではなく、正確なピクセル寸法が指定されます。
- ラスタライズが小さすぎると、SVG演算が保持するサブピクセルの詳細が失われます。
- 2倍のラスタライズにより、HiDPIスクリーン用の真のRetinaアセットが生成されます。
- ファビコンのサイズ（16ピクセル）では、ヒンティングとピクセルスナップに特に注意が必要です。
SVGは無限に拡大縮小可能な数学であり、従来の意味での「サイズ変更」は存在しません。実際に行っているのは、ラスタライズ解像度、つまりベクターが画像としてレンダリングされる際のピクセル寸法を選択することです。
ここに画像をドロップしてください
100%プライベート。アップロードは一切行われません。
Figma、Illustrator、Inkscape、またはその他のベクターツールから.svgファイルをドラッグ＆ドロップしてください。ブラウザのSVGエンジンが、指定したサイズでレンダリングします。
ピクセル単位で正確な幅または高さを入力してください。アスペクト比はデフォルトで固定されます。SVGは選択したサイズでレンダリングされるため、ぼやけやアーティファクトは発生せず、数式も鮮明に表示されます。
出力は、透明度を保持したロスレスPNG形式です。ラスタライズされたサイズでは鮮明さが維持されますが、より大きなディスプレイではこのしきい値を超えるピクセルが表示されます。今後の再エクスポートのためにSVG形式も保存してください。
SVGはJPGのようにサイズ変更するものではありません。出力サイズを指定すると、ブラウザのSVGレンダラーがその寸法でピクセルを生成します。気が変わっても、同じSVGから再エクスポートすれば、画質は劣化しません。
SVGリサイザーの機能
デザインシステムでは、アイコン、ロゴ、UI要素の正確なサイズが指定されています。SVGマスターは、これらの仕様を満たすために存在し、再描画することなく、定義された任意のサイズでエクスポートできます。このツールは、サイズテーブルの各スロットに対して、SVGからピクセル単位で正確なPNGを生成します。
ラスタライズとスケーリング、透明度、プラットフォームサイズの関係。
SVGはネイティブなピクセル解像度を持たないベクター画像です。このツールは、SVGを指定したピクセルサイズでPNG画像にラスタライズします。SVGソースは変更されません。同じファイルからいつでも他のサイズでエクスポートできます。
Retina（HiDPI）ディスプレイの場合は、CSS表示サイズの2倍でエクスポートしてください。200×60ピクセルで表示されるロゴは、Retinaディスプレイで鮮明に表示するために400×120ピクセルにラスタライズする必要があります。1倍では、Retinaディスプレイでエッジがぼやけて見えます。
はい、完全な8ビットアルファチャンネルに対応しています。SVGの背景は、明示的に設定しない限り透明です。ラスタライズされたPNG画像もその透明度を保持します。アンチエイリアス処理されたエッジ、ソフトオーバーレイ、不透明度値はすべて正しくレンダリングされます。
ブラウザのレンダリングエンジンは、パス、シェイプ、グラデーション、フィルター（ぼかし、ドロップシャドウ、カラーマトリックス）、クリッピング、マスキング、CSSスタイリングなど、SVG 1.1のすべての機能をサポートしています。SVG 2の機能はブラウザによって異なります。SMILアニメーションは静止画としてレンダリングされます。
iOS: 1024×1024 (App Store)、180×180 (@3×)、120×120 (@2×)、87×87、80×80、60×60、58×58、40×40、29×29、20×20。Android: 512×512 (Google Play)、192×192 (xxxhdpi)、144 (xxhdpi)、96 (xhdpi)、72 (hdpi)、48 (mdpi)。
SVGはXMLテキストなので、ソースファイルのサイズ制限はありません。出力PNGのサイズは、非常に大きなサイズ（16000×16000以上）の場合、ブラウザのメモリによって制限されます。ポスターサイズのラスタライズには、Inkscapeのコマンドラインを使用してください。