SVG(Scalabe Vector Graphics可伸缩矢量图片)

1.生成图 SVG元素不被视为html的一部分，相反，它们会被当作嵌入式内容，具有自己的命名空间。

<svg version="1.1" >
<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="blue"/>
<rect x="20" y="75" width="250" height="100" rx="40" ry="20" fill="red" opacity="0.25"/>
<line x1="100" y1="50" x2="270" y2="175" stroke="rgb(255,255,80)" stroke-width="10px" stroke-linecap="round"/>
</svg>

2.script创建svg

<script>
var svgns="http://www.w3.org/2000/svg";
var svg=document.createElementNS(svgns,"svg");
svg.setAttribute("width",256);
svg.setAttribute("height",256);
svg.setAttribute("viewBox","0 0 50 50");
var shape=document.createElementNS(svgns,"circle");
shape.setAttribute("cx",25);
shape.setAttribute("cy",25);
shape.setAttribute("r","10");
shape.setAttribute("fill","green");
svg.appendChild(shape);
document.body.appendChild(svg);
</script>

3.http://javascript.cs.lmu.edu/curve-editor.svg SVG案例：一个贝塞尔曲线编辑器

4.SVG支持元素分组，类似于许多绘图程序中的Group功能。通过分组，可以将多个元素看作一个整体进行处理。

和canvas一样，SVG也支持变换。可以将变换作为各个元素的属性，逐一指定，并且他们也可以实现声明性动画。

SVG支持图像处理滤波，允许在像素级别处理绘画中的对象。有模糊/颜色控制和一般卷积等滤波元素可供使用，这些效果中有许多都可以实现声明性动画。

CSS可以与SVG一起使用，如同与HTML一起使用一样：它可以为特定类型或特定群组的元素建立共用的属性值集合或样子集合。和群组一样，利用CSS可以轻松地控制多个元素的外观，不需要单独为每个元素设置属性。