• 售前

  • 售后

热门帖子
入门百科

HTML5之SVG 2D入门1—SVG(可缩放矢量图形)概述

[复制链接]
mzhqyy 显示全部楼层 发表于 2021-10-25 19:38:04 |阅读模式 打印 上一主题 下一主题
位图与矢量图
从前,浏览器中表现的图形,例如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不一样。

实用参考
官方文档:http://www.w3.org/TR/SVG11/
脚本索引:http://msdn.microsoft.com/zh-cn/library/ff971910(v=vs.85).aspx
开发中心:https://developer.mozilla.org/en/SVG
热门参考:http://www.chinasvg.com/

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作