什么是svg？也许现在很多人都听说过svg的人比较多，但不一定了解什么是svg：svg(scalable vector graphics 一大串看不懂的英文)可伸缩矢量图形，它是用xml格式来定义用于网络的基于矢量的图形，而它的特点就是 图像在放大或改变尺寸的情况下其图形质量不会有所损失，同时他和dom一样都是w3c的一个标准。
这里解释下位图和矢量图：
位图，也就是我们经常能看到的图片，他是一个平面上密集排布的店的集合，也就是说它是由一个个点构成的。而如果对他进行放大那么相对应的点就会进行放大，这样就会让图片显得十分不清晰粗糙。
矢量图，也称为面向对象的图像或绘图图像，在数学上定义为一系列由线连接的点。矢量文件中的图形元素称为对象。每个对象都是一个自成一体的实体，它具有颜色、形状、轮廓、大小和屏幕位置等属性。它的特点是放大后图像不会失真，和分辨率无关，适用于图形设计、文字设计和一些标志设计、版式设计等。矢量图格式有CGM, SVG, AI (Adobe Illustrator), CDR (CorelDRAW), PDF, SWF, VML等等。
(ps:本随笔下面的内容部分来自W3Cschool)
一个简单的SVG
xml version="1.0" standalone="no"?>
DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red" />
svg>
SVG 代码解析：
第一行包含了 XML 声明。请注意 standalone 属性！该属性规定此 SVG 文件是否是"独立的"，或含有对外部文件的引用。standalone="no" 意味着 SVG 文档会引用一个外部文件 - 在这里，是 DTD 文件。
第二和第三行引用了这个外部的 SVG DTD。该 DTD 位于 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"。该 DTD 位于 W3C，含有所有允许的 SVG 元素。
SVG 代码以
SVG 的
stroke 和 stroke-width 属性控制如何显示形状的轮廓。我们把圆的轮廓设置为 2px 宽，黑边框。fill 属性设置形状内的颜色。我们把填充颜色设置为红色。
关闭标签的作用是关闭 SVG 元素和文档本身。
注释：所有的开启标签必须有关闭标签！
SVG的优势
- SVG 可被非常多的工具读取和修改（记事本也可以轻松打开修改）
- SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强。
- SVG 是可伸缩的
- SVG 图像可在任何的分辨率下被高质量地打印
- SVG 可在图像质量不下降的情况下被放大
- SVG 图像中的文本是可选的，同时也是可搜索的（很适合制作地图）
- SVG 可以与 Java 等技术一起运行
- SVG 是开放的标准
- SVG 文件是纯粹的 XML
SVG 文件可通过以下标签嵌入 HTML 文档：
SVG的代码可以直接嵌入到HTML页面中，或您可以直接链接到SVG文件。
矩形
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> <rect x="20" y="20" rx="20" ry="20" width="250" height="100" style="fill:red;stroke:black; stroke-width:5;opacity:0.5"/> svg>
-
rect 元素的 width 和 height 属性可定义矩形的高度和宽度
-
style 属性用来定义 CSS 属性
-
CSS 的 fill 属性定义矩形的填充颜色（rgb 值、颜色名或者十六进制值）
-
CSS 的 stroke-width 属性定义矩形边框的宽度
-
CSS 的 stroke 属性定义矩形边框的颜色
-
x 属性定义矩形的左侧位置（例如，x="0" 定义矩形到浏览器窗口左侧的距离是 0px）
-
y 属性定义矩形的顶端位置（例如，y="0" 定义矩形到浏览器窗口顶端的距离是 0px）
-
CSS 的 fill-opacity 属性定义填充颜色透明度（合法的范围是：0 - 1）
-
CSS 的 stroke-opacity 属性定义笔触颜色的透明度（合法的范围是：0 - 1）
-
CSS opacity 属性用于定义了元素的透明值 (范围: 0 到 1)。
-
rx 和 ry 属性可使矩形产生圆角。
圆形
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/> svg>
-
cx和cy属性定义圆点的x和y坐标。如果省略cx和cy，圆的中心会被设置为(0, 0)
-
r属性定义圆的半径
椭圆
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <ellipse cx="240" cy="100" rx="220" ry="30" style="fill:purple"/> <ellipse cx="220" cy="70" rx="190" ry="20" style="fill:lime"/> <ellipse cx="210" cy="45" rx="170" ry="15" style="fill:yellow"/> svg>
-
CX属性定义的椭圆中心的x坐标
-
CY属性定义的椭圆中心的y坐标
-
RX属性定义的水平半径
-
RY属性定义的垂直半径
线
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2"/> svg>
-
x1 属性在 x 轴定义线条的开始
-
y1 属性在 y 轴定义线条的开始
-
x2 属性在 x 轴定义线条的结束
-
y2 属性在 y 轴定义线条的结束
多边形
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <polygon points="200,10 250,190 160,210" style="fill:lime;stroke:purple;stroke-width:1"/> svg>
- points 属性定义多边形每个角的 x 和 y 坐标
折线 （用于创建任何只有直线的形状）
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <polyline points="20,20 40,25 60,40 80,120 120,140 200,180" style="fill:none;stroke:black;stroke-width:3" /> svg>
路径
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <path d="M150 0 L75 200 L225 200 Z" /> svg>
下面的命令可用于路径数据：
- M = moveto
- L = lineto
- H = horizontal lineto
- V = vertical lineto
- C = curveto
- S = smooth curveto
- Q = quadratic Bézier curve
- T = smooth quadratic Bézier curveto
- A = elliptical Arc
- Z = closepath
注意：以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。
文本
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <text x="0" y="15" fill="red" transform="rotate(30 20,40)">I love SVGtext> svg>
SVG 滤镜
SVG可用的滤镜是：
- feBlend - 与图像相结合的滤镜
- feColorMatrix - 用于彩色滤光片转换
- feComponentTransfer
- feComposite
- feConvolveMatrix
- feDiffuseLighting
- feDisplacementMap
- feFlood
- feGaussianBlur
- feImage
- feMerge
- feMorphology
- feOffset - 过滤阴影
- feSpecularLighting
- feTile
- feTurbulence
- feDistantLight - 用于照明过滤
- fePointLight - 用于照明过滤
- feSpotLight - 用于照明过滤
除此之外，您可以在每个 SVG 元素上使用多个滤镜！
和
所有互联网的SVG滤镜定义在
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <defs> <filter id="f1" x="0" y="0"> <feGaussianBlur in="SourceGraphic" stdDeviation="15" /> filter> defs> <rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f1)" /> svg>
-
元素id属性定义一个滤镜的唯一名称 -
元素定义模糊效果 -
in="SourceGraphic"这个部分定义了由整个图像创建效果
-
stdDeviation属性定义模糊量
-
元素的滤镜属性用来把元素链接到"f1"滤镜
SVG
第一个例子偏移一个矩形（带
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <defs> <filter id="f1" x="0" y="0" width="200%" height="200%"> <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" /> <feBlend in="SourceGraphic" in2="offOut" mode="normal" /> filter> defs> <rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f1)" /> svg>
元素id属性定义一个滤镜的唯一名称 元素的滤镜属性用来把元素链接到"f1"滤镜
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <defs> <filter id="f1" x="0" y="0" width="200%" height="200%"> <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" /> <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" /> <feBlend in="SourceGraphic" in2="blurOut" mode="normal" /> filter> defs> <rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f1)" /> svg>
元素的stdDeviation属性定义了模糊量
SVG 渐变
渐变是一种从一种颜色到另一种颜色的平滑过渡。另外，可以把多个颜色的过渡应用到同一个元素上。
SVG渐变主要有两种类型：
-
Linear
-
Radial
SVG 线性渐变 -
线性渐变可以定义为水平，垂直或角渐变：
-
当y1和y2相等，而x1和x2不同时，可创建水平渐变
-
当x1和x2相等，而y1和y2不同时，可创建垂直渐变
-
当x1和x2不同，且y1和y2不同时，可创建角形渐变
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <defs> <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" /> <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" /> linearGradient> defs> <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" /> svg>
-
标签的id属性可为渐变定义一个唯一的名称 -
标签的X1，X2，Y1，Y2属性定义渐变开始和结束位置 -
渐变的颜色范围可由两种或多种颜色组成。每种颜色通过一个
标签来规定。offset属性用来定义渐变的开始和结束位置。 -
填充属性把 ellipse 元素链接到此渐变
SVG 放射性渐变 -
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <defs> <radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"> <stop offset="0%" style="stop-color:rgb(255,255,255); stop-opacity:0" /> <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" /> radialGradient> defs> <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" /> svg>
-
标签的 id 属性可为渐变定义一个唯一的名称 -
CX，CY和r属性定义的最外层圆和Fx和Fy定义的最内层圆
-
渐变颜色范围可以由两个或两个以上的颜色组成。每种颜色用一个
标签指定。offset属性用来定义渐变色开始和结束 -
填充属性把ellipse元素链接到此渐变
菜鸟教程的在线实例：http://www.runoob.com/svg/svg-examples.html
