SVG 转 PNG Scalable Vector Graphics ↔ Portable Network Graphics 免费 在线 安全
SVG 不是一张图，而是画一张图的说明。这里把说明照着执行一次，按你选的尺寸，再存成 PNG。绘制是在一个沙箱里完成的，文件里的任何东西都跑不起来，也什么都不上传。
转换你的文件
把 SVG 拖到这里，或者选一个。
你的文件不会离开这台设备。一切都在你的浏览器里完成。
不上传任何文件
矢量到底不同在哪里
SVG 不是一张图；它是一套画图的指令——这里一个这么大半径的圆，从这里到那里一条线，这个形状填上那种颜色。它在2001年成为网络标准；因为它存的是画法而不是结果，所以同一个文件既能画出十六像素的图标，也能印成一块广告牌。PNG 或 JPEG 存的恰恰相反：一张已经完成的彩色点阵，对是什么画出了它们毫无记忆。这种不对称决定了本页的一切。从矢量到位图，不过是按选定的尺寸把指令画出来；反过来走则是描摹——程序盯着一张点阵，猜测可能是哪些形状造出了它。
你会在哪里遇到它们
标志、图标、地图、示意图和统计图都以 SVG 存在，因为它们必须在任何尺寸下都清楚可读，而且常常要换颜色。网页小图标和应用图标都由它们做出来。反方向用于矢量必须变成平面图像的那一刻：一个不显示 SVG 的邮件程序、社交网站的预览图、一份要由软件比你更旧的人去打印的文件，或者一个只接受照片的上传表单。
常见问题
我描摹了一张照片，结果惨不忍睹。为什么？
因为描摹本来就不是为照片准备的。它的做法是找出颜色相近的区域，再在每一块周围画出轮廓；这适合平涂的图形——标志、镂空版、线描——却在照片上失败，因为照片里每一块区域都在缓缓融进下一块。描摹程序只得在本无边界之处造出一条边界，结果要么是海报式的平色斑块，要么是一个含着几万个细碎形状的文件。照片还是留在位图里为好。
为什么我的 SVG 在别的软件里看起来不一样？
通常是字体的缘故。含有文字的 SVG 按名字去引用字体，并指望打开它的机器装着那套字体；没有的话就换上别的，版式随之挪位。对症的办法是导出前把文字转为轮廓：每个字母变成一个形状，文件在哪里都一模一样——代价是文字再也不能编辑和选中。滤镜、混合模式这类高级效果，是另一个常见的差异来源。
文件会损失质量吗？
要看两种格式各自装得下什么。在存放同样内容的格式之间转换——PNG 转 BMP，WAV 转 FLAC——不会损失任何东西。转成为省空间而丢弃信息的格式，比如 JPEG 或 MP3，每转一次就损失一点，再转回去也拿不回来。凡是有选择余地的地方，本页倾向于保住原来的质量，而不是做出最小的文件。
我的文件会被上传到什么地方吗？
不会。转换发生在你自己的机器上、你的浏览器里面；文件从不离开它，这里也没有任何服务器能够接收它。正因如此，限制一个大文件的是你自己的内存而不是上传；也正因如此，你转换的任何东西都不可能出现在任何人的日志里——包括我们的。不过，音频和视频工具会在你第一次使用时从本站取来它们的转换引擎——约三十兆字节，仅此一次；此后工作依然完全在你自己的机器上进行。
人们为什么要把 SVG 转成 PNG
SVG 不是一张图片。它是一组绘制图片的指令:在这里画一个圆,在那里画一条曲线,用那种颜色填充这个形状,用这种字体写下这个词。因为它是指令而不是像素,SVG 可以按任何尺寸显示而不会变模糊,这使它成为标志、图标、图表和插图最喜爱的格式。但令人惊讶的是,有相当多的软件无法执行这些指令。电子邮件程序、社交网络、许多上传表单、演示工具和较老的编辑器都想要由像素构成的图片。这就是人们把 SVG 转成 PNG 的原因:他们有一幅图稿,而他们需要它是人人都接受的形式。
PNG 是这项工作的自然选择。它让每个像素都保持绘制时的样子,并保留透明度,所以没有背景的标志仍然是没有背景的标志。每个浏览器、编辑器、办公程序和手机都能理解它。对于主要由平涂颜色和锐利边缘构成的 SVG,PNG 是忠实再现它的格式。
本页在你的浏览器中把 SVG 转成 PNG。文件中的指令按你选择的尺寸执行一次,结果保存为 PNG。图稿在一个沙箱里渲染,文件中的任何东西都无法运行,也不会上传任何内容。下面你会看到它是如何工作的、保留了什么、那个重要的限制是什么,以及如何选择尺寸。
转换如何进行
指令只执行一次
你的 SVG 在你的浏览器内部打开,浏览器对 SVG 做它一贯做的事:执行绘制指令并绘出结果。然后这幅绘制出来的画面按你选择的尺寸被截取为图片,并保存为 PNG。整个过程发生在你的设备上,所以没有什么要等待的,事后也没有什么要删除的。
一个什么都无法运行的沙箱
原则上,SVG 文件可以包含脚本和对其他东西的引用。为了让这永远不成为风险,图稿在一个文件中任何东西都无法运行的沙箱里渲染。只有形状被绘制出来。即使是你从不完全信任的地方下载的文件,这也是安全的。
尺寸由你来选
因为 SVG 本身没有像素,所以由你决定 PNG 有多少像素。选一个宽度,高度会按图稿的比例随之确定。更大的尺寸得到更清晰的图片和更大的文件。
保留了什么
每个形状都如所绘
每个形状都如实保留:曲线、填充、描边和层叠。PNG 是 SVG 在浏览器里看起来的样子的一张忠实图片。
图稿自身的比例
图稿的比例被保留,所以它不会被拉伸或压扁。如果 SVG 的宽度是高度的两倍,PNG 也是。
透明度
透明度被保留。SVG 中没有填充的区域在 PNG 里仍然是透明的,这正是将要放在彩色背景上的标志或图标所需要的。
把 SVG 转成 PNG 之前你应该知道的
PNG 永远是一个尺寸
PNG 永远是一个尺寸,而 SVG 不是。这是本页最重要的事情。如果你选了小尺寸而之后需要大尺寸,放大 PNG 会使它变模糊。所以请选你将来可能需要的最大尺寸。把大图变小,比反过来容易得多,而且你总可以留着 SVG 以备将来使用。
来自别处的字体和图片无法解析
SVG 从别处拉取的字体和图片,在它被绘制的沙箱里无法解析。如果你图稿中的文字用的是文件从服务器加载的网络字体,它在 PNG 中会回退到系统字体,字形的外观会改变。如果 SVG 引用了存放在文件之外的图片,该图片将会缺失。为了获得最佳结果,请使用字体已转为轮廓、图片已嵌入的 SVG。
文件大小取决于图片
简单的标志生成的 PNG 很小。大尺寸的精细插图则生成很重的 PNG。如果结果对你的用途来说太大,请缩小尺寸,或把它交给压缩 PNG处理。
如何在这里把 SVG 转成 PNG
添加你的图稿
把 SVG 拖到页面上,或从你的设备中选取。它在你的浏览器内部读取,不会上传。
选择尺寸
选择 PNG 的宽度。想想这张图片将被使用的最大的地方,然后选那个尺寸。
转换并下载
按下按钮并下载 PNG。打开它,查看边缘和文字,并检查透明的区域是否仍然是透明的。
进一步了解 SVG 和 PNG
矢量与栅格
SVG 是矢量格式:它存储形状以及绘制它们的规则。PNG 是栅格格式:它存储一个彩色点的网格。矢量可以缩放到任何尺寸,因为每次都重新绘制形状。栅格有固定数量的点,放大它只是让点变大。把 SVG 转成 PNG,就是从规则走向固定的网格,而网格的选择由你决定。
为什么是 PNG 而不是 JPG
对于图稿,PNG 几乎总是更好的答案。它让锐利的边缘保持干净,并保留透明度。JPG 会让平涂的颜色和边缘变软,而且没有透明度。如果某处只接受 JPG,请使用SVG 转 JPG;否则就坚持用 PNG。
分辨率与屏幕
现代屏幕显示图片的密度常常是旧屏幕的两三倍。如果你的 PNG 将以页面上的某个尺寸出现在这样的屏幕上,请把它做成那个尺寸的两倍宽,它就会显得清晰锐利。
具体常见情形
用于电子邮件和社交网络的标志
许多电子邮件程序和社交平台不接受 SVG。按他们要求的尺寸把 SVG 转成 PNG,你的标志就能带着透明背景通过。
用于文档和演示的图片
办公程序处理 SVG 的好坏各不相同。PNG 总是管用。如果图稿要投影,请选择宽裕的尺寸,这样它在大屏幕上依然清晰。
应用与网站的图标
画成 SVG 的图标集,往往需要 PNG 版本用于不读取矢量的地方。按所需的尺寸做出来,并把 SVG 留作母版。
图表与示意图
把图表导出为 SVG 的工具给你留下的文件,有些系统会拒绝。图表的 PNG 可以毫不费事地放进报告、网页或消息。
把 SVG 转成 PNG 之前的实用建议
检查 SVG 在浏览器里的样子
先在浏览器里打开 SVG。你在那里看到的,就是 PNG 将显示的。如果文字用的字体不在你的系统里,预期 PNG 里会出现同样的替换。
为精确起见把文字转为轮廓
如果精确的字形很重要,在保存 SVG 之前,在你的绘图程序里把文字转为轮廓。这样字母就变成了形状,绘制它们不需要任何字体。
嵌入图片
如果你的 SVG 包含图片,请把它们嵌入文件,而不要链接。沙箱找不到链接的图片。
着眼未来选择尺寸
想想这张图片还可能用在别的什么地方。大到足以做海报的尺寸,用在网页上也没问题。为微小图标做的尺寸,在别处都没用。
人们在转换前问的问题
我应该选哪种尺寸?
你将需要的最大的。你总是可以缩小 PNG,但放大它就会变模糊。
透明度会保留吗?
会。SVG 中透明的背景在 PNG 里也是透明的。
为什么我的文字看起来不一样?
因为字体是从别处加载的,在沙箱里无法解析。一种系统字体取代了它的位置。在原稿里把文字转为轮廓可以避免这一点。
为什么链接的图片缺失了?
从文件之外拉取的图片无法解析。请把它们嵌入 SVG。
我的文件会被上传吗?
不会。转换在你的浏览器中运行,文件从不离开你的设备。
我能回到矢量吗?
只能靠描摹。PNG 转 SVG把图片变成形状,但那是猜测而不是还原。请保留你的原始 SVG。
把 SVG 转成 PNG 时的明智选择
先确定目的地
网页需要适中的尺寸。打印需要大的。图标需要小而简单的。让 PNG 与场合相匹配。
与其他选项比较
对于 favicon,SVG 转 ICO生成一个包含多种尺寸的文件。对于在任何缩放下都保持清晰的文档,SVG 转 PDF让图稿作为图稿保留。
保留 SVG
SVG 是母版。只要你需要,它可以变成任何尺寸和任何格式。请妥善保管。
转换之后获得好结果
检查边缘
放大查看曲线和斜线。它们应当是平滑的。如果看起来有锯齿,说明对这个用途来说尺寸太小,更大的尺寸会有帮助。
在彩色背景上检查
把 PNG 放在它将出现的颜色上。如果原稿有柔和的阴影,透明的边缘可能会露出一圈淡淡的边,现在发现比较好。
需要时让它变轻
如果文件很重,压缩 PNG可以减轻它的重量,而外观没有明显变化。
把 SVG 转成 PNG 时充分利用它
在把 SVG 转成 PNG 之前准备好 SVG
在原稿中花几分钟用心,能省去以后许多麻烦。确保图稿有恰当的尺寸或视图框,把文字转为轮廓,嵌入所有图片,并去掉你不想显示的隐藏图层。干净的 SVG 得到干净的 PNG,你也就不需要把转换跑两遍。
一次做出多种尺寸
如果你需要一个标志的几种不同宽度,为每一种各把 SVG 转成 PNG 一次,并按宽度给文件命名。页脚用的小版本、页面用的中版本和打印用的大版本,涵盖了大多数需求,把它们备好可以免去你为每次请求回来重做的麻烦。
想想背景
因为 PNG 保留透明度,标志会呈现它背后的颜色。深色页面上的深色标志会消失。请在浅色和深色背景上都检查 PNG,如果标志对两者各需要一个版本,就做两个不同颜色的 SVG,并为两者各把 SVG 转成 PNG。
让名称有意义
使用能说明图片是什么、有多大的名称,例如 logo-1600。一年后当你在一个满是图片的文件夹里找到这个文件时,你会立刻知道是哪一个。
隐私与处理
为什么本地转换对图稿重要
标志、平面图和设计在发布之前可能是机密的。许多在线转换器把你的文件上传到服务器,处理后送回结果,并且有一段时间,一份副本留在你无法控制的机器上。这里由你自己的浏览器干活,所以图稿留在你的设备上。
你离开时会发生什么
当你关闭页面时,转换后的图片会从浏览器中消失,所以请先下载。关于你图稿的任何东西都不会被保留。
如果出了问题
图片是空白的
SVG 可能缺少尺寸或视图框。在文本编辑器中打开它,检查它是否有 width 和 height 或视图框,或在你的绘图程序里修复它。
图片被裁掉了
有些 SVG 的元素超出了它们声明的区域。在原稿中调整视图框,让所有东西都装得下。
尺寸非常大时页面卡住了
一切都在你的设备上运行,而巨大的图片需要内存。请选择较小的尺寸,或使用电脑。
相关工具
同一系列的工具涵盖相邻的任务。要得到 JPG,使用SVG 转 JPG。要做 favicon 或应用图标,答案是SVG 转 ICO,要得到在任何缩放下都保持清晰的文档,则是SVG 转 PDF。要把图片描摹成形状,PNG 转 SVG走相反的方向。有了 PNG 之后,PNG 转 WebP让它更适合网络,而当不需要透明度时,PNG 转 JPG生成小文件。
一个实例
假设你有公司标志的 SVG,而一个社交网络只接受 PNG,宽度至少 800 像素。你把 SVG 拖到这里,为保险起见选择 1600 像素的宽度并按下按钮。片刻之后,你下载了一张比例相同、边缘锐利、背景透明的 PNG。你上传它,标志在任何颜色上都清晰地显示。SVG 作为母版留在你的文件夹里。
一份简短的清单
转换之前
在浏览器里打开 SVG。确定你需要的最大尺寸。确保字体已转为轮廓、图片已嵌入。
转换时
在文件准备好之前停留在页面上。
转换之后
打开 PNG,检查边缘和文字,在真实背景上测试它,并保留 SVG。
常见错误
选了太小的尺寸
PNG 永远是一个尺寸。以后放大它会使它变模糊。请选得宽裕一些。
依赖链接的字体和图片
它们在沙箱里无法解析。请把文字转为轮廓并嵌入图片。
丢掉 SVG
请保留它。它是唯一可以无限缩放的版本。
你的图稿留在你的设备上
转换在本地进行。你的图稿由你自己的浏览器读取,在那里绘制,然后作为 PNG 交还给你。没有任何内容被上传,所以服务器上不会留下副本,别人也看不到它。对于未发布的设计,这是把 SVG 转成 PNG 的安全方式。
小结
要在这里把 SVG 转成 PNG,拖入图稿,选择尺寸并按下按钮。SVG 不是图片,而是绘制图片的指令,在这里这些指令按你选择的尺寸执行一次,结果保存为 PNG。图稿在一个文件中任何东西都无法运行的沙箱里渲染,也不会上传任何内容。每个形状都如所绘保留,带着图稿自身的比例和透明度。PNG 永远是一个尺寸,所以请选你将需要的最大的,因为之后放大它会使它变模糊。SVG 从别处拉取的字体和图片无法解析,所以用网络字体排的文字会回退到系统字体。