Html5之svg可缩放矢量图形_动力节点Java学院整理


Posted in HTML / CSS onJuly 17, 2017

SVG可缩放矢量图形(Scalable Vector Graphics)是基于可扩展标记语言(XML),用于描述二维矢量图形的一种图形格式。SVG是W3C制定的一种新的二维矢量图形格式,也是规范中的网络矢量图形标准。SVG严格遵从XML语法,并用文本格式的描述性语言来描述图像内容,因此是一种和图像分辨率无关的矢量图形格式。

什么是SVG?

SVG 指可伸缩矢量图形 (Scalable Vector Graphics)

SVG 用来定义用于网络的基于矢量的图形

SVG 使用 XML 格式定义图形

SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失

SVG 是万维网联盟的标准

SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体 

Canvas 和 SVG 的区别:

SVG

SVG 是一种使用 XML 描述 2D 图形的语言。
SVG 基于 XML,这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。
在 SVG 中,每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化,那么浏览器能够自动重现图形。

特点: 

不依赖分辨率
支持事件处理器
最适合带有大型渲染区域的应用程序(比如谷歌地图)
复杂度高会减慢渲染速度(任何过度使用 DOM 的应用都不快)
不适合游戏应用 

Canvas 

Canvas 通过 JavaScript 来绘制 2D 图形。
Canvas 是逐像素进行渲染的。
在 canvas 中,一旦图形被绘制完成,它就不会继续得到浏览器的关注。如果其位置发生变化,那么整个场景也需要重新绘制,包括任何或许已被图形覆盖的对象。

特点:

依赖分辨率
不支持事件处理器
弱的文本渲染能力
能够以 .png 或 .jpg 格式保存结果图像
最适合图像密集型的游戏,其中的许多对象会被频繁重绘

简单例子:

<svg width="100%" height="100%"  >
        <circle cx="300" cy="60" r="50" stroke="#ff0" stroke-width="3" fill="red" />
</svg>

Html5之svg可缩放矢量图形_动力节点Java学院整理

位图与矢量图

以前,浏览器中显示的图形,例如jpeg、gif等,都是位图,这些图像格式是基于光栅的。在光栅图像中,图像文件定义了图像中每个像素的颜色值。浏览器需要读取这些值并做出相应行动。这种图像的再现能力比较强,但是在某些情形下会显得不足。例如,当浏览器以不同大小显示一副图像时,通常会产生锯齿边缘,这时,浏览器不得不为那些在原始图像中不存在的像素插入或猜测数值;这样会导致图像失真。此外,针对位图进行动画,最多也仅限于生成“翻动书本”类型的动画,即快速连续地显示单独图像。

矢量图通过指定为确定每个像素的值所需的指令而不是指定这些值本身,克服了这些困难中的一部分。例如,向量图形不再为一个直径一英寸的圆提供像素值,而是告诉浏览器创建一个直径一英寸的圆,然后让浏览器(或插件)做其余事情。这消除了光栅图形的许多限制;使用向量图形,浏览器只要知道它必须画一个圆。如果图像需要以正常大小的三倍来显示,那么浏览器只要按正确的大小画圆而不必执行光栅图像通常的插入法。类似地,浏览器接收的指令可以更容易地与外部信息源(如应用程序和数据库)绑定,要对图像制作动画,浏览器只要接收有关如何操纵属性(如半径或颜色)的指令即可。

HTML体系中,最常用的绘制矢量图的技术是SVG和HTML5新增加的canvas元素。这两种技术都支持绘制矢量图和光栅图。

SVG概述

可缩放矢量图形(Scalable Vector Graphics,简称SVG)是一种使用XML来描述二维图形的语言(SVG严格遵从XML语法)。 SVG允许三种类型的图形对象:矢量图形形状(例如由直线和曲线组成的路径)、图像和文本。 可以将图形对象(包括文本)分组、样式化、转换和组合到以前呈现的对象中。 SVG 功能集包括嵌套转换、剪切路径、alpha 蒙板和模板对象。 

SVG绘图是交互式和动态的。 例如,可使用脚本来定义和触发动画。这一点与Flash相比很强大。Flash是二进制文件,动态创建和修改都比较困难。而SVG是文本文件,动态操作是相当容易的。而且,SVG直接提供了完成动画的相关元素,操作起来非常方便。

SVG与其他Web标准兼容,并直接支持文档对象模型DOM。这一点也是与HTML5中的canvas相比很强大的地方(这里注意,SVG内部也是用一个类似的canvas这样的东西来展示SVG图形,到后面你会发现很多特性和HTML5的canvas还有点像;文中如果没明确说明是SVG的canvas的话,都代指HTML5中的canvas元素)。因而,可以很方便的使用脚本实现SVG的很多高级应用。而且SVG的图形元素基本上都支持DOM中的标准事件。可将大量事件处理程序(如“onmouseover”和“onclick”)分配给任何SVG图形对象。 虽然SVG的渲染速度比不上canvas元素,但是胜在DOM操作很灵活,这个优势完全可以弥补速度上的劣势。

