首页 专题 H5案例 前端导航 UI框架

SVG入门指南

作者:TG 日期: 2016-06-10 阅读: 904
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>




关注”全栈技术杂货铺“

全栈技术杂货铺