We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
favicon和avatar一般是博客网站必不可少的图标,之前都是采用比较传统的格式制作。特别是ico格式,存储空间大,分辨率又低。
ico
avatar.jpg 2k favicon.ico 4.8k
而使用SVG(可缩放矢量图形 Scalable Vector Graphics)格式的图标,存储空间将大大减小。
avatar.svg 422B favicon.svg 418B
另外得益于矢量化,即使图标放大到屏幕这么大也不会有任何模糊。
矢量化
我的logo图标
Gmeek-html<img src="https://static.meekdai.com/avatar.svg">
那么如何优雅的把我们的png和jpg的图片转换为svg格式尤其重要。
png
jpg
svg
使用免费在线转换网站,上传我们的图片进行转换。特别注意需要转换后以path形式绘制的才行。如下2个网站都是可以的: svgcreator 和 svgtrace
path
在转换完成后,即可下载svg文件,这时候已经可以使用。不过我们最好还是进行压缩,极致的做法还需要手动删减小数点后的值。 SVG在线压缩合并工具
最后就可以直接在html标签内使用了。
<link rel="icon" href="https://static.meekdai.com/favicon.svg" type="image/svg+xml" /> <img src="https://static.meekdai.com/avatar.svg">
当然,如果你的favicon和avatar使用同一个svg那就更好了。另外,图标甚至还能直接使用svg设计,可以在runoob学习用法。
favicon
avatar
Github 官方图标库 Octicons Bootstrap官方图标库Bootstrap Icon 阿里巴巴矢量图标库iconfont SVG查看编辑器SVG Viewer
The text was updated successfully, but these errors were encountered:
No branches or pull requests
favicon和avatar一般是博客网站必不可少的图标,之前都是采用比较传统的格式制作。特别是
ico
格式,存储空间大,分辨率又低。而使用SVG(可缩放矢量图形 Scalable Vector Graphics)格式的图标,存储空间将大大减小。
另外得益于
矢量化
,即使图标放大到屏幕这么大也不会有任何模糊。示例
我的logo图标
Gmeek-html<img src="https://static.meekdai.com/avatar.svg">
制作
那么如何优雅的把我们的
png
和jpg
的图片转换为svg
格式尤其重要。使用免费在线转换网站,上传我们的图片进行转换。特别注意需要转换后以
path
形式绘制的才行。如下2个网站都是可以的:svgcreator 和 svgtrace
在转换完成后,即可下载svg文件,这时候已经可以使用。不过我们最好还是进行压缩,极致的做法还需要手动删减小数点后的值。
SVG在线压缩合并工具
最后就可以直接在html标签内使用了。
当然,如果你的
favicon
和avatar
使用同一个svg
那就更好了。另外,图标甚至还能直接使用svg
设计,可以在runoob学习用法。其他
Github 官方图标库 Octicons
Bootstrap官方图标库Bootstrap Icon
阿里巴巴矢量图标库iconfont
SVG查看编辑器SVG Viewer
The text was updated successfully, but these errors were encountered: