SVG入门指南

作者：TG 日期： 2016-06-10 字数： 10098 阅读： 4421

SVG是一种矢量图格式。SVG是Scalable Vector Graphics三个单词的首字母缩写。SVG是一个基于XML并可以在SVG对象中描述不同形状和路径的文件。每一个形状和路径都由一系列的点、位置、长度、半径，等等的来组成。

SVG特点：

SVG 可被非常多的工具读取和修改（比如记事本）

SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强。

SVG 是可伸缩的

SVG 图像可在任何的分辨率下被高质量地打印

SVG 可在图像质量不下降的情况下被放大

SVG 图像中的文本是可选的，同时也是可搜索的（很适合制作地图）

SVG 可以与 Java 技术一起运行

SVG 是开放的标准

SVG 文件是纯粹的 XML

SVG三种主要的实现方式：

SVG作为背景图片使用

SVG作为src属性使用

内联SVG

SVG初体验

因为SVG是一个XML标记语言，我们需要为SVG元素声明一个命名空间。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300" height="150"> </svg>

version 属性可定义所使用的 SVG 版本，xmlns 属性可定义 SVG 命名空间

width——这个值代表着用户坐标系中水平方向的长度。 height——这个值代表着用户坐标系垂直平方向的长度。

预定义形状

SVG有一些预定义的形状元素，可供我们使用：

矩形 <rect>

圆形 <circle>

线 <line>

折线 <polyline>

多边形 <polygon>

路径 <path>

矩形

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">   
   <rect x="0" y="0" width="100" height="50" style="fill:green"/>
</svg>

属性：

x 属性定义矩形的左侧位置（例如，x="0" 定义矩形到浏览器窗口左侧的距离是 0px） y 属性定义矩形的顶端位置（例如，y="0" 定义矩形到浏览器窗口顶端的距离是 0px）

width 和 height 属性可定义矩形的高度和宽度

fill 属性定义矩形的填充颜色

渲染后输出：

圆形

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">  
    <circle cx="100" cy="100" r="40" style="fill:red"/>
</svg>

属性：

cx和cy属性定义圆点的x和y坐标。如果省略cx和cy，圆的中心会被设置为(0, 0) r属性定义圆的半径

输出：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="600" height="1000">
     <line x1="0" y1="0" x2="200" y2="50" style="stroke:blue;stroke-width:2"/>   
</svg>

属性：

x1 属性在 x 轴定义线条的开始 y1 属性在 y 轴定义线条的开始 x2 属性在 x 轴定义线条的结束 y2 属性在 y 轴定义线条的结束

输出：

折线

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="600" height="1000">   
    <polyline points="20,20 40,40 50,80 100,80" style="fill:none;stroke:black;stroke-width:3"/> </svg>

属性：

每一组为一个坐标点

输出：

多边形

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="600" height="1000">   
    <polygon points="50,50 75,70 25,70"/>   
</svg>

属性：每一组为一个坐标点输出：

路径

<path> 元素用于定义一个路径。

命令： M x y ：移动到坐标(x,y) L x y：连接当前坐标和坐标(x,y) H x：从当前坐标画一条水平线，连接到坐标x V y：从当前坐标画一条垂直线，连接到坐标y Z：闭合路径注意：以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="600" height="1000">   
   <path d="M 50 50 L 75 70 V 100 H 50 L 50 50 Z"/>   
</svg>

起始点移动到(50,50)，连接(75,70)，垂直画一条线，连接到(75,100)，再水平画一条线，连接到(50,50)，接着连接坐标(50,50)，最后闭合路径

输出：

常用属性

fill:元素的填充颜色 fill-opacity:元素的填充颜色透明度 stroke:元素的笔画颜色 stroke-width:元素的笔画宽度 stroke-opacity:元素的笔画颜色透明度

stroke-linecap：定义不同类型的开放路径的终结（值：butt、round、square）

stroke-dasharray：用于创建虚线

如果你要了解SVG所有相关的元素及属性，可以访问：属性参考和元素参照。

保存SVG

主流的矢量软件像Adobe的Illustrator可以让你把文件保存为.svg

简单的例子：

<svg xlmns="http://www.w3.org/2000/svg" width="1500" height="1000">   
<rect x="50" y="50" width="500" height="300" rx="10" ry="10" style="fill:#EB5435"/>   
<rect x="46" y="230" width="508" height="100" rx="10" ry="10" style="fill:#EB5435"/>   
<rect x="80" height="180" y="80" width="440" rx="10" ry="10"  style="fill:#9A352A"/>   
<rect x="84" height="172" y="84" width="432" rx="10" ry="10"  style="fill:#FFA94A"/>   
<rect x="84" y="140" width="432" height="30" style="fill:#9A352A"/>   
<rect width="300" height="80" rx="10" ry="10" x="150" y="140" style="fill:#EB5435"/>       
<circle cx="70" cy="70" r="10" style="fill:#9B3228"/>   
<circle cx="70" cy="330" r="10" style="fill:#9B3228"/>   
<circle cx="530" cy="70" r="10" style="fill:#9B3228"/>   
<circle cx="530" cy="330" r="10" style="fill:#9B3228"/>       
<circle cx="190" cy="180" r="28" style="fill:#fff"/>   
<circle cx="410" cy="180" r="28" style="fill:#fff"/>       
<circle cx="190" cy="180" r="23" style="fill:#E4E4E4"/>   
<circle cx="410" cy="180" r="23" style="fill:#E4E4E4"/>       
<polygon points="150,280 450,280 470,350 120,350" style="fill:#9A352A"/>   
<polygon points="154,284 446,284 466,354 124,354" style="fill:#D55E40"/>       
<rect width="30" height="40" x="90" y="90" rx="2" ry="2" style="fill:#EB5435"/>   
<text x="97" y="120" style="fill:#FFAC43;font-size:30px;font-weight:bold;">A</text>       
<line x1="130" y1="100" x2="480" y2="100" style="stroke:#756046;stroke-width:3"/>   
<line x1="130" y1="120" x2="480" y2="120" style="stroke:#756046;stroke-width:3"/>   
<line x1="95" y1="230" x2="500" y2="230" style="stroke:#363844;stroke-width:1"/>   
<line x1="95" y1="245" x2="500" y2="245" style="stroke:#363844;stroke-width:1"/>      
</svg>

著作权归博主所有。转载请联系博主获得授权，并标注“博主名称”。

SVG入门指南

关注”全栈技术杂货铺“

目录