favicon和avatar一般是博客网站必不可少的图标,之前都是采用比较传统的格式制作。特别是ico格式,存储空间大,分辨率又低。

avatar.jpg   2k
favicon.ico  4.8k

而使用SVG(可缩放矢量图形 Scalable Vector Graphics)格式的图标,存储空间将大大减小。

avatar.svg   422B
favicon.svg  418B

另外得益于矢量化,即使图标放大到屏幕这么大也不会有任何模糊。

示例

我的logo图标

制作

那么如何优雅的把我们的pngjpg的图片转换为svg格式尤其重要。

  1. 使用免费在线转换网站,上传我们的图片进行转换。特别注意需要转换后以path形式绘制的才行。如下2个网站都是可以的:
    svgcreatorsvgtrace

  2. 在转换完成后,即可下载svg文件,这时候已经可以使用。不过我们最好还是进行压缩,极致的做法还需要手动删减小数点后的值。
    SVG在线压缩合并工具

  3. 最后就可以直接在html标签内使用了。

<link rel="icon" href="https://static.meekdai.com/favicon.svg" type="image/svg+xml" />
<img src="https://static.meekdai.com/avatar.svg">

当然,如果你的faviconavatar使用同一个svg那就更好了。另外,图标甚至还能直接使用svg设计,可以在runoob学习用法。

其他

Github 官方图标库 Octicons
Bootstrap官方图标库Bootstrap Icon
阿里巴巴矢量图标库iconfont
SVG查看编辑器SVG Viewer

❤️ 转载文章请注明出处,谢谢!❤️