• 售前

  • 售后

热门帖子
入门百科

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

[复制链接]
喝多的板砖剂 显示全部楼层 发表于 2021-10-25 19:11:37 |阅读模式 打印 上一主题 下一主题
位图与矢量图
从前,欣赏器中显示的图形,例如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技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作