为什么光栅化大小很重要
- 平台资源要求明确规定了具体的像素尺寸,而不是百分比。
- 栅格化尺寸过小会丢失 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 显示尺寸的两倍导出。例如,一个以 200×60 CSS 像素显示的徽标,应栅格化为 400×120 像素,才能在 Retina 屏幕上清晰呈现。如果以 1 倍放大,则在 Retina 屏幕上会出现边缘模糊的情况。
是的,支持完整的 8 位 alpha 通道。SVG 背景默认是透明的,除非明确设置;栅格化的 PNG 图像会保留这种透明度。抗锯齿边缘、柔和叠加层和不透明度值都能正确渲染。
浏览器渲染引擎支持所有 SVG 1.1 功能:路径、形状、渐变、滤镜(模糊、阴影、颜色矩阵)、裁剪、蒙版和 CSS 样式。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 命令行工具。