一:什么是SVG?
对于SVG的定义如下:
①:SVG 指的是可伸缩矢量图形 (Scalable Vector Graphics)。
②:SVG 用于定义用于网络的基于矢量的图形。
③:SVG 使用 XML 格式定义图形。
④:SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失。
⑤:SVG 是万维网联盟的标准。
二:SVG的优势是什么?
SVG的优势有如下定义:
①:SVG 图像可通过文本编辑器来创建和修改。
②:SVG 图像可被搜索、索引、脚本化或压缩。
③:SVG 是可伸缩的。
④:SVG 图像可在任何的分辨率下被高质量地打印。
⑤:SVG 可在图像质量不下降的情况下被放大。
三:SVG与Canvas的区别在于什么地方?
①:SVG 是一种使用 XML 描述 2D 图形的语言。 Canvas 通过 JavaScript 来绘制 2D 图形。
②:SVG 基于 XML,这意味着 SVG可以给每一个图形绑定事件,但是Canvas是基于JavaScript,这就意味着Canvas无法给每一个图形绑定事件。(只能给canvas整个画布绑定事件,还有一种解决方案是使用第三方库)。
在 SVG 中,每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化,那么浏览器能够自动重现图形。
③:Canvas 是逐像素进行渲染的。在 canvas 中,一旦图形被绘制完成,它就不会继续得到浏览器的关注。
如果其位置发生变化,那么整个场景也需要重新绘制,包括任何或许已被图形覆盖的对象。
④:兼容性不同。 SVG的兼容性更好。
SV与Canvas之间的比较:
Canvas
-------依赖分辨率
-------不支持事件处理器
-------弱的文本渲染能力
-------能够以 .png 或 .jpg 格式保存结果图像
-------最适合图像密集型的游戏,其中的许多对象会被频繁重绘
SVG
-------不依赖分辨率
-------支持事件处理器
-------最适合带有大型渲染区域的应用程序(比如谷歌地图)
-------复杂度高会减慢渲染速度(任何过度使用 DOM 的应用都不快)
-------不适合游戏应用
四:SVG在html中是怎样使用的?
首先SVG引入到html中的方法如下:
SVG 文件可通过以下标签嵌入到HTML 文档:<embed>、<object>、<iframe>。
使用<embed>标签引入 ------ <embed src="xxx.svg" type="image/svg+xml" />
①:优势:所有主要浏览器都支持,并允许使用脚本。
②:缺点:不推荐在HTML4和XHTML中使用(但在HTML5允许)。
使用<object>标签引入 ------- <object data="xxx.svg" type="image/svg+xml"></object>
①:优势:所有主要浏览器都支持,并支持HTML4,XHTML和HTML5标准。
②:缺点:不允许使用脚本。
使用<iframe>标签引入 ------- <iframe src="xxx.svg"></iframe>
①:优势:所有主要浏览器都支持,并允许使用脚本。
②:缺点:不推荐在HTML4和XHTML中使用(但在HTML5允许)。
Tip:值得注意的地方是在使用单标签的时候<embed src="" />一定要有 / 闭合不然会报错!!!
SVG的代码可以直接嵌入到HTML页面中,或直接链接到SVG文件。
直接在HTML嵌入SVG代码
在Firefox、Internet Explorer9、谷歌Chrome和Safari中,你可以直接在HTML嵌入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>
链接到SVG文件
<a href="circle1.svg">View SVG file</a>
五:SVG标签的元素属性有那几个?
在SVG标签中其自身所拥有的属性就和Canvas的一样就只有两个属性:width="";和height="";
六:对SVG默认形状的一个认识?
SVG和Canvas一样都是行内块级元素,默认的宽高大小都是300px X 150px;
七:对SVG的图形的认知?(SVG Shapes)
SVG有一些预定义的形状元素,可被开发者使用和操作:
-------矩形 <rect>
-------圆形 <circle>
-------椭圆 <ellipse>
-------线 <line>
-------折线 <polyline>
-------多边形 <polygon>
-------路径 <path>
SVG 矩形 ---- <rect>
实例1---------- <rect> 标签可用来创建矩形,以及矩形的变种 如下代码显示:
<svg width="600" hegiht="600" id="mySvg">
<rect x="X轴起始坐标" y="Y轴起始坐标" rx="产生圆角的大小" ry="产生圆角的大小" width="矩形的宽度" height="矩形的高度" stroke="描边的颜色" stroke-width="描边的宽度" fill="填充的颜色" />
</svg>
SVG 圆形 ---- <circle>
实例2----------<circle>标签可用来创建一个圆 如下代码显示:
<svg width="600" height="600">
<circle cx="X轴起始坐标" cy="Y轴起始坐标" r="圆的半径" stroke="描边的颜色" stroke-width="描边的宽度" fill="填充的颜色" />
</svg>
SVG 椭圆 ---- <ellipse>
实例3----------<ellipse>标签可用来创建一个椭圆
Tip:椭圆与圆很相似。不同之处在于椭圆有不同的x和y半径,而圆的x和y半径是相同的。 如下代码显示:
<svg width="600" height="600" id="mySvg">
<ellipse cx="X轴起始坐标" cy="Y轴起始坐标" rx="X轴的半径" ry="Y轴的半径" stroke="描边的颜色" stroke-width="描边的宽度" fill="填充的颜色" />
</svg>
代码解析:
-------CX属性定义的椭圆中心的x坐标
-------CY属性定义的椭圆中心的y坐标
-------RX属性定义的水平半径
-------RY属性定义的垂直半径
SVG 直线 ----- <line>
实例4 ---------- <line> 标签可用来创建直线 下面是SVG代码:
<svg width="600" height="600" id="mySvg">
<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 多边形 --------- <polygon>
实例5 ------- <polygon> 标签用来创建含有不少于三个边的图形。
多边形是由直线组成,其形状是"封闭"的(所有的线条 连接起来)。如下代码显示:
<svg width="600" height="600" id="mySvg">
<polygon points="200,10,250,190,160,210" style="fill:lime;stroke:purple;stroke-width:1" />
</svg>
利用多边形创建一个五角星
<svg width="600" height="600">
<polygon points="100,10 40,180 190,60 10,60 160,180" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:nonzero;">
</svg>
改变 fill-rule 属性为 "evenodd"可有另外一种效果。
代码解析:
-------- points 属性定义多边形每个角的 x 和 y 坐标。
SVG 曲线 ----- <polyline>
实例6 ------- <polyline> 标签元素是用于创建任何只有直线的形状 如下代码显示:
<svg width="600" height="600">
<polyline points="20,20 40,25 60,40 80,120 120.140 200,180" style="fill:none;stroke:black;stroke-width:3" />
</svg>
SVG 路径 ------- <path>
实例7 -------- <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
注意:以上所有命令均允许小写字母。大写表示绝对定位,小写表示相对定位。
<svg width="600" height="600">
<path d="M150 0 L75 200 L225 200 Z " />
</svg>
代码解析:
上面的例子定义了一条路径,它开始于位置150 0,到达位置75 200,然后从那里开始到225 200,最后在150 0关闭路径。
SVG 文本 --------- <text>
实例8 --------- <text> 标签元素用于定义文本。 如下代码显示:
<svg width="600" height="600">
<text x="70" y="15" fill="red" transform="rotate(30 20,40)">I Love You</text>
</svg>
以上就是对SVG的大概了解的概况。