SVG既可以说是一种协议,也可以说是一门语言;既是HTML的一个标准元素,也是一种图片格式。

SVG并不是HTML5中的东西,但是也算页面时兴的技术之一,姑且也放到这个专题下了。

SVG与其它图片格式的比较

SVG与其它的图片格式相比,有很多优点(很多优点来源于矢量图的优点):
• SVG文件是纯粹的XML, 可被非常多的工具读取和修改(比如记事本)。
• SVG 与JPEG 和GIF图像比起来,尺寸更小,且可压缩性更强,总结,矢量图,内存小,放大不失真。
• SVG 是可伸缩的,可在图像质量不下降的情况下被放大,可在任何的分辨率下被高质量地打印。
• SVG 图像中的文本是可选的,同时也是可搜索的(很适合制作地图)。
• SVG 可以与 Java 技术一起运行。
• SVG 是开放的标准。

SVG与Flash的比较

SVG 的主要竞争者是Flash。与Flash相比,SVG 最大的优势是它与其他标准(比如XSL和DOM)相兼容,操作方便,而Flash则是未开源的私有技术。其它的比如存储的格式,动态生成图形等方面,SVG也占有很大的优势。

SVG的呈现方式

关于支持HTML5与SVG的浏览器不是这里讨论的重点,基本上装上最新的Chrome或者FireFox浏览器就差不多了(IE用户请装IE9就对了,至于IE9之前的版本,需要装SVG的插件,这里就直接略过了)。对于直接支持SVG的浏览器,SVG主要采用两面两种呈现的方式。

 内联到HTML

   SVG是标准的HTML元素,直接写到HTML中就可以了,看下面的例子:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html>
<head>
  <!-- <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> -->
  <title> My First SVG Page</title>
</head>
<body>
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1"
       width="200px" height="200px">
    <rect x="0" y="0" width="100%" height="100%"
          fill="none" stroke="black"/>
    <circle cx="100" cy="100" r="50"
            style="stroke: black; fill: red;"/>
  </svg>
</body>
</html>

请注意开头的部分xml声明,与svg的命名空间xmlns、版本version等部分,主要是考虑兼容性的问题;这些部分在HTML5中基本都可以不用写了(写不写还是自己瞧着办吧)。

 独立SVG文件

 独立SVG指的是通过使用svg文件扩展名来提供向量图形文件格式。在浏览器中嵌入这个svg文件就可以使用了。

1.独立的SVG文件/页面,定义的模板基本就像下面的一样:

<svg width="100%" height="100%">   
  <!-- SVG markup here. -->    
</svg>

把这样的文本文件保存成以svg为扩展名的文件,例如sun.svg,这样的文件可以直接用浏览器打开浏览,也可以作为引用嵌入到别的页面中。

2.HTML引用外部的SVG文件。

使用object或者img元素嵌入svg图形就可以了,例如下面的小例子:

<!DOCTYPE html>
<html>
<head>
  <title> My First SVG Page</title>
</head>
<body>
  <object data="sun.svg" type="image/svg+xml"
          width="300px" height="300px">
    <!-- Implement fallback code here, or display a message: -->
    <p>Your browser does not support SVG - please upgrade to a modern browser.</p>
  </object>

  <img src="sun.svg" alt="svg not supported!" />
</body>
</html>

其实SVG也可以放在其他的XML文档中,也可以像其他的XML文档一样,使用XML相关的技术格式化和验证,这个不是重点,此处略去了。

SVG的渲染顺序

SVG是严格按照定义元素的顺序来渲染的,这个与HTML靠z-index值来控制分层不一样。在SVG中,写在前面的元素先被渲染,写在后面的元素后被渲染。后渲染的元素会覆盖前面的元素,虽然有时候受透明度影响,看起来不是被覆盖的,但是SVG确实是严格按照先后顺序来渲染的。

注意:SVG是以XML定义的,所以是大小写敏感的,这点与HTML不一样。

突袭HTML5之SVG 2D入门2 - 图形绘制

<svg width="200" height="250">
  <rect x="10" y="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>
  <rect x="60" y="10" rx="10" ry="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>

  <circle cx="25" cy="75" r="20" stroke="red" fill="transparent" stroke-width="5"/>
  <ellipse cx="75" cy="75" rx="20" ry="5" stroke="red" fill="transparent" stroke-width="5"/>

  <line x1="10" x2="50" y1="110" y2="150" stroke="orange" fill="transparent" stroke-width="5"/>
  <polyline points="60 110 65 120 70 115 75 130 80 125 85 140 90 135 95 150 100 145"
      stroke="orange" fill="transparent" stroke-width="5"/>

  <polygon points="50 160 55 180 70 180 60 190 65 205 50 195 35 205 40 190 30 180 45 180"
      stroke="green" fill="transparent" stroke-width="5"/>

  <path d="M20,230 Q40,205 50,230 T90,230" fill="none" stroke="blue" stroke-width="5"/>
