写到这里，我忽然意识到自己有点孤陋寡闻了，因为我看到现在好多设计师都没有使用 PS 了，而是使用 Sketch 和 AI 之类的失量工具做创作，作品都是支持转成SVG的。
我现在也看到了越来越多的网站，里面使用图片也是SVG , 比如 <image src="xx.svg"> ，import svg from './xx.svg' 等等。效果其实一点也不逊于 png、jpg!
做为一个刚接触SVG编程的小粉，发现SVG适用的领域还很多，还是很欣慰的，也搞清楚了很多事情。比如之前一直不理解SVG为什么需要有这么多种使用样式的方式，现在知道了。
使用样式的方式
内联样式
内联样式应该是前端同志们最熟悉但又最抵制的一种写法。
<rect x="10" y="10" width="80" height="20"
style="stroke:blcak;fill:red;fill-opacity:0.8;"
/>
内部样式
在SVG内部，还可以像HTML这样的写法
<svg>
<defs>
<style type="text/css"><![CDATA[
rect{
stroke:blcak;
fill:red;
fill-opacity:0.8;
}
]]</style>
</defs>
<rect x="10" y="10" width="80" height="20"/>
</svg>
外部样式表
这个实际上就是我们的css了，在我们平时的 SVG IN HTML，指的就是 html的 外联css 和 <style> 标签里面的样式。但是做为独立存在的 SVG 想要使用也是可以的,而且写法还很多，以下是三种写法：。
<!--写法一：使用link -->
<svg xmlns="http://www.w3.org/2000/svg">
<link xmlns="http://www.w3.org/1999/xhtml" rel="stylesheet" href="mystyles.css" type="text/css"/>
<rect x="10" y="10" width="80" height="20"/>
</svg>
<!--写法二支持HTML5的 @include的写法 -->
<svg>
<defs>
<style type="text/css">
@import url(mystyles.css);
</style>
</defs>
<rect x="10" y="10" width="80" height="20"/>
</svg>
<!--写法三：使用xml-stylesheet-->
<?xml-stylesheet href="common.css"?>
<svg>
<rect x="10" y="10" width="80" height="20"/>
</svg>
表现类属性
在SVG里面，有很多样式是可以直接作为表现类属性使用的，比如 fill stroke 等等，而且在SVG的世界里，而且很多表现类属性又同时可以使在样式表。
需要注意的是，如果表现属性设置了样式，那么样式就会覆盖掉表样属性，比如刚才的代码改为：
<svg>
<defs>
<style type="text/css"><![CDATA[
rect{
stroke:red;
fill:red;
fill-opacity:0.8;
}
]]</style>
</defs>
<rect stroke="black" x="10" y="10" width="80" height="20"/>
</svg>
它的 stroke="black" 这一段就会被样式 stroke:red 覆盖掉，最终显示为红色。
基本样式
所有样式请参考这里：https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute 。（这里的属性太全了，很多属性W3C的规范也没有提到）。
其实基本样式很简单，看的懂HTML的CSS样式，就肯定能看的懂SVG的CSS样式。所以我最第一次接触SVG时，心里上就有这么一个问题：
SVG为什么要另起炉灶，不直接复用HTML的CSS属性就行了呢？
我个人认为是这样：
他们产生的出发点不同，解决的问题也不同，所以实际上是一个没有太在意义的问题，而碰巧他们都是基于XML的文本语言，支持CSS，所以为它们设计的API当然就不同了。
HTML设计时，主要就是解决的就是超文本传输（HTTP）时，数据的展示标记问题，将XML定义成了<talbe><ul><p><h1>之类的文档语义型的结构体。
而SVG则是一个图像系统，准确的说是失量图形系统，它可要以一定的比例转变为位图后，才能进行显示，它的设计理念就要以更容易的进行 相关失量计算 而服务了。
虽然二者不同，但实际上有一部份还是共享的，它们可以在 html/css 和 svg/css 里面通用 ：
下面是我整理的（只整理了W3C规范内的），只简明的写一下，详细情况可参考上面那个网站 https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute
与CSS共用型
| 字体系列 | |
|---|---|
| font | 复合属性。文本特性 |
| font-family | 字体Family |
| font-size | 字体大小 |
| font-size-adjust | 用来保证首选字体的x-height值 |
| font-stretch | 横向拉伸变形 |
| font-style | 字体样式 |
| font-variant | （英文字母）大小写转换 |
| font-weight | 文本字体的粗细 |
| 文本系列 | |
| direction | 排列方式 ： ltr |
| letter-spacing | 字符间格 |
| text-decoration | 文本装饰 |
| word-spacing | 空格处理方式 |
| 其它属性 | |
| clip | 只支持最外层的SVG元素 |
| color | 说明：这个是内置，不是表面上的支持，为fill,storke提供value的 |
| cursor | 鼠标移动动作 |
| display | 展示模式 |
| visibility | （占位）是否展示 |
| overflow | 只能适配固定了视口(viewPort)的SVG |
| CSS3: | 官方文档里面把它写成了SVG专用，实际上CSS3已经支持，可以通用了 |
| opacity | 透明度 |
| pointer-events | 忽略指向事件 |
SVG 专用型
| 描边与填充 | 重点:需要掌握，使用频率最高 |
|---|---|
| stroke | 描边颜色 |
| stroke-width | 笔画宽度 |
| stroke-opacity | 笔画透明度 |
| stroke-linecap | 线帽 |
| stroke-linejoin | 交接 |
| stroke-miterlimit | 当线帽设置为 stroke-linejoin=”miter” 才有效，设置最大高度。 |
| stroke-dasharray | 自定义虚线缝隙，传一个数组 |
| stroke-dashoffset | 虚线开始的位置，支持数字和百分比 |
| fill | 填充颜色 |
| fill-opacity | 填充透明度 |
| fill-rule | 填充规则 |
| 渲染及颜色图形 | |
| shape-rendering | 用于 <path> 可以设置平滑度之类的，用于提高渲染速度 |
| text-rendering | 用于 <text> 也是提高平滑度的，感觉都没什么用。 |
| image-rendering | 用于 <image> 的渲染模式 |
| color-rendering | |
| color-profile | |
| color-interpolation | |
| color-interpolation-filters | |
| marker | 路径上的标记 |
| marker-start | 标记开始 |
| marker-mid | 标记中间 |
| marker-end | 标记结束 |
| 剪切、蒙板、渐变、滤镜 | |
| clip-path | 剪裁图么 |
| clip-rule | 剪裁规则 |
| mask | 蒙板 |
| stop-color | 渐变位置颜色 |
| stop-opacity | 渐变位置透明度 |
| filter | 使用滤镜 |
| enable-background | 使用背景 |
| flood-color | 仅适用于 feFlood 滤镜的样式 |
| flood-opacity | 仅适用于 feFlood 滤镜的样式 |
| lighting-color | 仅适用于 feDiffuseLighting、feSpecularLighting 滤镜的样式 |
| 文本 | |
| text-anchor | 文本相对于文本坐标 x 处的处置。可以理解为对齐方式 |
| writing-mode | 书写顺序 ：left-to-right, right-to-left, or top-to-bottom |
| baseline-shift | 相对于父结点的baseline |
| alignment-baseline | 相对于父结点的baseline |
| dominant-baseline | 相对于父结点的baseline |
| glyph-orientation-horizontal | 水平字形取向 |
| glyph-orientation-vertical | 垂直字形取向 |
| kerning | 字距调整，仅用于 |
小结
通过SVG的填充和描边的CSS定义，可以看出SVG与HTML的绘制方式上的区别。再加上很多常用的CSS可以复用，（再加上大部分的属性很少使用，）所以相对来说，还是非常简单的。