SVG即Scalable Vector Graphics可缩放矢量图形，使用XML格式定义图形， 主要优势在于可缩放的同时不会影响图片的质量。

SVG 在html 中常用的方法

1.使用<img>元素来嵌入SVG图像

<img src=”http://www.w3school.com.cn/svg/rect1.svg”  width=”300″ />

2.将SVG图像作为背景图像嵌入

background: url(‘http://www.w3school.com.cn/svg/rect1.svg’) no-repeat;

3.使用svg元素，通过代码将SVG图像嵌入到HTML代码中

<svg width=”100%” height=”100%”>

<rect x=”20″ y=”20″ width=”250″ height=”250″style=”fill:#fecdddd;”/>

</svg>

兼容性

IE   9~11          Firefox   40 +       Chrome  43+     Safari   8+      Opera  32+

svg sprites

svg sprites类似于css sprites，将各个svg合并在一起。

最主要的优点就是能减少页面的加载时间，优化开发流程，以及保持页面中图片元素的一致性。

实践中我们可以把整块的svg放在head头部， 因此可以在一处地方更新svg即可，而不是让svg的代码块散落在文档的各个地方。

<head>

<meta charset=”utf-8″ />

<title>svg</title>

<svg version=”1.1″ xmlns=”http://www.w3.org/2000/svg” xmlns:xlink=”http://www.w3.org/1999/xlink” width=”32″ height=”158″ viewBox=”0 0 32 158″>

<!– SVG等省略  –>

</svg>

</head>

SVG形状

矩形 <rect>

<rect x=”20″ y=”20″ rx=”20″ ry=”20″ width=”250″ height=”100″ style=”fill:red;stroke:black; stroke-width:5;opacity:0.5″/>

解释：x为x坐标，y为y坐标；width 和 height 分别为形状的高度和宽度；rx 和 ry 属性可使矩形产生圆角。

属性： fill 属性定义形状的填充颜色

stroke 属性定义图形边框的颜色

stroke-width 属性定义形状边框的宽度

圆形 <circle>

<circle cx=”100″ cy=”50″ r=”40″ stroke=”black” stroke-width=”2″ fill=”red”/>

解释：cx 和 cy分别为圆点的 x 和 y 坐标；r为半径。

椭圆<ellipse>

<ellipse cx=”300″ cy=”150″ rx=”200″ ry=”80″ style=”fill:rgb(200,100,50); stroke:rgb(0,0,100);stroke-width:2″/>

解释：cx 圆点的 x 坐标，cy 圆点的 y 坐标；rx 水平半径，ry 垂直半径。

线<line>

<line x1=”0″ y1=”0″ x2=”300″ y2=”300″ style=”stroke:rgb(99,99,99);stroke-width:2″/>

解释：(x1,y1)为线条的开始坐标；(x2,y2)为线条的结束坐标。

折线<polyline>

<polyline points=”0,0 0,20 20,20 20,40 40,40 40,60″ style=”fill:white;stroke:red;stroke-width:2″/>

解释：points 属性定义多边形每个角的 x 和 y 坐标。为了可读性，建议x与y坐标用逗号分开，每个角之间的坐标用空格分开。

多边形<polygon>

<polygon points=”220,100 300,210 170,250″ style=”fill:#cccccc; stroke:#000000;stroke-width:1″/>

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

路径<path>

直线指令：

M = moveto

L = lineto

H = horizontal lineto

V = vertical lineto

Z = closepath

注释：以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。

<svg>

<path d=”M250 150 L150 350 L350 350 Z” />

</svg>

解释：该路径开始于位置 250 150，到达位置 150 350，然后从那里开始到 350 350，最后在 250 150 关闭路径。

由于绘制路径的复杂性，建议使用 SVG 编辑器来创建复杂的图形。

svg的贝塞尔曲线

贝塞尔曲线指令：

C = curveto

S = smooth curveto

Q = quadratic Belzier curve

T = smooth quadratic Belzier curveto

C三次贝塞尔曲线

C x1 y1, x2 y2, x y (or c dx1 dy1, dx2 dy2, dx dy)

S光滑三次贝塞尔曲线

S x2 y2, x y (or s dx2 dy2, dx dy)

Q二次贝塞尔曲线

Q x1 y1, x y (or q dx1 dy1, dx dy)

T光滑二次贝塞尔曲线

T x y (or t dx dy)

SVG 使用的更多相关文章

  1. 【Web动画】SVG 实现复杂线条动画

    在上一篇文章中,我们初步实现了一些利用基本图形就能完成的线条动画: [Web动画]SVG 线条动画入门 当然,事物都是朝着熵增焓减的方向发展的,复杂线条也肯定比有序线条要多. 很多时候,我们无法人工去 ...

  2. 【Web动画】SVG 线条动画入门

    通常我们说的 Web 动画,包含了三大类. CSS3 动画 javascript 动画(canvas) html 动画(SVG) 个人认为 3 种动画各有优劣,实际应用中根据掌握情况作出取舍,本文讨论 ...

  3. SVG:textPath深入理解

    SVG的文本可以沿着一条自定义的Path来排布,比如曲线.圆形等等,使用方式如下所示(来源MDN): <svg viewBox="0 0 1000 300" xmlns=&q ...

  4. SVG:linearGradient渐变在直线上失效的问题解决方案

    SVG开发里有个较为少见的问题. 对x1=x2或者y1=y2的直线(line以及path),比如: <path d="M200,10 200,100" stroke=&quo ...

  5. HTML5_05之SVG扩展、地理定位、拖放

    1.SVG绘图总结: ①方法一:已有svg文件,<img src="x.svg">  方法二:<body><svg></svg>&l ...

  6. HTML5_04之SVG绘图

    1.关于Canvas绘制图像: 问题:需要绘制多张图片时,必须等待所有图片加载完成才能开始绘制:而每张图片都是异步请求,彼此没有先后顺序,哪一张先加载完成完全无法预测: 方案: var progres ...

  7. 关于SVG的viewBox

    在SVG中,通过svg标记的 width和height可以规定这段SVG代码所表达的数据在绘制时所占用的空间大小 如下代码svg设置了宽度与高度,rect同样,所以结果自然是全屏 <svg wi ...

  8. JavaScript权威设计--jQuery,Ajax.animate,SVG(简要学习笔记二十)[完结篇]

    1.$和jquery在全局命名空间中定义的唯一两个变量.   2.jquery是工厂函数,不是构造函数.他返回一个新创建的对象.   3.jquery的四种调用方式:     <1>传递C ...

  9. Notes:SVG(4)基于stroke-dasharray和stroke-dashoffset圆形进度条

    stroke-dasharray:定义描边的虚线长度,如果提供奇数个,则会自动复制该值成偶数 stroke-dashoffset:定义虚线描边的偏移量(在路径开始的前面,看不到) 实现如下所示 svg ...

  10. Notes:SVG(3)---滤镜和渐变

    SVG滤镜使用filter标签来定义,该标签必须嵌套在defs元素里面,并且必须指定一个ID,以供引用. 在 SVG 中,可用的滤镜有: feBlend feColorMatrix feCompone ...

随机推荐

  1. Monte Carlo Approximations

    准备总结几篇关于 Markov Chain Monte Carlo 的笔记. 本系列笔记主要译自A Gentle Introduction to Markov Chain Monte Carlo (M ...

  2. D3 的优势

    可视化的库有很多,基于 JavaScript 开发的库也有很多,D3 有什么优势呢? (1)数据能够与 DOM 绑定在一起 D3 能够将数据与 DOM 绑定在一起,使得数据与图形成为一个整体,即图形中 ...

  3. Python 面向对象（初级篇） （转）

    概述 面向过程:根据业务逻辑从上到下写垒代码 函数式:将某功能代码封装到函数中,日后便无需重复编写,仅调用函数即可 面向对象:对函数进行分类和封装,让开发"更快更好更强..." 面 ...

  4. JSBinding / Memory Management (GC)

    C# and JavaScript both have Garbage Collection (GC). They should not conflict with each other. Class ...

  5. 12 factor 目录

    I. 基准代码 一份基准代码,多份部署 II. 依赖 显式声明依赖关系 III. 配置 在环境中存储配置 IV. 后端服务 把后端服务当作附加资源 V. 构建,发布,运行 严格分离构建和运行 VI. ...

  6. MySQL管理_数据库启动与关闭

    MySQL数据库服务器通常指的的是mysqld,而命令行mysql则是mysql客户端程序,这两个概念通常容易混淆.通常启动mysql服务器即是启动mysqld进程,mysqld启动后,可以通过mys ...

  7. C++多重继承带来的问题

    首先上图,咱们看图说话!   橙色表示变量,使用private修饰. 如图,假设Person类的变量name只能通过input方法来输入. 那么继承自Person的Student及Teacher类中s ...

  8. 获取本机MAC地址

    <%@ page contentType="text/html; charset=GBK" %><html><head><meta htt ...

  9. [系统设计/开发] APP密钥签发服务器

    公司的信息安全制度要求对产线的APP进行严格的签发管理,确保密钥.密码的安全. 之前的做法是: 建立一台独立的签发主机: 密钥放在签发主机上,由专人管理: 构建系统每构建出一个产线APP,都要手动拷贝 ...

  10. PHP远程下载图片损坏问题

    代码如下: <?php header("Content-type=html/text;charset=utf-8"); function download($file_nam ...