[CSS] SVG的使用

使用svg代替iconfont的好处：

  • iconfont无法显示复杂的图形；
  • svg是矢量图；
  • svg标签内部可以添加title和desc标签，有利于SEO和无障碍阅读。

svg sprite图：将若干个svg图标组合到一个文件上，可以减少网络请求的次数，通过#获取指定的图标：

<svg class="icon">
    <use xlink:href="img/sprite.svg#icon-example"></use>
</svg>

在 CSS 中可以很方便的编辑图标的样式（大小、颜色）：

.icon{
    width: 2rem;
    height: 2rem;
    fill: #999;
}

资源网站：❍ IcoMoon App

image-20240208175218689

选择需要的图标，然后点击右下角的Generate SVG & More：

image-20240208175328830

默认会生成SVG和PNG，可以点击左下角的齿轮图标设置，取消勾选PNG，仅下载svg：

image-20240208175459771
posted @ 2024-02-08 17:58  feixianxing  阅读(52)  评论(0)  编辑  收藏  举报