</svg>

Html5之svg可缩放矢量图形_动力节点Java学院整理

这个例子画了很多形状:正常的矩形,带圆角的矩形,圆形,椭圆形,直线,折线,多边形,还有路径。这些都属于基本的图形元素。虽然绘制一个图形有很多种方式,比如矩形可以用rect实现,也可以用path等实现,但是我们还是应该尽量保持SVG的内容短小精悍,易于阅读。

HTML / CSS 相关文章推荐
CSS3实现跳动的动画效果
Sep 12 HTML / CSS
CSS3弹性盒模型开发笔记(三)
Apr 26 HTML / CSS
CSS Grid布局教程之网格单元格布局
Dec 30 HTML / CSS
详解CSS3的perspective属性设置3D变换距离的方法
May 23 HTML / CSS
CSS3中Transition动画属性用法详解
Jul 04 HTML / CSS
HTML5 device access 设备访问详解
May 24 HTML / CSS
html+css实现自定义图片上传按钮功能
Sep 04 HTML / CSS
HTML5 Canvas实现平移/放缩/旋转deom示例(附截图)
Jul 04 HTML / CSS
HTML 5.1来了 9月份正式发布 更新内容预览
Apr 26 HTML / CSS
使用canvas对video视频某一刻截图功能
Sep 25 HTML / CSS
Html5获取用户当前位置的几种方式
Jan 18 HTML / CSS
HTML5等待加载动画效果
Jul 27 #HTML / CSS
利用Canvas模仿百度贴吧客户端loading小球的方法示例
Aug 13 #HTML / CSS
HTML5中FileReader接口使用方法实例详解
Aug 26 #HTML / CSS
html5使用canvas实现图片下载功能的示例代码
Aug 26 #HTML / CSS
html5+CSS3+JS实现七夕言情功能代码
Aug 28 #HTML / CSS
html5使用html2canvas实现浏览器截图的示例
Aug 31 #HTML / CSS
前端面试必备之html5的新特性
Sep 05 #HTML / CSS
You might like
如何写php程序?
2006/12/08 PHP
攻克CakePHP系列一 连接MySQL数据库
2008/10/22 PHP
php计算两个日期相差天数的方法
2015/03/14 PHP
PHP查找与搜索数组元素方法总结
2015/06/12 PHP
PHP文件生成的图片无法使用CDN缓存的解决方法
2015/06/20 PHP
Yii框架扩展CGridView增加导出CSV功能的方法
2017/05/24 PHP
PHP实现的迪科斯彻(Dijkstra)最短路径算法实例
2017/09/16 PHP
购物车选中得到价格实现示例
2014/01/26 Javascript
jQuery使用append在html元素后同时添加多项内容的方法
2015/03/26 Javascript
jQuery+jsp实现省市县三级联动效果(附源码)
2015/12/03 Javascript
jQuery深拷贝Json对象简单示例
2016/07/06 Javascript
js控制li的隐藏和显示实例代码
2016/10/15 Javascript
JS绘制微信小程序画布时钟
2016/12/24 Javascript
利用Angular+Angular-Ui实现分页(代码加简单)
2017/03/10 Javascript
详解webpack3如何正确引用并使用jQuery库
2017/08/26 jQuery
nodejs基于express实现文件上传的方法
2018/03/19 NodeJs
Vue递归实现树形菜单方法实例
2018/11/06 Javascript
Python最基本的输入输出详解
2015/04/25 Python
Python数据持久化shelve模块用法分析
2018/06/29 Python
判断python对象是否可调用的三种方式及其区别详解
2019/01/31 Python
Python版中国省市经纬度
2020/02/11 Python
Charles & Keith欧盟:新加坡时尚品牌
2019/08/01 全球购物
乌克兰在线电子产品商店:MTA
2019/11/14 全球购物
英国领先的在线高尔夫设备零售商:Golfgeardirect
2020/12/11 全球购物
俄罗斯隐形眼镜和眼镜在线商店:Cronos
2020/06/02 全球购物
全球最大运动品牌的男装、女装和童装官方库存商:A&A Sports
2021/01/17 全球购物
String是最基本的数据类型吗?
2013/06/13 面试题
C#和SQL Server的面试题
2016/08/12 面试题
Linux不知道文件后缀名怎么判断文件类型
2014/08/21 面试题
教师申诉制度
2014/01/29 职场文书
2015年少先队活动总结
2015/03/25 职场文书
单位领导婚礼致辞
2015/07/28 职场文书
廉洁自律准则学习心得体会
2016/01/13 职场文书
Python实现查询剪贴板自动匹配信息的思路详解
2021/07/09 Python
Java spring定时任务详解
2021/10/05 Java/Android
redis数据结构之压缩列表
2022/03/21 Redis