1.概述
在定义特定的图像时,SVG可以更快的帮助我们定义,也提供了更好的语义化结构
SVG
为英文Scalable Vector Graphics
(可缩放矢量图形)的缩写- 使用
SVG
图像在放大或改变尺寸的情况下其图形质量不会有所损失 - 是万维网联盟的标准
SVG
与诸如DOM
和XSL
之类的W3C
标准是一个整体SVG
使用XML
格式定义图形
SVG
基于 XML
,这意味着 SVG
DOM
中的每个元素都是可用的。您可以为某个元素附加 JavaScript
事件处理器。
在 SVG
中,每个被绘制的图形均被视为对象。如果 SVG
对象的属性发生变化,那么浏览器能够自动重现图形。
因为是使用XML
格式来定义图形,所以定义的方式会与html5
有所不同
来看一个实例:
<?xml version="1.0" standalone="no"?>
// 第一行为 XML 声明
//standalone属性:规定此 SVG 文件是否是"独立的",或含有对外部文件的引用。standalone="no" 意味着 SVG 文档会引用一个外部文件 - 在这里,是 DTD 文件。
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
//引用了这个外部的 SVG DTD。该 DTD 位于 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"。
//该 DTD 位于 W3C,含有所有允许的 SVG 元素。
<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>
上面的代码,最下面几行很像html
的写法,也是用标签来规定SVG
文档。可以用属性来规定SVG
的样式。
注意
:SVG
也要有开始和结束标签
2.在 HTML 中的输写格式
2.1.使用<enbed>
<iframe>``<object>
标签
2.2.直接在HTML嵌入SVG代码
这种方式非常方便,但是只有在Firefox
、Internet Explorer9
、谷歌Chrome
和Safari
中才可以使用
<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>
还可以用<a>
标签链接到一个SVG文件
<a href="circle1.svg">View SVG file</a>
3.可用属性以及标签
先定义一个空标签
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> </svg>
version
属性可定义所使用的 SVG
版本,xmlns
属性可定义 SVG
命名空间。
SVG标签中,用标签来声明需要定义的图形
- 矩形
<rect>
- 圆形
<circle>
- 椭圆
<elipse>
- 线
<line>
- 折线
<polyline>
- 多边形
<polygon>
- 路径
<path>
3.1.矩形
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect x="50" // 定义矩形左侧的位置 (默认单位:px)
y="20" // 定义矩形的顶端位置 (默认单位:px)
rx="20" // 定义横轴圆角的程度
ry="20" // 定义横轴圆角的程度
width="300" //定义矩形的宽
height="100" //定义矩形的高
style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)"/> //定义其他样式
//fill :定义背景颜色
//stroke-width :定义边框宽度
//stroke :定义边框颜色
</svg>
上面属性的效果,如下图:
3.2.圆形
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="100" //设置 x 坐标
cy="50" //设置 y 坐标
r="40" //设置半径
stroke="black" // 边框颜色
stroke-width="2" //边框宽度
fill="red" // 背景颜色
/>
</svg>
效果如下:
在此只记录两个形状,以及概念,还有更多的效果特性可以查看菜鸟教程文档