什么是SVG？
Δ SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
Δ SVG 用来定义用于网络的基于矢量的图形
Δ SVG使用XML格式来定义图形
Δ SVG 是万维网联盟的标准
Δ SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体
SVG的优势在于？
ΔSVG 可被非常多的工具读取和修改（比如记事本）
ΔSVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强。
ΔSVG 是可伸缩的
ΔSVG 图像可在任何的分辨率下被高质量地打印
ΔSVG 可在图像质量不下降的情况下被放大，修改
ΔSVG 图像中的文本是可选的，同时也是可搜索的。很适合制作地图！！
Δ SVG 可以与 Java 技术一起运行
Δ SVG 是开放的标准
Δ SVG 是纯粹的XML文本
与flash相比？
- SVG 最大的优势是与其他标准（比如 XSL 和 DOM）相兼容。而 Flash 则是未开源的私有技术。
与canvas相比？
canvas更加原始，是基于像素处理图像 ，而SVG是基于矢量处理图像！
↑就像画一条直线↑
Δ canvas中会记录这条直线的第一个像素到最后一个像素的位置和颜色，它们的排列和数量无法改变；
SVG中则会记录这条直线的起始位和终点坐标和直线的颜色，更加便于修改！
Δ 因为canvas是记录型的，所以当你想要缩放图片或对图像进行修改时 ，图片可能会丢失像素，也就是失真。 典型例子：表情包-_-
SVG就像乐谱，记录的是音律、节奏，不会丢失数据，所以呈现的是高保真的图像！
编辑SVG
Δ可直接嵌入HTML文件中
Δ可使用以下标签引入文件
<embed>|<object>|<iframe>
Δ<a>标签链接到svg外部文件
一些基础的图形实现 ↓
SVG <rect>
<rect>标签可创建矩形及其变种。
举个栗子~↓
1 <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> //位于"http://www.w3.org/2000/svg"的命名空间
2 <rect width="300" height="100"
3 style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)"/>
4 </svg>
SVG <circle>
1 <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> 2 <circle cx="100" cy="50" r="40" stroke="black" 3 stroke-width="2" fill="red"/> 4 </svg>
SVG<ellipse>
1 <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> 2 <ellipse cx="300" cy="80" rx="100" ry="50" //rx定义椭圆水平半径，ry定义椭圆垂直半径 3 style="fill:yellow;stroke:purple;stroke-width:2"/> 4 </svg>
SVG<line>
创建一条直线，属性值有x1,x2,定义x轴上的起始和结束，y1,y2,定义y轴上的起始和结束;
SVG<polygon>
Δ 有一个points属性定义多边形的每个顶点的坐标；
Δ 有一个fill-rule属性判断一个点是否在图形内，属性值有nonzero|evenodd；
SVG<polyline>
Δ 创建任何只有直线的形状；
Δ 有一个points属性，是各个顶点的集合；
SVG<path>
- 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
大写表示绝对定位，小写表示相对定位。
绘制一个三角形↓
1 <svg width="100%" height="100%" version="1.1"
2 xmlns="http://www.w3.org/2000/svg"><path d='M350 100 L370 300 L330 300 Z'/></svg>
SVG <text>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <text x="0" y="15" fill="red">I love SVG</text> </svg>
SVG stroke 属性
- stroke //设置一条直线，文本或描边的颜色
- stroke-width //设置一条直线，文本或描边的厚度
- stroke-linecap //使直线呈现圆角样式
- stroke-dasharray //创建虚线
- stroke-linejoin //描边的转角样式
SVG 模糊效果与滤镜
所有的滤镜都包含在<defs>元素中，<filter>是向图形应用滤镜的元素
<feGaussianBlur>元素用于创建模糊效果
例如：创建一个带有模糊效果的正方形，可以这样写↓
<svg height="110" width="110">
<defs>
<filter id="f1" x="0" y="0">
<feGaussianBlur in="SourceGraphic" stdDeviation="15" /> //in属性设置渲染效果的范围
//stdDeviation属性设置图像的模糊程度
</filter>
</defs>
<rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f1)" /> //filter属性告诉我们要应用哪个滤镜
</svg>
SVG还包括很多其他效果，这里只介绍到这，大多数看文档就知道了，重点还是要在实践中去摸索其中的技巧。
看svg你会觉得很简单，但是真正做的时候会出现很多让人不解的结果，why？重点其实在下文↓
svg似乎与html很像，但是当你刚开始使用Javascript去操作这些元素时会发现那些细微的区别让人很头疼。比如......
1.获取SVGDocument
当使用javascript操作html文档时，首要的可能就是获取document对象，如果svg代码直接嵌入在html中，它们共用同一个documen对象，此时对他们俩来说没有什么区别。
但是更多时候，你可能是在html文档中用<iframe><object>这种标签来引入svg文件。这种情况下，元素的src属性指向的文件有自己独立的document对象，用操作html元素的方法操作svg的元素已经不再适用。这时可以使用getSVGDocument（）操作svg文件中的元素并且修改属性！
2.操作SVG的元素
SVG的标签结构相较于HTML更加严格，有开始标签就要有结束标签；
用JS创建SVG的标签时，要使用createElementNS方法来实现，并且它的第一参数必须是SVG的命名空间。就像这样↓
1 <svg xmlns="http://www.w3.org/2000/svg" 2 xmlns:xlink="http://www.w3.org/1999/xlink" 3 version="1.1" width="20" height="20"> 4 <script type="text/javascript"> 5 var c = document.createElementNS('http://www.w3.org/2000/svg','circle'); 6 c.setAttribute('cx', 10); 7 c.setAttribute('cy', 10); 8 c.r.baseVal.value = 7; 9 c.setAttribute('fill', 'green'); 10 11 document.rootElement.appendChild(c); 12 </script> 13 </svg>
使用a标签也要在href属性中加入命名空间！
此外，不同于HTML元素对象可以直接对一些属性赋值，SVG元素对象都需要通过调用setAttribution（）方法来设定属性值此外，不同于HTML元素对象可以直接对一些属性赋值，SVG元素对象都需要通过调用setAttribution（）方法来设定属性值，这不是唯一方法，但却是更好的方法！
3.坐标变换
在svg中使用use标签对某种样式属性直接复用，例如效果中经常使用的transform属性，你可以在需要的时候直接使用！
其他的自己摸索吧~
132
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
