SVG 转 ICO Scalable Vector Graphics ↔ Icon 免费 在线 安全
SVG 不是一张图，而是画一张图的说明。这里把说明照着执行一次，按你选的尺寸，再存成 ICO。绘制是在一个沙箱里完成的，文件里的任何东西都跑不起来，也什么都不上传。
转换你的文件
把 SVG 拖到这里，或者选一个。
你的文件不会离开这台设备。一切都在你的浏览器里完成。
不上传任何文件
矢量到底不同在哪里
SVG 不是一张图；它是一套画图的指令——这里一个这么大半径的圆，从这里到那里一条线，这个形状填上那种颜色。它在2001年成为网络标准；因为它存的是画法而不是结果，所以同一个文件既能画出十六像素的图标，也能印成一块广告牌。PNG 或 JPEG 存的恰恰相反：一张已经完成的彩色点阵，对是什么画出了它们毫无记忆。这种不对称决定了本页的一切。从矢量到位图，不过是按选定的尺寸把指令画出来；反过来走则是描摹——程序盯着一张点阵，猜测可能是哪些形状造出了它。
你会在哪里遇到它们
标志、图标、地图、示意图和统计图都以 SVG 存在，因为它们必须在任何尺寸下都清楚可读，而且常常要换颜色。网页小图标和应用图标都由它们做出来。反方向用于矢量必须变成平面图像的那一刻：一个不显示 SVG 的邮件程序、社交网站的预览图、一份要由软件比你更旧的人去打印的文件，或者一个只接受照片的上传表单。
常见问题
我描摹了一张照片，结果惨不忍睹。为什么？
因为描摹本来就不是为照片准备的。它的做法是找出颜色相近的区域，再在每一块周围画出轮廓；这适合平涂的图形——标志、镂空版、线描——却在照片上失败，因为照片里每一块区域都在缓缓融进下一块。描摹程序只得在本无边界之处造出一条边界，结果要么是海报式的平色斑块，要么是一个含着几万个细碎形状的文件。照片还是留在位图里为好。
为什么我的 SVG 在别的软件里看起来不一样？
通常是字体的缘故。含有文字的 SVG 按名字去引用字体，并指望打开它的机器装着那套字体；没有的话就换上别的，版式随之挪位。对症的办法是导出前把文字转为轮廓：每个字母变成一个形状，文件在哪里都一模一样——代价是文字再也不能编辑和选中。滤镜、混合模式这类高级效果，是另一个常见的差异来源。
文件会损失质量吗？
要看两种格式各自装得下什么。在存放同样内容的格式之间转换——PNG 转 BMP，WAV 转 FLAC——不会损失任何东西。转成为省空间而丢弃信息的格式，比如 JPEG 或 MP3，每转一次就损失一点，再转回去也拿不回来。凡是有选择余地的地方，本页倾向于保住原来的质量，而不是做出最小的文件。
我的文件会被上传到什么地方吗？
不会。转换发生在你自己的机器上、你的浏览器里面；文件从不离开它，这里也没有任何服务器能够接收它。正因如此，限制一个大文件的是你自己的内存而不是上传；也正因如此，你转换的任何东西都不可能出现在任何人的日志里——包括我们的。不过，音频和视频工具会在你第一次使用时从本站取来它们的转换引擎——约三十兆字节，仅此一次；此后工作依然完全在你自己的机器上进行。
人们为什么要把 SVG 转成 ICO
ICO 文件就是一个图标。它是出现在浏览器标签页里页面名称旁边、书签列表里、快捷方式上,以及 Windows 程序窗口一角的那张小图。如果你运营网站,你会希望有一个带着你标志的图标。如果你开发程序,你需要一个给它的可执行文件用。而如果你有一个标志,它很可能是 SVG 格式的矢量图。这就是人们把 SVG 转成 ICO 的原因:他们有标志的图稿,而浏览器和操作系统仍然点名要求图标文件。
SVG 不是一张图片。它是一组绘制图片的指令:在这里画一个圆,在那里画一条曲线,用那种颜色填充这个形状。因为它是指令而不是像素,SVG 可以按任何尺寸显示而不会变模糊。相比之下,图标是捆绑在一个文件里的一小批小图,每一张针对一个特定的尺寸。本页对每个尺寸各执行一遍你的 SVG 的指令,并把结果打包进一个 ICO 文件。
本页在你的浏览器中把 SVG 转成 ICO。图稿在一个沙箱里渲染,文件中的任何东西都无法运行,也不会上传任何内容。下面你会看到它是如何工作的、文件包含哪些尺寸、为什么小图标是个特殊问题,以及该怎么办。
转换如何进行
一个文件里的六种尺寸
生成的 ICO 在一个文件里包含六种尺寸:16、32、48、64、128 和 256 像素。每一种都是从 SVG 重新绘制的,而不是从彼此缩小得来,所以 16 像素的版本是在 16 像素下执行指令的结果,而不是大图的缩小副本。它们全都保留透明度。然后操作系统或浏览器会挑选适合图标显示位置的那种尺寸。
一个什么都无法运行的沙箱
原则上,SVG 文件可以包含脚本和对其他东西的引用。为了让这永远不成为风险,图稿在一个文件中任何东西都无法运行的沙箱里渲染。只有形状被绘制出来。即使是你从不完全信任的地方下载的文件,这也是安全的。
为什么重新绘制比缩小更好
当你把一张大图缩小成一张小图时,细节会彼此融合,线条变成灰色。按目标尺寸从矢量指令重新绘制,能给出每种尺寸所能达到的最清晰的结果,因为线条直接被放置在像素网格上。
保留了什么
六种尺寸
你会得到 16、32、48、64、128 和 256 像素,涵盖了图标通常显示的地方:浏览器标签页、任务栏、桌面快捷方式、文件列表和大预览。
透明度
全部六种尺寸都保留透明度。SVG 中没有填充的区域在 ICO 里仍然是透明的,所以图标会呈现它背后的任何颜色。
标志的形状
图稿按原样保留,包括它的颜色和形状。如果 SVG 不是正方形,它会被适配进每个图标的正方形内,而不会被拉伸。
把 SVG 转成 ICO 之前你应该知道的
图标是另一幅图
图标不是一张小图片,它是另一幅图。任何带有细线或小字的东西,在 16 像素下都会糊成一团,无论渲染得多么仔细。在海报上看起来极好的标志,作为 favicon 可能无法辨认。如果结果看起来浑浊,答案是更简单的 SVG,而不是更好的转换。
为最小的尺寸设计
最好的图标是心里想着最小的尺寸做出来的:一个醒目的形状,有限的几种颜色,没有发丝线,除了单个字母之外没有文字。如果可以,为此准备一个简化版的标志作为单独的 SVG,然后用它把 SVG 转成 ICO。
来自别处的字体和图片无法解析
SVG 从别处拉取的字体和图片在沙箱里无法解析。用从服务器加载的网络字体排的文字会回退到系统字体,而从文件外部链接的图片会缺失。为了获得最佳结果,请把文字转为轮廓并嵌入图片。
如何在这里把 SVG 转成 ICO
添加你的图稿
把 SVG 拖到页面上,或从你的设备中选取。它在你的浏览器内部读取,不会上传。
转换
按下按钮。六种尺寸依次绘制,这需要片刻。在完成之前请保持页面打开。
下载并测试
下载 ICO,并在它将被使用的地方试一试。在网站上,把它以 favicon.ico 的名称放在根文件夹中,或在页面的 head 里链接到它,然后看看浏览器的标签页。在 Windows 上,你可以把它指定给一个快捷方式,看看它在各种尺寸下的样子。
进一步了解 SVG 和 ICO
矢量与捆绑包
SVG 是可以按任何尺寸渲染的单幅图稿。ICO 是里面装着几张图的容器,每张的尺寸固定。显示图标的软件会选择最接近它所需尺寸的那张图,从而避免模糊的缩放。把 SVG 转成 ICO,就是按容器预期容纳的尺寸来渲染图稿。
图标用在哪里
浏览器用最小的尺寸做标签页,用较大的做书签和新标签页。Windows 用它们做任务栏、开始菜单和资源管理器。移动设备有自己的一套主屏幕图片尺寸,通常是 PNG 文件而不是 ICO。如果你在为手机准备应用图标,按平台要求的尺寸做SVG 转 PNG是更好的路线。
今天的 favicon
现代浏览器接受 PNG 甚至 SVG 作为 favicon,但 ICO 仍然是处处可用的格式,包括旧浏览器、一些订阅阅读器和自动查找 favicon.ico 的工具。有一个是稳妥的选择。
具体常见情形
网站的 favicon
把 SVG 转成 ICO,把文件以 favicon.ico 保存在你网站的根目录并链接到它。每个浏览器的标签页都将带着你的标志,这让页面在众多打开的标签页中容易辨认。
Windows 程序的图标
Windows 上的程序在它的可执行文件和快捷方式里带着图标。开发者为此需要一个多尺寸的 ICO。你得到的六种尺寸涵盖了通常的要求。
快捷方式与文件夹
在 Windows 上你可以给快捷方式或文件夹设置你自己的图标。用你的标志做成的 ICO 让你的桌面或项目文件夹更容易辨认。
小企业网站与博客
favicon 是让网站显得完整的小细节。如果你的标志是 SVG,这次转换就会产生建站工具要你上传的文件。
把 SVG 转成 ICO 之前的实用建议
简化图稿
去掉细线,舍弃文字或只保留一个字母,并使用醒目的形状。转换之前,在你的绘图程序里以 16 像素查看 SVG,看看最小的图标会是什么样子。
把图稿做成正方形
图标是正方形的。如果你的标志是宽的,把它放在一个带一些边距的正方形画布上,这样它不会被裁掉,也不会在正方形里显得很小。
检查对比度
浏览器标签页可能是浅色或深色的。对两种背景都有强烈对比的标志更容易看清。深色标志上的一圈细白色轮廓,或实心的彩色形状,通常有效。
保留 SVG
SVG 是母版。如果你以后决定更改图标,你需要它来再次把 SVG 转成 ICO。
人们在转换前问的问题
为什么我的图标在 16 像素下看起来模糊?
因为 16 像素太少了。细线和小字在那里无法表现。请简化图稿,而不是寻找更好的转换。
文件包含哪些尺寸?
16、32、48、64、128 和 256 像素,每一种都从 SVG 重新绘制,全都带透明度。
透明度会保留吗?
会。SVG 中透明的背景在 ICO 的全部六种尺寸中都是透明的。
我可以把文件用作 favicon 吗?
可以。把它命名为 favicon.ico,放在你网站的根目录,或在你页面的 head 里链接到它。
我的文件会被上传吗?
不会。转换在你的浏览器中运行,文件从不离开你的设备。
我能从图标做出 SVG 吗?
在一定程度上可以。ICO 转 SVG把图标描摹成形状,不过小尺寸限制了能还原的内容。
把 SVG 转成 ICO 时的明智选择
ICO 还是 PNG?
要处处可用的 favicon,选 ICO。对手机上的应用图标和网页上的图片,PNG 是通常的格式。SVG 转 PNG给你这个。
考虑整套
如果你在准备一个品牌,你可能需要 PNG 的标志、ICO 的 favicon 和 PDF 的可打印版本。SVG 转 PDF让图稿作为图稿用于打印。
在真实的标签页上测试
在实际的浏览器标签页里看图标,浅色和深色主题下都看。那是大多数人会遇到它的地方。
转换之后获得好结果
清除浏览器缓存
浏览器会长时间保存 favicon。如果你替换了图标却仍然看到旧的,请清除缓存或在隐私窗口中打开网站。
检查所有尺寸
如果你有能打开 ICO 文件的工具,请查看每种尺寸。在 256 像素下很好的标志可能在 16 像素下无法辨认,这会告诉你是否需要简化。
正确命名
浏览器默认在网站的根目录查找 favicon.ico。除非你明确链接到文件,否则请保持这个名称。
设计一个能熬过最小尺寸的标志
从 16 像素的网格开始
在把 SVG 转成 ICO 时获得好结果最可靠的办法,是心里想着最小的尺寸来设计。想象一个十六乘十六个方格的网格,问问你能在上面放什么。一个圆、一个字母、一个简单的符号:可以。一个签名、一个带格言的徽章:不行。无论你画什么,较大的尺寸都会看起来不错,所以小的才是设计要面对的约束。
使用醒目的形状和很少的颜色
两三种对比清晰的颜色,比许多颜色的渐变更易读。占满大半个正方形的实心形状,比细轮廓更容易辨认,因为每个像素承载了更多的标志。
留一点喘息的空间
触及正方形边缘的标志可能显得局促,而且有些系统会加上它们自己的圆角或边框。在最小尺寸下留一两个像素的边距,能让形状保持完整。
把它与其他图标并排看
打开几个知名网站的标签页并比较。你会看到效果最好的图标都非常简单。在把 SVG 转成 ICO 之前借用这种自律,你的结果就能在一排标签页中站得住。
隐私与处理
为什么本地转换对图稿重要
标志和品牌图案在发布之前可能是机密的。许多在线转换器把你的文件上传到服务器,处理后送回结果,并且有一段时间,一份副本留在你无法控制的机器上。这里由你自己的浏览器干活,所以图稿留在你的设备上。
你离开时会发生什么
当你关闭页面时,转换后的文件会从浏览器中消失,所以请先下载。关于你图稿的任何东西都不会被保留。
如果出了问题
图标是空白的
SVG 可能缺少尺寸或视图框。在文本编辑器中打开它,检查它是否有 width 和 height 或视图框,或在你的绘图程序里修复它。
图标被裁掉了
有些 SVG 的元素超出了它们声明的区域。在原稿中调整视图框,让所有东西都在里面。
页面卡住了
一切都在你的设备上运行。请在电脑上重试,或使用更简单的图稿。
相关工具
同一系列的工具涵盖相邻的任务。要得到你选择尺寸的图片,使用SVG 转 PNG或SVG 转 JPG。要得到在任何缩放下都保持清晰的文档,SVG 转 PDF让图稿作为图稿保留。要把图片描摹回形状,ICO 转 SVG、PNG 转 SVG和JPG 转 SVG能完成这项工作。
一个实例
假设你开了一个小博客,你的标志是 SVG:一片绿叶,下面是博客的名字。你把 SVG 拖到这里并按下按钮。ICO 生成了,在浏览器标签页里,叶子可以辨认,但下面的名字无法辨认。你打开你的绘图程序,做一个只有叶子的版本,再次把 SVG 转成 ICO,并把新文件上传为 favicon.ico。标签页现在显示一片清晰的绿叶,而完整的标志留在页面上。
一份简短的清单
转换之前
简化图稿。把它做成正方形。把文字转为轮廓并嵌入图片。
转换时
在文件准备好之前停留在页面上。
转换之后
在浏览器标签页和快捷方式里、浅色和深色主题下测试 ICO,并保留 SVG。
常见错误
使用完整的标志
文字和精细的细节在 16 像素下会消失。请使用简化的标志。
指望更好的转换来修复复杂的图稿
问题在尺寸,而不在工具。请简化 SVG。
忘了缓存
旧的 favicon 可能在浏览器里滞留。在断定新的失败之前,先清除缓存。
你的图稿留在你的设备上
转换在本地进行。你的图稿由你自己的浏览器读取,在那里绘制,然后作为 ICO 交还给你。没有任何内容被上传,所以服务器上不会留下副本,别人也看不到它。对于未发布的品牌标志,这是把 SVG 转成 ICO 的安全方式。
小结
要在这里把 SVG 转成 ICO,拖入图稿并按下按钮。SVG 不是图片,而是绘制图片的指令,在这里这些指令对每个尺寸各执行一遍,结果保存为 ICO。图稿在一个文件中任何东西都无法运行的沙箱里渲染,也不会上传任何内容。文件包含六种尺寸:16、32、48、64、128 和 256 像素,每一种都从 SVG 重新绘制,而不是从彼此缩小得来,而且全都带透明度。图标不是一张小图片,它是另一幅图:任何带有细线或小字的东西,在 16 像素下都会糊成一团,无论渲染得多么仔细。如果结果看起来浑浊,答案是更简单的 SVG,而不是更好的转换。从别处拉取的字体和图片无法解析。