svg是什么，svg入门详解

理论篇

一、svg是什么？

SVG 意为可缩放矢量图形（Scalable Vector Graphics）。
SVG 是使用 XML 来描述二维图形和绘图程序的语言。
SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失。
SVG 是万维网联盟的标准。

二、svg的优势

与其他图像格式相比（比如 JPEG 和 GIF），使用 SVG 的优势在于：

SVG 图像可通过文本编辑器来创建和修改；
SVG 图像可被搜索、索引、脚本化或压缩；
SVG 是可伸缩的；
SVG 图像可在任何的分辨率下被高质量地打印；
SVG 可在图像质量不下降的情况下被放大；

三、浏览器支持情况

四、使用方式

1 可在浏览器直接打开；

2 在HTML中的使用；

SVG 文件可通过以下标签嵌入 HTML 文档：<embed>、<object> 、 <iframe>和<img>。SVG的代码可以直接嵌入到HTML页面中，或直接链接到SVG文件。

（1）使用 <embed> 标签

优势：所有主要浏览器都支持，并允许使用脚本

缺点：不推荐在HTML4和XHTML中使用（但在HTML5允许）

示例：

（2）使用 <object> 标签

优势：所有主要浏览器都支持，并支持HTML4，XHTML和HTML5标准

缺点：不允许使用脚本。示例：

（3）使用 <iframe> 标签

优势：所有主要浏览器都支持，并允许使用脚本

缺点：不推荐在HTML4和XHTML中使用（但在HTML5允许）

示例：

（4）直接在HTML嵌入SVG代码

示例：

（5）使用<img>标签

示例：

（6）链接到 svg 文件

示例：

<a href="img/demo.svg">查看svg</a>

3、在css中使用

示例：

.container{ background: white url(img/demo.svg) repeat; }

实例篇

一、 SVG 形状

SVG 有一些预定义的形状元素，可被开发者使用和操作：

矩形 <rect>
圆形 <circle>
椭圆 <ellipse>
线 <line>
折线 <polyline>
多边形 <polygon>
路径 <path>

二、基本形状

要想插入一个形状，你可以在文档中创建一个元素。不同的元素对应着不同的形状，并且使用不同的属性来定义图形的大小和位置。

示例代码：

三、坐标系统

SVG使用的坐标系统或者说网格系统是：以页面的左上角为(0,0)坐标点，坐标以像素为单位，x轴正方向是向右，y轴正方向是向下。注意，这和你小时候所教的绘图方式是相反的。但是在HTML文档中，元素都是用这种方式定位的。

四、SVG实例

1 矩形<rect>

示例代码及效果：

解析：

x：矩形左上角的x位置
y 矩形左上角的y位置
rx 圆角的x方位的半径
ry 圆角的y方位的半径
width 矩形的宽度
height 矩形的高度
fill 设置对象内部的填充颜色
fill-opacity 控制填充色的不透明度（范围：0 - 1）
stroke 定义矩形边框的颜色
stroke-opacity 控制描边的不透明度（范围：0 - 1）
stroke-width 定义矩形边框的宽度

2 圆形<circle>

示例代码及效果：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="#FF8C00" /> </svg>

解析：

r 圆的半径
cx 圆点的x坐标
cy 圆点的y坐标

3 椭圆 <ellipse>

示例代码及效果：

<svg width="500px" height="500px" style="margin:50px;" version="1.1" xmlns="http://www.w3.org/2000/svg"> <ellipse cx="275" cy="125" rx="100" ry="50" style="fill:#7D9EC0;stroke:#6B6B6B;stroke-width:2;"></ellipse> </svg>

解析：

cx 椭圆中心的x坐标
cy 椭圆中心的y坐标
rx 定义的水平半径
ry 定义的垂直半径

4 线条 <line>

示例代码及效果：

<svg width="600px" height="600px" version="1.1" xmlns="http://www.w3.org/2000/svg"> <line x1="0" y1="0" x2="100" y2="100" style="stroke:rgb(99,99,99);stroke-width:2;"></line> <line x1="100" y1="100" x2="0" y2="200" style="stroke:rgb(99,99,99);stroke-width:2;"></line> </svg>

解析：

x1 起点的x位置
y1 起点的y位置
x2 终点的x位置
y2 终点的y位置

5 折线 <polyline>

示例代码及效果：

<svg style="height:300px;width:300px;" xmlns="http://www.w3.org/2000/svg" version="1.1"> <polygon points="100 10,40 180,190 60,10 60,160 180" style="fill:none;stroke:black;stroke-width:3"/> </svg>  <svg style="height:300px;width:300px;" xmlns="http://www.w3.org/2000/svg" version="1.1"> <polyline points="100 10,40 180,190 60,10 60,160 180" style="fill:#EE2C2C;stroke:#EE2C2C;stroke-width:3" /> </svg> </svg>

解析：

points 每个点必须包含2个数字，一个是x坐标，一个是y坐标。所以点列表 (0,0), (1,1) 和(2,2)可以写成这样：“0 0, 1 1, 2 2”。

6 多边形 <polygon>

示例代码及效果：

解析：

points 每个点必须包含2个数字，一个是x坐标，一个是y坐标。所以点列表 (0,0), (1,1) 和(2,2)可以写成这样：“0 0, 1 1, 2 2”。路径绘制完后闭合图形，所以最终的直线将从位置(2,2)连接到位置(0,0)。

7 路径 <path>

path元素是SVG基本形状中最强大的一个，它不仅能创建其他基本形状，还能创建更多其他形状。你可以用path元素绘制矩形（直角矩形或者圆角矩形）、圆形、椭圆、折线形、多边形，以及一些其他的形状，例如贝塞尔曲线、2次曲线等曲线。path元素的形状是通过属性d来定义的，属性d的值是一个“命令+参数”的序列。

每一个命令都用一个关键字母来表示，比如，字母“M”表示的是“Move to”命令，当解析器读到这个命令时，它就知道你是打算移动到某个点。跟在命令字母后面的，是你需要移动到的那个点的x和y轴坐标。比如移动到(10,10)这个点的命令，应该写成“M 10 10”。这一段字符结束后，解析器就会去读下一段命令。每一个命令都有两种表示方式，一种是用大写字母，表示采用绝对定位。另一种是用小写字母，表示采用相对定位