SVG,你需要知道的......

你还在为从蓝湖上下载的svg图像不标准而头疼吗？

你还在为冗长的svg文件而苦恼吗？

你还在为看不懂其中内容及各个标签含义而抓耳挠腮吗？

别怕，兄弟，这篇文章就是为了解决你的上述烦恼的！

看完它！带你5分钟建立起对svg的基本认知！

是什么

全称：可缩放矢量图形（Scalable Vector Graphics，SVG），是由万维网联盟（W3C）自 1999 年开始开发的开放标准。

主要用于优雅而简洁地渲染不同大小的图形，并和 CSS、DOiM、JavaScript 和 SMIL 等其他网络标准无缝衔接。本质上，SVG 相对于图像，就好比 HTML 相对于文本。

其被定义于 XML 文本文件之中，因此很方便可以使用各种编辑器去编辑。

由于其采用XML,因此有两个注意点：

SVG 的元素和属性必须按标准格式书写，因为 XML 是区分大小写的（这一点和 HTML 不同）
SVG 里的属性值必须用引号引起来，就算是数值也必须这样做。

优点？

SVG 格式提供的是矢量图，这意味着它的图像能够被无限放大而不失真或降低质量。
可以方便地修改内容，无需图形编辑器
因为它们是 DOM（文档对象模型）的一部分，所以可以被 JavaScript 直接操作
易于动画，可以css进行配合

缺点？

不适合复杂图片，编写和渲染成本都会很高
有一定的学习曲线

由此，可以看出它的适用场景，SVG 适用于清晰可缩放、可交互、结构清晰的图形场景，如图标、图表和简单动画，不适合复杂图像和高性能渲染。

用法

下面是 mdn 上一个简单的 svg 示例

html 复制代码

<svg version="1.1"
     baseProfile="full"
     width="300" height="200"
     xmlns="http://www.w3.org/2000/svg">

  <rect width="100%" height="100%" fill="red" />

  <circle cx="150" cy="100" r="80" fill="green" />

  <text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text>

</svg>

可以看到用 svg 标签包裹，其下跟着各种元素就是一个简单的 svg 图片了

简单介绍下 svg 标签特有属性：

version:用于指明 SVG 文档遵循规范，只允许在 svg 标签中使用，接受任何数字，但是有效值只有1.0和1.1（主要有三个规范，除了这两个，2.0已弃用）

baseProfile：说明正确渲染内容所需要的最小的 SVG 语言概述。有效值：none(最小的 SVG 语言配置)，full(正常的概述，适用于 PC）, basic（轻量级的概述，适用于 PDA）， tiny（更轻量的概述，适用于手机），同version一样，2.0版本已弃用。

xmlns：指定命名空间，感兴趣的可以看命名空间速成

viewBox:内部坐标系，定义画图时用的坐标，举个例子， viewBox="0 0 100 100"就是下面这个图，起点为(0,0),终点则为(100,100)，如果是viewBox="50 50 100 100" 则对应起点就为(50,50)

注意，svg 内部元素的渲染顺序是自上而下的，前面的元素先被渲染，后面的元素后被渲染。后面元素被绘制在先前绘制的元素之上。也就是 "后来居上"

常用元素

元素按照种类大体可以按照下面这样分类：

类别	常见元素示例	说明
图形元素	`<circle>`, `<path>`	画各种图形
文本元素	`<text>`, `<textPath>`	显示文字
容器元素	`<g>`, `<defs>`, `<use>`	分组与结构复用
填充/渐变	`<linearGradient>`, `<pattern>`	美化图形填充
滤镜与裁剪	`<filter>`, `<mask>`	高级视觉效果
动画交互	`<animate>`, `<a>`, `<script>`	交互与动画

更具体的可以参照svg元素参考这个链接。

复杂 svg 元素解读

ok，了解上述内容后，我们来看一个稍显复杂的例子,代码如下：

html 复制代码

<svg width="300" height="300" viewBox="0 0 300 300"
  xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="sunGradient" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#FFD700" />
      <stop offset="100%" stop-color="#FFA500" />
    </linearGradient>
  </defs>
  
  <g transform="translate(150,150)">
    <g stroke="#FFA500" stroke-width="4">
      <line x1="0" y1="-80" x2="0" y2="-100" />
      <line x1="0" y1="80" x2="0" y2="100" />
      <line x1="-80" y1="0" x2="-100" y2="0" />
      <line x1="80" y1="0" x2="100" y2="0" />
      <line x1="-56" y1="-56" x2="-70" y2="-70" />
      <line x1="56" y1="56" x2="70" y2="70" />
      <line x1="-56" y1="56" x2="-70" y2="70" />
      <line x1="56" y1="-56" x2="70" y2="-70" />
    </g>

    <circle r="40" fill="url(#sunGradient)" />
  </g>
  <animateTransform attributeName="transform" type="rotate" from="0" to="360" dur="10s" repeatCount="indefinite" />
</svg>

渲染出来的结果如下图：

接下来一步步说明下(这里不详细介绍各元素属性，只简单介绍其功能)：

linearGradient 用于定义渐变，用于 circle 的 fill 属性中
g 用于分组元素，也可以给其下所有元素一起添加一致属性
line 用于画线，这里表现为太阳的光线
circle 用于画圆，这里作为太阳的主题
animateTransform 添加动画，这里是绕中心旋转

怎么样？看到这里是不是有种茅塞顿开的感觉。

总结

svg 是不是也没有你想象中的那么难?

想要了解各元素详细用法或者更多细节可以查阅 MDN 哦！

（ps:都看到这了，点个赞👍再走呗,谢谢大家！😘）