SVG实例在线实例下面的例子是把SVG代码直接嵌入到HTML代码中。谷歌Chrome，火狐，InternetExplorer9，和Safari都支持。注意：下面的例子将不会在Opera运行，即使Opera支持SVG-它也不支持SVG在HTML代码中直接使用。SVG实例SVG基本形状一个圆矩形不透明矩形一个矩形不透明2一个带圆角矩形一个椭圆累叠而上的三个椭圆两个椭圆一条线三角形四边形一个星星另一个星星折线另一个折线路径二次贝塞尔曲线编写文字旋转文本路径上文字几行文字文本链接定义一条线，文本或轮廓颜色（stroke）定义一条线宽度，文本或轮廓（stroke-width）stroke-linecap
SVG实例在线实例下面的例子是把SVG代码直接嵌入到HTML代码中。谷歌Chrome，火狐，InternetExplorer9，和Safari都支持。注意：下面的例子将不会在Opera运行，即使Opera支持SVG-它也不支持SVG在HTML代码中直接使用。SVG实例SVG基本形状一个圆矩形不透明矩形一个矩形不透明2一个带圆角矩形一个椭圆累叠而上的三个椭圆两个椭圆一条线三角形四边形一个星星另一个星星折线另一个折线路径二次贝塞尔曲线编写文字旋转文本路径上文字几行文字文本链接定义一条线，文本或轮廓颜色（stroke）定义一条线宽度，文本或轮廓（stroke-width）stroke-linecap
SVG渐变-放射性SVG放射性渐变-元素用于定义放射性渐变。标签必须嵌套在的内部。标签是definitions的缩写，它可对诸如渐变之类的特殊元素进行定义。实例1定义一个放射性渐变从白色到蓝色椭圆：下面是SVG代码：实例 stop-opacity:0"/> 尝试一下»对于Opera用户：查看SVG文件（右键单击SVG图形预览源）。代码解析：标签的id属性可为渐变定义一个唯一的名称CX，CY和r属性定义的最外层圆和Fx和Fy定义的最内层圆渐变颜色范围可以由两个或两个以上的颜色组成。每种颜色用一个标签指定。offset属性用来定义渐变色开始和结束填充属性
SVG渐变-放射性SVG放射性渐变-元素用于定义放射性渐变。标签必须嵌套在的内部。标签是definitions的缩写，它可对诸如渐变之类的特殊元素进行定义。实例1定义一个放射性渐变从白色到蓝色椭圆：下面是SVG代码：实例 stop-opacity:0"/> 尝试一下»对于Opera用户：查看SVG文件（右键单击SVG图形预览源）。代码解析：标签的id属性可为渐变定义一个唯一的名称CX，CY和r属性定义的最外层圆和Fx和Fy定义的最内层圆渐变颜色范围可以由两个或两个以上的颜色组成。每种颜色用一个标签指定。offset属性用来定义渐变色开始和结束填充属性
SVG渐变-线性SVG渐变渐变是一种从一种颜色到另一种颜色的平滑过渡。另外，可以把多个颜色的过渡应用到同一个元素上。SVG渐变主要有两种类型：LinearRadialSVG线性渐变-元素用于定义线性渐变。标签必须嵌套在的内部。标签是definitions的缩写，它可对诸如渐变之类的特殊元素进行定义。线性渐变可以定义为水平，垂直或角渐变：当y1和y2相等，而x1和x2不同时，可创建水平渐变当x1和x2相等，而y1和y2不同时，可创建垂直渐变当x1和x2不同，且y1和y2不同时，可创建角形渐变实例1定义水平线性渐变从黄色到红色的椭圆形：下面是SVG代码：实例svgxmlns="http://www
SVG渐变-线性SVG渐变渐变是一种从一种颜色到另一种颜色的平滑过渡。另外，可以把多个颜色的过渡应用到同一个元素上。SVG渐变主要有两种类型：LinearRadialSVG线性渐变-元素用于定义线性渐变。标签必须嵌套在的内部。标签是definitions的缩写，它可对诸如渐变之类的特殊元素进行定义。线性渐变可以定义为水平，垂直或角渐变：当y1和y2相等，而x1和x2不同时，可创建水平渐变当x1和x2相等，而y1和y2不同时，可创建垂直渐变当x1和x2不同，且y1和y2不同时，可创建角形渐变实例1定义水平线性渐变从黄色到红色的椭圆形：下面是SVG代码：实例svgxmlns="http://www
SVG阴影注意：InternetExplorer和Safari不支持SVG滤镜！和所有互联网的SVG滤镜定义在元素中。元素定义短并含有特殊元素（如滤镜）定义。标签用来定义SVG滤镜。标签使用必需的id属性来定义向图形应用哪个滤镜？SVG实例1元素是用于创建阴影效果。我们的想法是采取一个SVG图形（图像或元素）并移动它在xy平面上一点儿。第一个例子偏移一个矩形（带），然后混合偏移图像顶部（含）：下面是SVG代码：实例 fill="yellow"filter="url(#f1)"/>尝试一下»对于Opera用户：查看SVG文件（右键单击SVG图形预览源）。代码
SVG阴影注意：InternetExplorer和Safari不支持SVG滤镜！和所有互联网的SVG滤镜定义在元素中。元素定义短并含有特殊元素（如滤镜）定义。标签用来定义SVG滤镜。标签使用必需的id属性来定义向图形应用哪个滤镜？SVG实例1元素是用于创建阴影效果。我们的想法是采取一个SVG图形（图像或元素）并移动它在xy平面上一点儿。第一个例子偏移一个矩形（带），然后混合偏移图像顶部（含）：下面是SVG代码：实例 fill="yellow"filter="url(#f1)"/>尝试一下»对于Opera用户：查看SVG文件（右键单击SVG图形预览源）。代码
SVG模糊效果注意：InternetExplorer和Safari不支持SVG滤镜！和所有互联网的SVG滤镜定义在元素中。元素定义短并含有特殊元素（如滤镜）定义。标签用来定义SVG滤镜。标签使用必需的id属性来定义向图形应用哪个滤镜？SVG实例1元素是用于创建模糊效果：下面是SVG代码：实例 fill="yellow"filter="url(#f1)"/>尝试一下»对于Opera用户：查看SVG文件（右键单击SVG图形预览源）。代码解析：元素id属性定义一个滤镜的唯一名称元素定义模糊效果in="SourceGraphic"这个部分定义了由整个图像创建效果stdDev
SVG模糊效果注意：InternetExplorer和Safari不支持SVG滤镜！和所有互联网的SVG滤镜定义在元素中。元素定义短并含有特殊元素（如滤镜）定义。标签用来定义SVG滤镜。标签使用必需的id属性来定义向图形应用哪个滤镜？SVG实例1元素是用于创建模糊效果：下面是SVG代码：实例 fill="yellow"filter="url(#f1)"/>尝试一下»对于Opera用户：查看SVG文件（右键单击SVG图形预览源）。代码解析：元素id属性定义一个滤镜的唯一名称元素定义模糊效果in="SourceGraphic"这个部分定义了由整个图像创建效果stdDev
