`
huibin
  • 浏览: 757234 次
  • 性别: Icon_minigender_1
  • 来自: 郑州
社区版块
存档分类
最新评论

什么是SVG?

    博客分类:
  • SVG
 
阅读更多
  

SVG格式

SVG是一种用XML定义的语言,用来描述二维矢量及矢量/栅格图形。SVG提供了3种类型的图形对象:矢量图形(vectorgraphicshape例如:由直线和曲线组成的路径)、图象(image)、文本(text)。图形对象还可进行分组、添加样式、变换、组合等操作,特征集包括嵌套变换(nestedtransformations)、剪切路径(clippingpaths)、alpha蒙板(alphamasks)、滤镜效果(filtereffects)、模板对象(templateobjects)和其它扩展(extensibility)。

  SVG图形是可交互的和动态的,可以在SVG文件中嵌入动画元素或通过脚本来定义动画。

  SVG可以算是目前最最火热的图像文件格式了,它的英文全称为Scalable Vector Graphics,意思为可缩放的矢量图形。它是基于XML(Extensible Markup Language),由World Wide Web Consortium(W3C)联盟进行开发的。严格来说应该是一种开放标准的矢量图形语言,可让你设计激动人心的、高分辨率的Web图形页面。用户可以直接用代码来描绘图像,可以用任何文字处理工具打开SVG图像,通过改变部分代码来使图像具有互交功能,并可以随时插入到HTML中通过浏览器来观看。

  它提供了目前网络流行的GIF和JPEG格式无法具备的优势:可以任意放大图形显示,但绝不会以牺牲图像质量为代价;可在SVG图像中保留可编辑和可搜寻的状态;平均来讲,SVG文件比JPEG和GIF格式的文件要小很多,因而下载也很快。可以相信,SVG的开发将会为Web提供新的图像标准。

 

 

什么是SVG,  SVG的特点, SVG较G I F、JPEG的优势

一、什么是SVG?

  S V G(可放缩的矢量图形)是W3C(World Wide Web ConSor—tium国际互联网标准组织)在2000年8月制定的一种新的二维矢量图形格式,也是规范中的网络矢量图形标准。W3C是作为一个国际X的工业联盟而创建的, 目的是领导整个互联网协作的发展和创新, 以实现科技的进步和共同发展。由于W3C联盟关于SVG的开发工作组的成员都是一些知名厂商, 如Adobe、苹果、Aut0De sk、Bit Fla sh、Corel、惠普、IBM、ILOG、INSO、Macromedia、微软、Netscape、OASIS、Open Text、Quark、RAL(C C LRC)、S un、V i S i 0、施乐等,所以SVG不是一个私有格式,而是一个开放的标准。也就是说,它并不属于任何个体的专利,而是一个通过协作、共同开发的工业标准。正是因为这点,才使得SVG能够得到更迅速的开发和应用。

  二、SVG的特点

  1.基于XML

  为了保证网络图像能够顺利地和目前已经由W3C开发的D0M1,DOM2,CSS,XML,XPointer,XSLT,XSL,SMIL,HTML,XHTML技术,以及其他标准化技术,如ICC,URI,UNICODE,RGB,ECMAScr ipt/JavaScript,Java协调一致,SVG是完全基于x M L(E X t e n s i b l eMarkup Language可扩展置标语言), 并能和上述各项技术相融会的新一代的网络图像格式。SVG并非仅仅是一种图像格式, 由于它是一种基于XML的语言,也就意味着它继承了XML的跨平台X和可扩展X,从而在图形可重用X上迈出了一大步。如SVG可以内嵌于其他的XML文档中,而SVG文档中也可以嵌入其他的XML内容,各个不同的SVG图形可以方便地组合, 构成新的SVG图形。

  2.采用文本来描述对象

  SVG包括3种类型的对象: 矢量图形(包括直线、曲线在内的图形边)、点阵图像和文本。各种图像对象能够组合、变换,并且修改其样式,也能够定义成预处理对象。

  与传统的图像格式不同的是,svG采用文本来描述矢量化的图形,这使得svG图像文件可以像HT札网页一样有着很好的可读X。当用户用图像工具输出svG后,可以用任何文字处理工具打开SVG图像,并可看到用来描述图像的文本代码。掌握了svG语法的人甚至可以只用一个记事本便可以读出图像中的内容来。

  svG文件中的文字虽然在显示时可呈现出各种图像化的修饰效果,但却仍然是以文本的形式存在的,可以选择复制、粘贴。由于SVG内的文字都以文本的形式出现在XML文件中, 这些信息可以为搜索引擎所用,而以往搜索引擎通常无法搜索到写在点阵图像中的文字。这些文本信息还可以帮助视力有残疾而无法看到图形的人,可以通过其他方式(如声音)来传送这些信息。

  3.具有交互X和动态X

  由于网络是动态的媒体,SVG要成为网络图像格式,必须要具有动态的特征,这也是区别于其它图像格式的一个重要特征。SVG是基于XML的,它提供无可匹敌的动态交互X。你可以在svG文件中嵌入动画元素(如运动路径、渐现或渐隐效果、生长的物体、收缩、快速旋转、改变颜色等),或通过脚本定义来达到高亮显示、声音、动画等效果。

  4.完全支持DOM

  D0M(Document Object Model文档物件模型)是一种文档平台,它允许程序或脚本动态的存储和上传文件的内容、结构或样式。由于SVG完全支持DOM, 因而SVG文档可以通过一致的接口规范与外界的程序打交道。SVG以及SVG中的物件元素完全可以通过脚本语言接受外部事件的驱动,例如鼠标动作,实现自身或对其他物件、图像的控制等。这也是电子文档应具备的优秀特X之一。

  三、SVG较G I F、JPEG的优势

  首先简要解释一下矢量图像格式和位图图像格式的区别。矢量图像用点和线来描述物体,所以文件会比较小,同时也能提供高清晰的画面,适合于直接打印或输出。而位图图像的存储单位是图像上每一点的像素值,因此一般的图像文件都很大,会占用大量的网络带宽。SVG是一种矢量图形格式,GIF、3PEG是位图图像格式。有了两者的概念后,SVG较GIF、JPEG的优势显而易见。

  1.任意放缩。

  用户可以任意缩放图像显示,而不会破坏图像的清晰度、细节等。

  2.文本独立。

  SVG图像中的文字独立于图像,文字保留可编辑和可搜寻的状态。也不会再有字体的限制,用户系统即使没有安装某一字体,也会看到和他们制作时完全相同的画面。

  3.较小文件。

  总体来讲,SVG文件比那些GIF和JPEG格式的文件要小很多,因而下载也很快。

  4.超强显示效果

  SVG图像在屏幕上总是边缘清晰,它的清晰度适合任何屏幕分辨力和打印分辨力。

  5.超级颜色控制。

  SVG图像提供一个1 600万种颜色的调色板,支持ICC颜色描述文件标准、RGB、线X填充、渐变和蒙版。

  6.交互X和智能化。

  由于SVG是基于XML的, 因而能制作出空前强大的动态交互图像。即SVG图像能对用户动作做出不同响应, 例如高亮、声效、特效、动画等。
分享到:
评论

相关推荐

    使用Glide在Android中加载SVG.zip

    在Android应用开发中,SVG(Scalable Vector Graphics)是一种常用的矢量图形格式,它可以提供高质量、可缩放的图像,特别适合用于图标或者复杂的图形设计。然而,原生的Android SDK并不支持直接显示SVG,因此开发者...

    w3shool SVG 教程

    什么是SVG? SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用来定义用于网络的基于矢量的图形 SVG 使用 XML 格式定义图形 SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失 SVG 是万维网联盟的标准...

    HTML5 内联 SVG

    什么是SVG? SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用于定义用于网络的基于矢量的图形 SVG 使用 XML 格式定义图形 SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失 SVG 是万维网联盟的标准 ...

    全国各省市SVG地图 全国各省市SVG地图

    全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG...

    Adobe SVG Viewer 编辑器

    Adobe SVG Viewer是Adobe公司最具有代表性的SVG浏览插件(了解什么是SVG请访问http://www.chinasvg.com),该浏览插件从Adobe官方网站可以下载到,同时Adobe公司的很多相关软件都附带了该插件,比如Acrobat Reader、...

    SVG-Spinner:使用 SVG 加载微调器,没有 JavaScript,没有不必要的 DOM 元素

    为什么是 SVG? SVG 图像非常小且完全可缩放,因为它们是基于矢量的。 一个简单的动画 SVG 微调器,有 12 个点,重约 750 字节(压缩后约 350 字节),在任何分辨率下看起来都不错。 相比之下,spin.js 脚本的权重...

    个重要的HTML面试题及答案.docx

    * 什么是SVG?SVG是Scalable Vector Graphics的缩写,用于创建可缩放的矢量图形。 * 我们可以使用HTML5中的SVG来画一个简单的矩形吗?是的,我们可以使用HTML5中的SVG来画一个矩形。 * Canvas是什么?Canvas是HTML5...

    dxf转svg,svg转png

    标题提到的“dxf转svg,svg转png”涉及两种不同的转换过程,都是图形文件格式之间的转换。DXF(Drawing Exchange Format)是AutoCAD用于二维绘图的数据交换格式,SVG(Scalable Vector Graphics)是一种基于XML的矢量...

    SVG.rar_svg_svg 源代码_svg c++

    SVG,全称Scalable Vector Graphics,是一种基于XML的矢量图像格式,广泛应用于网页设计、软件开发和图形用户界面中。SVG图像以其清晰的分辨率和无限缩放性而受到青睐,尤其在需要高质量图形输出或者需要进行动态...

    glide加载和下载svg矢量图片

    SVG(Scalable Vector Graphics)是一种矢量图格式,与传统的位图图像不同,SVG图像可以无损缩放,不会因为放大而出现像素化。在Android应用中,使用SVG可以提供高质量的图标和图形,尤其适用于多种屏幕尺寸和分辨率...

    C#,.net,winform上SVG的源代码和示例

    在本文中,我们将深入探讨如何在C# .NET WinForm应用程序中使用SVG(Scalable Vector Graphics)图形。SVG是一种开放标准的矢量图形格式,它允许开发者创建可缩放的、高质量的图形,适用于各种屏幕分辨率。由于...

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

    什么是SVG?  SVG 指可伸缩矢量图形 (Scalable Vector Graphics)  SVG 用来定义用于网络的基于矢量的图形  SVG 使用 XML 格式定义图形  SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失  SVG 是...

    wincc svg对象修改工具

    SVG(Scalable Vector Graphics)是一种基于XML的矢量图形格式,它在WinCC中用于创建清晰、高分辨率的图形对象,尤其适用于在不同屏幕尺寸和分辨率下保持图像质量不变的情况。本文将详细介绍如何使用WinCC中的SVG...

    c/c++ svg转png, svg文件渲染例子

    SVG(Scalable Vector Graphics)是一种基于XML的矢量图像格式,它支持无限的缩放而不失真,广泛用于图标、图形设计和网页元素。然而,SVG文件在某些场合可能不被支持,这时就需要将其转换为像素图格式,如PNG。本篇...

    svg转css,css转svg,svg与css互相转换并压缩

    在Web应用开发中,SVG(Scalable Vector Graphics)和CSS(Cascading Style Sheets)是两种关键的技术,用于创建图形和布局。SVG是一种基于XML的矢量图像格式,能够提供高质量、可缩放的图形,而CSS则用于定义网页的...

    WPF用Image加载SVG,案例,带小工具

    在Windows Presentation Foundation (WPF) 中,SVG(Scalable Vector Graphics)是一种常见的矢量图形格式,它允许创建高质量、可缩放的图形。在WPF应用中直接使用SVG图像可能会遇到一些挑战,因为SVG不是WPF原生...

    SVG.zip_SVG 仿真模型_SVG模型仿真_svg 仿真_svg 无功_无功仿真

    SVG,全称Scalable Vector Graphics,是一种基于XML(可扩展标记语言)的二维矢量图形格式。在IT行业中,SVG被广泛应用于网页设计、软件开发以及嵌入式系统,因为它能够提供高质量的图像,同时文件大小相对较小,且...

    svg地图制作教程(可以自己制作想要的svg地图);中国各省svg地图;四川各市svg;

    SVG(Scalable Vector Graphics)是一种基于XML的矢量图形格式,它被广泛应用于网页设计、数据可视化和地图制作等领域。SVG地图具有清晰度高、缩放不失真、占用存储空间小等优点,尤其适用于需要交互式操作和动态...

    纯Java动态生成SVG饼图与JFreeChart超强功能生成SVG图表

    纯Java动态生成 SVG 饼图与 JFreeChart 超强功能生成 SVG 图表 在本文中,我们将探讨如何使用 Java 生成 SVG 饼图,并使用 JFreeChart 生成 SVG 图表。我们还将讨论 JFreeChart 的一些缺陷和解决方案。 一、Java ...

    winfrom 显示指定svg

    如果你想要在WinForm窗体上显示SVG(可缩放矢量图形)文件,这需要利用特定的库或组件,因为.NET Framework本身并不直接支持SVG格式。以下是一个详细的步骤指南,说明如何在WinForm中实现SVG显示。 1. **引入SVG库*...

Global site tag (gtag.js) - Google Analytics