svg从入门到图标绘制和组件封装

原文链接：svg从入门到图标绘制和组件封装 - 知乎

这篇文章写的真实太好了！

svg基础知识

svg（Scalable Vector Graphics），是一种可伸缩矢量图形，基于 xml 语法。和.png、.jpg等标量图相比，它的文件容量较小，在进行放大、缩小或旋转等操作时图象不会失真。但是，矢量图不易制作色彩变化太多的图象，所以在网页开发中，svg常用于图标和图标动画。

下面是在 iconfont 网站上下载的同一个购物车图标的.svg格式和.png格式的文件大小：

svg的使用

作为图像文件

和.png/.jpg等标量图的使用方法完全一样，比如通过img标签和css背景图使用.svg文件：

.cart-icon{height: 100px;width: 100px;background: url(./cart.svg);background-size: cover;
}

也可以通过