`

突袭HTML5之SVG 2D入门1 - SVG综述

    博客分类:
  • SVG
 
阅读更多

 

 

位图与矢量图

  以前,浏览器中显示的图形,例如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/

分享到:
评论

相关推荐

    jaxb-svg11-1.0.2-API文档-中文版.zip

    赠送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...

    jaxb-svg11-1.0.2-API文档-中英对照版.zip

    赠送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...

    svg-pan-zoom-master

    SVG-pan-zoom-master 是一个专门为SVG图像设计的前端插件,用于实现对SVG图片的平移和缩放功能,同时也适用于普通的PNG和JPG图片。这个插件极大地提升了用户体验,特别是在处理大图或需要交互式查看细节的场景下。 ...

    svg-pan-zoom-master.rar

    SVG-pan-zoom库是专为JavaScript设计的一个工具,用于实现SVG图像的平移和缩放功能,使用户能够通过滚轮或鼠标拖动来查看图像的各个部分。 这个"svg-pan-zoom-master.rar"压缩包包含了SVG-pan-zoom库的源代码及其...

    如何使用vite-svg-loader

    1. 安装 Vite-SVG-Loader 插件 首先,需要使用 npm 或 yarn 将 Vite-SVG-Loader 插件安装到项目中。命令如下: ``` npm install vite-svg-loader --save-dev ``` 2. 配置 Vite 配置文件 在安装了插件后,需要在 ...

    react-native-qrcode-svg:基于react-native-svg和node-qrcode的React Native QR码生成器

    讨论: : 产品特点轻松渲染QR码图像(可选)嵌入徽标安卓的iOS安装安装依赖包yarn add react-native-svg react-native-qrcode-svg 要么npm i -S react-native-svg react-native-qrcode-svg 如果您使用的是React ...

    svg-explorer-extension-32bit-64bit-exe.zip

    本压缩包"svg-explorer-extension-32bit-64bit-exe.zip"包含两个文件,分别是"dssee_setup_x64_v011_signed.exe"和"dssee_setup_i386_v011_signed.exe"。这两个文件是SVG预览插件的安装程序,分别适用于64位和32位的...

    save-ps-to-svg 1.0.zip

    5. 确认后,脚本会创建一个SVG文件,其中包含了所有选中形状图层的数据。 需要注意的是,此脚本可能不支持PS中的复杂效果,如渐变、阴影或模糊,因为这些效果在SVG中可能需要不同的处理方式。如果你的形状图层包含...

    svg-pan-zoom.js

    viewportSelector: '.svg-pan-zoom_viewport' , panEnabled: true , controlIconsEnabled: false , zoomEnabled: true , dblClickZoomEnabled: true , mouseWheelZoomEnabled: true , preventMouseEventsDefault: ...

    react-svg-pan-zoom, 将平移和缩放特性添加到SVG的响应组件.zip

    react-svg-pan-zoom, 将平移和缩放特性添加到SVG的响应组件 react-svg-pan-zoom英镑react-svg-pan-zoom是一个反应组件,增加英镑pan和英镑的缩放特性,以英镑的SVG图像。 它有助于在小空间中显示大的SVG图像。 实时...

    开发工具 fontawesome-webfont.svg

    开发工具 fontawesome-webfont.svg开发工具 fontawesome-webfont.svg开发工具 fontawesome-webfont.svg开发工具 fontawesome-webfont.svg开发工具 fontawesome-webfont.svg开发工具 fontawesome-webfont.svg开发工具...

    解决SVG画线line-polyline、矩形rect等线条的stroke-width=1px属性,显示结果变宽成为2px的问题,以及文字模糊的问题

    解决这一问题的方法之一是使用`vector-effect: non-scaling-stroke`属性,它能确保线条的宽度不会随着SVG的缩放而改变,始终以设备独立像素为单位。 对于矩形rect,其stroke-width同样会受到这个问题的影响。除了...

    save-ps-to-svg1.0.zip 让PS支持导出SVG

    标题“save-ps-to-svg1.0.zip 让PS支持导出SVG”揭示了一个关于Adobe Photoshop(简称PS)的扩展功能,即添加了将形状图片转换为SVG(Scalable Vector Graphics)路径的能力。SVG是一种基于XML的矢量图像格式,具有...

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

    位图与矢量图 以前,浏览器中显示的图形,例如jpeg、gif等,都是位图,这些图像格式是基于光栅的。在光栅图像中,图像文件定义了图像中每个像素的颜色值。浏览器需要读取这些值并做出相应行动。...

    NN-SVG-master.zip

    NN-SVG-master.zip是一个压缩包,包含了用于绘制神经网络架构的SVG图像的工具。这个工具特别之处在于它支持三种不同的神经网络模型的图形表示:全连接神经网络(FCNN)、LeNet以及AlexNet。这些模型在深度学习领域...

    svg学习----基础学习

    1. **SVG的基本结构**:SVG图形由一系列的元素组成,如矩形(`&lt;rect&gt;`)、圆形(`&lt;circle&gt;`)、椭圆(`&lt;ellipse&gt;`)、线(`&lt;line&gt;`)、路径(`&lt;path&gt;`)等。每个元素都有各自的属性,如位置、大小、颜色等。 2. **...

    前端开源库-svg-classic-sprite-loader

    1. **安装依赖**:首先,通过npm或yarn在项目中安装`svg-classic-sprite-loader`及其依赖,如`svg-sprite-loader`和`webpack`。 ```bash npm install svg-classic-sprite-loader svg-sprite-loader webpack --save...

    SVG2Vector-1.0.0-SVG编辑工具.jar.7z

    5. 输入以下命令来启动SVG编辑工具: ``` java -jar SVG2Vector-1.0.0-SVG编辑工具.jar ``` 这条命令会启动Java虚拟机,并运行.jar文件中的程序。 SVG编辑工具可能包含的功能包括: - 创建新的SVG图形,或者...

    vue-svg-loader-Webpack加载器,可让您将SVG文件用作Vue组件-Vue.js开发

    vue-svg-loader webpack loader,可让您将SVG文件用作Vue组件文档-常见问题解答安装npm i -D vue-svg-loader vue-template-comp vue-svg-loader Webpack loader,可让您将SVG文件用作Vue组件文档-常见问题解答安装...

    save-ps-to-svg1.0.rar

    标题中的"save-ps-to-svg1.0.rar"表明这是一个压缩包文件,版本为1.0,根据描述推测可能包含一个用于将Photoshop(PS)文件转换为Scalable Vector Graphics(SVG)格式的脚本。SVG是一种矢量图形格式,与像素图(如...

Global site tag (gtag.js) - Google Analytics