GitHub图标SVG版本

Jean

发布于 2022-11-25 19:28:03

9730

发布于 2022-11-25 19:28:03

文章被收录于专栏：Web行业观察

有没有发现，网页上的图片越来越多地使用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多个字节。

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2022-08-14，如有侵权请联系 cloudcommunity@tencent.com 删除

svg