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. OpenSSL - 利用OpenSSL自签证书和CA颁发证书

    秘钥操作 这个命令会生成一个1024/2048位的密钥,包含私钥和公钥. openssl genrsa -out private.key 1024/2038                     ( ...

  2. 初探groupcache

    groupcache是用于dl.google.com的一个memcached的替代品,相对于memcached,提供更小的功能集和更高的效率,以第三方库的形式提供服务. groupcache的常见部署 ...

  3. PHP7在linux下的安装步骤

    安装mcrypt: yum install -y php-mcrypt libmcrypt libmcrypt-devel 升级bison: cd /var/soft/ wget http://ftp ...

  4. Jena TDB 101 Java API without Assembler

    Update on 2015/05/12 ongoing tutorials site on https://github.com/zhoujiagen/semanticWebTutorialUsin ...

  5. sphinx.conf 详解

    sphinx的配置文件是在配置的时候最容易出错的了: 我们先要明白几个概念: source:数据源,数据是从什么地方来的. index:索引,当有数据源之后,从数据源处构建索引.索引实际上就是相当于一 ...

  6. UVa 10815 安迪的第一个字典

    https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem& ...

  7. nginx配置rewrite

    1. uri  和 url读取区别 区别就是URI定义资源,而URL不单定义这个资源,还定义了如何找到这个资源. 比如说,一个服务器上,到一个文件夹/网页的绝对地址(absolute path)就是U ...

  8. MQTT服务器搭建-mosquitto1.4.4安装指南

    Mosquitto mosquitto是一款实现了 MQTT v3.1 协议的开源的消息代理服务软件. 其提供了非常轻量级的消息数据传输协议,采用发布/订阅模式进行工作,可用于物联设备.中间件.APP ...

  9. moment.js 的简单应用

     moment.js :时间处理的组件 例子:moment.html <!DOCTYPE html> <html> <head> <title>mome ...

  10. google protocol buffer 使用说明

    一:编译源码 下载地址:http://code.google.com/p/protobuf/downloads/list 下载后,根据编译说明进行编译. windows 平台,直接打开msvc中的工程 ...