GitHub图标SVG版本
GitHub 版本 图标 SVG
2023-06-13 09:13:25 时间
有没有发现,网页上的图片越来越多地使用svg矢量图来替代光栅图png,直接将svg嵌入到html中非常方便,事实上,光栅图比如相机照片中绝大部分像素都被人眼忽略掉了,造成大量冗余,矢量图才理应是最合理的图片格式。如今,各大网站的图标基本都是svg,比如GitHub:
然后这个图片是左右对称的,完全可以只画一半,再复制出另一半,然后左右翻转一下,利用<use>元素轻松实现:https://developer.mozilla.org/en-US/docs/Web/SVG/Element/use,同时配合transform属性进行几何变换:https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform,于是就有了如下代码:
<svg style="background:white;" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg">
<path fill="black" id="right"
d="M 8 3.86 C 8.7 3.86 9.38 3.95 10 4.13 C 11.55 3.09 12.22 3.31 12.22 3.31 C 12.66 4.41 12.38 5.23 12.3 5.43 C 12.81 6 13.12 6.7 13.12 7.58 C 13.12 10.65 11.25 11.33 9.47 11.53 C 9.76 11.78 10 12.26 10 13 C 10 14.08 10 14.94 10 15.21 C 10 15.42 10.15 15.67 10.55 15.59 C 13.806 14.491 16 11.437 16 8 C 16 3.58 12.42 0 8 0 Z">
</path>
<use href="#right" x="-16" style="transform: scaleX(-1);" />
</svg>
只有500多个字节。
相关文章
- Git和Github之Git命令行操作
- GitHub收获1W星标《迁移学习导论》重新整理升级
- github 项目地址
- GitHub经典教材!阿里P8的这份SpringBoot精髓到底厉害在哪里?
- github上fork2.4k,star8.7k的这款状态机,原来长这样!
- 用 iPad 来写代码,GitHub 又一代码编辑器,开源了!
- 利用CloudFlare的Workers和Pages反代Github并缓存实现Github文件加速访问
- 如何使用Legitify保护你的GitHub组织资产安全
- 编程神器Copilot逐字抄袭他人代码?GitHub 回应:相似,但不同......
- 【错误记录】GitHub 提交报错 ( OpenSSL SSL_connect: SSL_ERROR_SYSCALL in connection to github.com:443 )
- 高通利用DMCA通知迫使GitHub关闭100多个代码库
- Google将Dart项目迁移至GitHub平台,并中止了Chrome Dev Editor的开发