Tailwind SVG

什么是SVG呢？

• SVG（Scalable Vector Graphics）是一种可伸缩矢量图形
• SVG基于可扩展标记语言XML
• SVG是用于描述二维矢量图形的图形格式
• SVG是由W3C制定的一个开放标准

SVG提供涵盖嵌套转换、裁剪路径、Alpha通道、滤镜效果等功能，还就具备传统图像没有的矢量功能，在任何高清设备上都很高清。由于SVG采用XML语法，图形中的文本内容可直接被浏览器访问，有利于搜索引擎SEO和无障碍读屏软件读取。

SVG与Icon Font字体图标有什么不同之处呢？

1. 渲染方式不同
   Icon Font字体图标采用的是字体渲染，在一倍屏幕下渲染效果并不好，在细节部分锯齿感很明显。SVG由于是图形因此采用的是图形渲染，因此SVG没有这种问题。
2. 多色支持
   Icon Font作为字体无法支持多色图形，这对设计造成许多限制，因此也成为其发展的瓶颈。
3. 可读性
   Icon Font字体图标在页面中使用Unicode字符集中的符号调用对应的图标，这种方式不论是在浏览器、搜索引擎还是无障碍方面都没有SVG好。

Tailwind中为SVG图片提供三种工具类用于设置SVG图片的样式

• 填充颜色fill
• 描边颜色stroke
• 描边宽度stroke width

填充颜色fill

工具类	属性
.fill-current	fill:currentColor;

使用.fill-current工具类将SVG图片的填充颜色设置为当前文本的颜色，即实现通过控制文本颜色来达到控制SVG图形图片的样式。

描边颜色stroke

设置SVG元素的描边颜色

工具类	属性
.stroke-current	stroke:currentColor;

.stroke-current工具类用于设置元素的描边颜色为当前文本的颜色，

描边厚度stroke width

CSS中的strick-width属性用于设置元素目标宽度，Tailwind为常见描边宽度提供了常见的工具类。

工具类	属性
.stroke-0	stroke-width:0;
.stroke-1	stroke-width:1;
.stroke-2	stroke-width:2;