SVG笔记

一：什么是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>

链接到SVG文件

可以用标签链接到一个SVG文件：链接到SVG文件。

五：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>

SVG 圆形 ---- <circle>

实例2----------<circle>标签可用来创建一个圆如下代码显示：

</svg>

SVG 椭圆 ---- <ellipse>

实例3----------<ellipse>标签可用来创建一个椭圆

Tip：椭圆与圆很相似。不同之处在于椭圆有不同的x和y半径，而圆的x和y半径是相同的。如下代码显示：

</svg>

代码解析：

-------CX属性定义的椭圆中心的x坐标

-------CY属性定义的椭圆中心的y坐标

-------RX属性定义的水平半径

-------RY属性定义的垂直半径

SVG 直线 ----- <line>

实例4 ---------- <line> 标签可用来创建直线下面是SVG代码：

</svg>

代码解析：

-------x1 属性在 x 轴定义线条的开始

-------y1 属性在 y 轴定义线条的开始

-------x2 属性在 x 轴定义线条的结束

-------y2 属性在 y 轴定义线条的结束

SVG 多边形 --------- <polygon>

实例5 ------- <polygon> 标签用来创建含有不少于三个边的图形。

多边形是由直线组成，其形状是"封闭"的（所有的线条连接起来）。如下代码显示：

</svg>

利用多边形创建一个五角星

</svg>

改变 fill-rule 属性为 "evenodd"可有另外一种效果。

代码解析：

-------- points 属性定义多边形每个角的 x 和 y 坐标。

SVG 曲线 ----- <polyline>

实例6 ------- <polyline> 标签元素是用于创建任何只有直线的形状如下代码显示：

</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>

代码解析：

上面的例子定义了一条路径，它开始于位置150 0，到达位置75 200，然后从那里开始到225 200，最后在150 0关闭路径。

SVG 文本 --------- <text>

实例8 --------- <text> 标签元素用于定义文本。如下代码显示：

</svg>

以上就是对SVG的大概了解的概况。

SVG笔记

一：什么是SVG？

二：SVG的优势是什么？

三：SVG与Canvas的区别在于什么地方？

四：SVG在html中是怎样使用的？

五：SVG标签的元素属性有那几个？

六：对SVG默认形状的一个认识？

七：对SVG的图形的认知？(SVG Shapes)

SVG 矩形 ---- <rect>

SVG 圆形 ---- <circle>

SVG 椭圆 ---- <ellipse>

SVG 直线 ----- <line>

SVG 多边形 --------- <polygon>

SVG 路径 ------- <path>

SVG 文本 --------- <text>

推荐阅读更多精彩内容