0
点赞
收藏
分享

微信扫一扫

SVG实现小苹果图标


<svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg" fill="#fff">
<use href="#sprite" x="-90" y="-50" fill="#784421" />
<path
d="M207.978 125.826S68.883 59.302 80.222 199.153c11.34 139.851 92.218 132.58 123.22 124.732 23.478-5.942 108.101 52.161 127-111.125 16.949-146.435-122.464-86.933-122.464-86.933z"
fill="red" />
<path id="sprite"
d="M245.019 128.85s50.214 5.546 41.578 74.839c-2.323 18.641 31.75-34.774 21.922-54.429-9.827-19.654-27.97-29.482-63.5-20.41z" />
</svg>

用SVG实现的一个小苹果图标,只有半KB,小巧玲珑,由3块组成(按照z-index排序):叶子(棕)、苹果(红)、高光(白)。其中叶子和高光共用了一个<path>,但颜色不同。 如果通过二进制的svg格式可以压缩到更小,但目前技术尚不成熟。不过还是很有学习价值的:

SVG实现小苹果图标_前端

举报

相关推荐

0 条评论