svg 基本图形

1. 矩形
2. 圆形
3. 椭圆
4. 线条
5. 折线，多边形
6. 多边形
7. 路径

rect矩形

rx & ry作为2个方向的圆角值
如果设置了 rx，没有设置 ry，ry默认会使用 rx的值

circle圆

ellipse椭圆

line直线

polyline折线

polygon多边形

和 polyline类似，区别：polygon会自动连接最后折线

path路径

可以绘制任意图形

svg基本标签

• svg
• defs
• symbol
• g
• use
• animate

<svg>
  <path />
  <use />
  <symbol></symbol>
  <rect></rect>
  <animate />
  <animateTransform></animateTransform>
</svg>

svg基本属性

• fill 填充
• stroke 描边
• stroke-width 描边粗细
• transform 变形

svg形状

• rect 元素的 width 和 height 属性可定义矩形的高度和宽度
• style 属性用来定义 CSS 属性
• CSS 的 fill 属性定义矩形的填充颜色（rgb 值、颜色名或者十六进制值）
• CSS 的 stroke-width 属性定义矩形边框的宽度

• CSS 的 stroke 属性定义矩形边框的颜色

• x 属性定义矩形的左侧位置（例如，x=”0” 定义矩形到浏览器窗口左侧的距离是 0px）

• y 属性定义矩形的顶端位置（例如，y=”0” 定义矩形到浏览器窗口顶端的距离是 0px）
• rx 和 ry 属性可使矩形产生圆角
• CSS 的 fill-opacity 属性定义填充颜色透明度（合法的范围是：0 - 1）
• CSS 的 stroke-opacity 属性定义笔触颜色的透明度（合法的范围是：0 - 1）

svg使用 use的时候，里面会被替换为 use的内容
svg width=0，height=0是不占用页面空间的

symbol

defs

g

group组

Content-Type

服务器配置错误：是SVG加载失败的常见原因，所以一定要确保你的服务器配置正确。

• 如果不能把服务器配置成给SVG文件发送正确的响应头，
• 这时Firefox很有可能把该文件的标记显示成文本或乱码，甚至会要求查看者选择打开文件的应用程序

要知道：web服务器是否能正确的处理gzip，否则要避免使用gzip压缩的SVG
web-sniffer.net网站，检查服务器是否给SVG文件发送正确的HTTP头

request请求头

Content-Type: image/svg+xml
Vary: Accept-Encoding

gzip请求头

Content-Type: image/svg+xml
Content-Encoding: gzip
Vary: Accept-Encoding