Logo 出现在两个文件中: logo.svg 3 KB时和 logo.png 40 KB时。两个在浏览器选项卡中看起来都一样。将它们炸开以填充投影仪屏幕, 只有一个保持清晰。尝试将它们上传到社交个人资料中, 只有另一个被接受。并且如果您所拥有的只是PNG, 承诺"将PNG转换为SVG"的工具将技术上属于SVG的东西交回, 但不是您的设计师会制作的文件。
本指南解释了两种格式之间的区别,包括每个文件存储的内容、何时使用哪个、将 SVG 渲染为像素时会发生什么以及将 PNG 追踪为矢量形状可以恢复和无法恢复。它包括来自 Toolz 转换器后面的追踪引擎的实数,并且位于 图像工具中心。
TL;博士: SVG是一种矢量格式:它将形状存储为几何形状,因此它可以缩放到任何尺寸而不模糊,非常适合徽标、图标和图表。PNG是一种光栅格式:它存储像素的固定网格,无损,适合屏幕截图、详细艺术品和任何只接受图像的地方。从SVG到PNG,根据您选择的大小是精确的;使用 SVG 到 PNG 转换器 2倍或4倍进行锐利输出。从PNG到SVG是跟踪,它从像素重建形状,没有恢复原始设计。它适用于平面徽标和线条艺术,并且在照片上失败。这里的所有转换都运行客户端,没有上传任何内容,免费,没有注册。
SVG和PNG有什么区别?
SVG描述图像作为绘制它的说明,而PNG将完成的绘制存储为像素,关于两种格式的其他一切都从那一种差异中得出。
SVG 文件,由 W3C 在 中定义 可扩展矢量图形 (SVG) 2,是XML文本,它列出了路径、圆圈、矩形、渐变和文本,每个都有坐标和颜色,里面没有任何内容说图像有多少像素,当浏览器显示它时,渲染器会计算出屏幕上每个形状覆盖的大小的像素,这就是为什么相同的文件在手机和5K显示器上清晰。
PNG 文件,由 W3C 指定为 便携式网络图形 ISO/IEC 15948发布,是一个用DEFLATE压缩的彩色像素网格,压缩是无损的,所以你解码的像素正是保存的像素,一个PNG可以携带完整的alpha通道,每个通道最多16位,它不能做的是添加细节:一个512 x 512 PNG显示在2048 x 2048上,每个像素都拉伸在一个4 x 4的块上,边缘变得柔软或块状。
SVG来源相同的简单徽章:
<svg xmlns="http://www.w3.org/2000/svg" width="240" height="80" viewBox="0 0 240 80">
<rect x="4" y="4" width="232" height="72" rx="16" fill="#1d4ed8"/>
<text x="120" y="52" font-family="Arial, sans-serif" font-size="32"
text-anchor="middle" fill="#ffffff">TOOLZ</text>
</svg>
240像素宽或24,000显示这四行标记是整个图像,它们都保持四行,240 x 80的PNG版本的同一徽章可容纳19,200像素,在960 x 320可容纳307,200。
SVG 与 PNG:我应该使用哪种格式?
SVG用于任何必须缩放的形状, PNG用于任何像素或头部仅接受光栅图像的地方, 此表将它们并排设置:
| 财产 | SVG | 巴布亚新几内亚 |
|---|---|---|
| 图像模型 | 向量:路径、形状、文本 | 光栅:固定像素网格 |
| 标准 | W3C SVG 2 | 巴布亚新几内亚W3C,ISO/IEC 15948 |
| 缩放 | 任何尺寸的锋利 | 放大时模糊或块 |
| 压缩 | 文本;服务器上的 gzip | 无损放气 |
| 透明度 | 是的 | 是的,完整的阿尔法 |
| Logo 的文件大小 | 通常几KB | 生长为像素尺寸 |
| 照片的文件大小 | 不切实际 | 大但合理 |
| 导出后可编辑 | 是的,矢量编辑器中的形状和颜色 | 仅逐像素 |
| 里面有文字 | 可以保持可选择性和可搜索性 | 烘烤成像素 |
| 可以包含脚本 | 是的,这是一个安全问题 | 否 |
| 接受社交上传、办公应用程序、电子邮件 | 常不 | 几乎总是 |
| 最好的 | 徽标、图标、图表、图表、UI 插图 | 屏幕截图、详细艺术、固定规模资产 |
1条实用规则:将SVG作为任何向量的主控,并以每个目的地需要的大小从中导出PNG。永远不要只保留一个标志的PNG,因为将像素变回形状在某种程度上是有损的将形状变为像素不是。
对于照片来说,两种格式都不是正确的交付选择。 PNG 中的照片很大,SVG 中的照片要么是用 XML 包裹的 PNG,要么是跟踪近似。 JPEG、WebP 或 AVIF 是为该作业构建的; webp是什么以及何时使用它 盖照片面。
为什么这么多地方拒绝SVG上传?
因为 SVG 是一个可以包含活动内容的文档,而不仅仅是一个图像。 SVG 规范允许 <script> 元素、事件处理程序属性,例如 onload、外部资源链接和嵌入式 HTML 通过 <foreignObject>。接受SVG上传并随后从自己的域中提供服务的站点最终可能会运行其他人's JavaScript为每个直接打开文件的访问者。
Sanitizing SVG安全是可能的,但很繁琐,因此许多平台采取了更简单的路线:个人资料图片,市场列表,广告网络,许多CMS媒体库和大多数电子邮件客户端仅接受光栅格式。Office文档和聊天应用程序也具有更修补的支持。
这是将 SVG 转换为 PNG 的最常见原因。浏览器将 SVG 绘制为图像是安全的情况,因为 SVG 通过 an 加载 <img> element 或在画布上不允许运行脚本或获取外部文件,Toolz 转换器正是这样渲染 SVG,这使得从未知源转换文件是安全的。
如何在不损失质量的情况下将 SVG 转换为 PNG?
SVG渲染您需要的像素大小,或者更大,并且之后永远不会向上缩放PNG。因为SVG是几何形状,所以在4倍处绘制它与在1倍处绘制它一样精确;这个方向上的所有质量损失都来自于选择太小的输出。
的 SVG 到 PNG 转换器 按此顺序计算尺寸:
- 如果 SVG 根集
width並height、那些是用到的,单位如mm、pt、in並cm转换为 CSS 像素。 - 如果它只有一个
viewBox中, 视图框的宽度和高度被使用。 - 如果两者都没有,则以 1024 x 1024 绘制。
- 如果最长的一侧仍低于 512 像素,则绘图会按比例放大,直到该侧为 512,因为以其声明大小绘制的 24 x 24 图标太小而无法使用。
- SVG比例选项,然后将结果乘以1,2或4。
拿上面的徽章,上面写着 width="240" height="80".最长边在512以下,所以放大到512 x 171,2x时PNG在1024x342出来,未上漆的角留透明,结果下面的注释写明大小和来源,所以没有猜测。
2倍的屏幕选择,其中大多数手机和笔记本电脑每个CSS像素使用两个或多个设备像素,4倍用于打印或大型显示屏。输出上限为100百万像素或16,384像素在一侧,超过50 MB的SVG文件被拒绝;较小的规模修复了第一种情况。
2种内容在渲染中无法存活,URL链接的图片和网页字体被省略,因为作为图片绘制的SVG无法在文件外获取任何东西,因此文本会回落到系统字体;在导出之前将文本转换为矢量编辑器中的轮廓可以避免这种情况,并且动画SVG变成单个静态帧。
我应该将 SVG 转换为 PNG、JPG 或 PDF 吗?
默认情况下转换为 PNG,仅当目的地拒绝 PNG 或需要较小的文件来制作类似照片的图形时转换为 JPG,当您需要打印文档或发送电子邮件时转换为 PDF。
| 目标 | 透明度 | 尺寸 | 你失去的是什么 | 用作 |
|---|---|---|---|---|
| 巴布亚新几内亚 | 保留 | 中等 | 可扩展性 | 上传、幻灯片、应用程序资产以及任何具有透明背景的内容 |
| JPG | 充满白色 | 复杂艺术中最小 | 可扩展性、透明度、一些边缘清晰度 | 仅采用 JPG、电子邮件附件的表格 |
| PDF(光栅化) | 透明区域显示白页 | 较大 | 可扩展性、可选择的文本、可点击的链接 | 校样表、打印图表、将艺术品发送给非设计师 |
的 SVG 到 JPG 转换器 用白色填充透明区域,因为 JPEG 没有 alpha 通道,并应用 Quality 滑块。平坦颜色上的清晰边缘正是 JPEG 压缩留下微弱铃声的地方,因此徽标通常看起来更像 PNG。
的 SVG 到 PDF 转换器 值得明确的警告。它会光栅化:每个 SVG 都被绘制为像素,存储为 PNG,并放置在页面上。PDF 不包含矢量形状,无法选择文本,并且缩放足够远可以显示像素。比例选项仍然有帮助,因为页面大小保持固定,而 2 倍和 4 倍则将更多像素打包到其中(每英寸 72、144 或 288 像素,带 Fit to image)。如果印刷店要求提供矢量 PDF,每 ISO 32000 PDF可以携带真正的矢量路径,但您需要一个矢量编辑器's导出,而不是图像转换器。
PNG转换为SVG是做什么的?
PNG转换为SVG跟踪图像:它将像素分组为颜色相似的区域,并在每个区域周围拟合轮廓,产生填充的矢量路径,它没有找到原始矢量文件,因为一个PNG不包含记录的形状,使输出中的每条边都是从像素中绘制的估计。
后面的示踪剂 PNG 至 SVG 並 JPG 至 SVG toolz 上是 imagetracerjs, 在后台 Web Worker 中运行, 因此页面保持响应式。它分两步工作:
- 颜色减少。 图像减少为一个小调色板,即您在颜色下选择的数字:2、8 或 16。
- 边缘配件。 对于每个颜色层,示踪剂行走每个连接区域的边界,并与其拟合直线和曲线,每个区域产生一条填充路径。
每条路径还获得自己的颜色 1 像素轮廓,如果没有它,相邻的形状会留下发际线间隙,其边缘不太相交,背景显示为细小的白色接缝。
Detail 控制这些轮廓与像素的紧密程度:
| 细节 | 线和曲线公差 | 规格下降到下方 | 预模糊 | 结果 |
|---|---|---|---|---|
| 低 | 2分钱 | 16个积分 | 轻微 | 更平滑、更简单、更小的文件 |
| 中(默认) | 1分钱 | 8个点 | 没有 | 平衡 |
| 高 | 0.5 磅 | 2个点 | 没有 | 紧跟像素,保持微小的形状,更重 |
追踪的 SVG 是用它的写的 width 並 height 设置为原始图像大小和a viewBox 在跟踪像素中,因此它会以您期望的大小打开,并且无论您放置在何处都可以干净地缩放。
追踪能做得很好,它在哪里失败?
Tracing在像矢量一样的图像上做得很好:平坦的颜色,硬边,很少的颜色。它在任何具有连续色调的东西上都失败了,因为照片没有边可以找到,只有渐变。
| 来源 | 它如何追踪 | 建议设置 |
|---|---|---|
| 平面标志,2至6种颜色 | 干净的形状,小文件 | 8 种颜色,中等 |
| 黑白线条艺术、签名、邮票 | 很干净 | 2 种颜色,中色或高色 |
| 具有梯度的图标 | 渐变变成带子 | 16 种颜色,中,然后在编辑器中简化 |
| 纸上扫描绘图 | 纸张纹理变成斑点 | 2色,低 |
| JPG 徽标,带有压缩工件 | 边缘有斑点,背景描绘成一个形状 | 细节少;随后删除背景形状 |
| 带有文字的屏幕截图 | 信件变成了斑点轮廓 | 保持 PNG 状态 |
| 照片 | 斑点的海报形状,巨大的文件 | 不要追踪 |
照片行不是品味问题,在测试Toolz引擎时,一张以16种颜色追踪的2000 px噪声照片花费了28秒,产生了一个46 MB的SVG,比它来自的图像重很多倍,但仍然明显更差,噪声给示踪剂提供了数千个微小区域,并且每个区域都变成了有自己坐标的自己的路径。
That test is why the converster scale any image long than 1200 pixels on a side down to 1200 before tracing。tracing then finished in seconds rather than minutes, and because the output keeps the original width and height, nothing about how the SVG is placed changes。a trace still run a for two minutes is stop with a m
JPG来源添加了两个具体问题,JPEG压缩在尖锐边缘周围留下微弱的块,示踪剂可以变成杂散的形状;低细节稍微模糊,并掉落斑点来反击它。并且JPG没有透明度,因此徽标周围的白色框在艺术品后面变成一个填充的形状。在矢量编辑器中,选择该形状并删除它。
如何从 PNG 徽标中获得干净的 SVG?
从保留设计的最简单的设置开始,查看预览,只在缺少某些东西时添加颜色或细节。较重的设置很少修复不良痕迹;他们为其添加更多路径。
一个可靠的序列:
- 使用您拥有的最大、最干净的来源。 PNG 导出会击败屏幕截图,屏幕截图会击败打印输出的照片。
- Logo中的颜色数一数,在它上面选一个最近的选项,一个双色标记要2,一个五色标记要8。
- Medium 处的跟踪。检查预览和结果下显示的文件大小。
- Low处回溯如果有斑点或粗糙边缘,如果细细的细节消失,则在High处回溯。
- 在向量编辑器中打开最后一步的结果:删除背景形状(如果有),合并应该为 1 的形状,并将任何跟踪的文本替换为正确字体的真实文本。
PNG 追蹤後顯示的檔案大小大於 PNG 時,將其視為一種信號,對於標誌通常表示噪音正在被追蹤;對於其他任何事物,通常表示影像應該保持光柵狀。
如果痕迹是用于切割机、激光雕刻机或刺绣软件,那么即使对于色彩缤纷的设计,两种颜色通常是正确的答案,因为这些机器是根据轮廓而不是填充来工作的。
我可以在一个地方在这些格式之间进行转换吗?
是的。将军 图像转换器 JPG、JFIF、PNG、WebP、AVIF、GIF、BMP、ICO、HEIC、TIFF、PSD、CR2、DNG 和 PDF 一起接受 SVG,并编写 JPG、PNG、WebP、GIF、ICO、PDF 或 SVG。选择 SVG 作为目标跟踪具有相同颜色和细节设置的任何光栅源;为 SVG 源选择光栅目标显示 SVG 比例选项。
专用对页面仅接受自己的源格式,这使得屏幕上的选项保持相关性:SVG 页面显示比例,跟踪页面显示颜色和详细信息。
不提供一种组合:PDF到SVG。转换器用消息拒绝它,它建议的路线是两个步骤:先将PDF页面转换为PNG,然后追踪PNG。如果PDF来自矢量程序,则从该程序导出SVG保留真实路径,是更好的选择。
SVG也可以成为favicon,将其渲染为ICO会在每个图标大小下产生方形PNG图像,512 px最小值意味着一个小图标SVG仍然给出了干净的256 px条目。 Favicon 大小以及 ICO 文件中的内容 涵盖要包含哪些尺寸。
SVG 和 PNG 转换是私有的吗?
是的。渲染、编码和跟踪都发生在客户端、浏览器选项卡内,因此不会上传任何文件。只有当文件需要时才会下载 SVG 解码步骤和跟踪器,这会在您仅在光栅格式之间转换时保持页面亮度。
限制,在一个地方:SVG 文件高达 50 MB,渲染输出高达 100 兆像素,每侧 16,384 像素,光栅源高达 100 兆像素,最长一侧的跟踪速度高达 1200 px,每条跟踪两分钟的上限。工具免费,无需注册,转换每日限制。
