位图与矢量图
以前,浏览器中显示的图形,例如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/
分享到:
相关推荐
赠送jar包:jaxb-svg11-1.0.2.jar; 赠送原API文档:jaxb-svg11-1.0.2-javadoc.jar; 赠送源代码:jaxb-svg11-1.0.2-sources.jar; 赠送Maven依赖信息文件:jaxb-svg11-1.0.2.pom; 包含翻译后的API文档:jaxb-svg11...
赠送jar包:jaxb-svg11-1.0.2.jar; 赠送原API文档:jaxb-svg11-1.0.2-javadoc.jar; 赠送源代码:jaxb-svg11-1.0.2-sources.jar; 赠送Maven依赖信息文件:jaxb-svg11-1.0.2.pom; 包含翻译后的API文档:jaxb-svg11...
开发工具 fontawesome-webfont.svg开发工具 fontawesome-webfont.svg开发工具 fontawesome-webfont.svg开发工具 fontawesome-webfont.svg开发工具 fontawesome-webfont.svg开发工具 fontawesome-webfont.svg开发工具...
javascript操作svg,支持滚轮放大缩小,鼠标拖动,有多个demo演示
如何使用vite-svg-loader
讨论: : 产品特点轻松渲染QR码图像(可选)嵌入徽标安卓的iOS安装安装依赖包yarn add react-native-svg react-native-qrcode-svg 要么npm i -S react-native-svg react-native-qrcode-svg 如果您使用的是React ...
Svg win系统预览插件,安装以后可以和预览PNG一样直接看到图片样式,一目了然,而不需要一 一通过浏览器来打开才能看到,安装后无需任何操作,就能生效
位图与矢量图 以前,浏览器中显示的图形,例如jpeg、gif等,都是位图,这些图像格式是基于光栅的。在光栅图像中,图像文件定义了图像中每个像素的颜色值。浏览器需要读取这些值并做出相应行动。...
viewportSelector: '.svg-pan-zoom_viewport' , panEnabled: true , controlIconsEnabled: false , zoomEnabled: true , dblClickZoomEnabled: true , mouseWheelZoomEnabled: true , preventMouseEventsDefault: ...
svg-pan-zoom-master 是一个前端好用的svg格式图片,或者普通png jpg 图片缩放移动的插件。超级好用
解决SVG画线line-polyline、矩形rect等线条的stroke-width=1px属性,显示结果变宽成为2px的问题,以及文字模糊的问题
nuxt-svg-sprite-loader 用于svg-sprite-loader的Nuxt.js模块。 安装 # npm $ npm install nuxt-svg-sprite-loader # Yarn $ yarn add nuxt-svg-sprite-loader 用法 该模块添加到您Nuxt.js模块列表nuxt.config.js...
svg基础学习,svg基础语法,svg初学者必备教程,欢迎下载
赠送jar包:wmf2svg-0.9.8.jar; 赠送原API文档:wmf2svg-0.9.8-javadoc.jar; 赠送源代码:wmf2svg-0.9.8-sources.jar; 赠送Maven依赖信息文件:wmf2svg-0.9.8.pom; 包含翻译后的API文档:wmf2svg-0.9.8-javadoc-...
react-svg-pan-zoom, 将平移和缩放特性添加到SVG的响应组件 react-svg-pan-zoom英镑react-svg-pan-zoom是一个反应组件,增加英镑pan和英镑的缩放特性,以英镑的SVG图像。 它有助于在小空间中显示大的SVG图像。 实时...
赠送jar包:wmf2svg-0.9.8.jar; 赠送原API文档:wmf2svg-0.9.8-javadoc.jar; 赠送源代码:wmf2svg-0.9.8-sources.jar; 赠送Maven依赖信息文件:wmf2svg-0.9.8.pom; 包含翻译后的API文档:wmf2svg-0.9.8-javadoc-...
将SVG(矢量图)批量转换为vector的工具库。 (java -jar svg2vector-cli-1.0.1.jar -d . -o svg) (-d:批量转换的源文件地址 -f:单个转换的源文件地址 -o:转换后要输出的文件地址 -h:输出的高 -w:输出的宽...
编辑你的SVG资源文件 启动工具:java -jar svg2vector-applet-1.0.0.jar
支持 PhotoShop 将形状图片转化为 svg路径的脚本
react-native-svg-uri, 在来自URL或者 static 文件的本地响应中,呈现SVG图像 react-native-svg-uri从URL或者 static 文件中呈现来自React的SVG图像这是用 rn 0.33和 react-native-svg 4.3.1 ( 依赖于此库) react-...