首页 > 资讯趋势,建站相关 > Gif,Png,SVG网页图片格式

Gif,Png,SVG网页图片格式

SVG 图像格式

SVG是种一种可缩放的矢量图形。它是基于XML,由W3C联盟进行开发的。严格来说应该是一种开放标准的矢量图形语言,可让你设计激动人心的、高分辨率的Web图形页面。

用户可以直接用代码来描绘图像,可以用任何文字处理工具打开SVG图像,通过改变部分代码来使图像具有交互功能,并可以随时插入到HTML中通过浏览器来观看。

SVG提供了目前网络流行格式GIF和JPEG无法具备了优势:可以任意放大图形显示,但绝不会以牺牲图像质量为代价;

文字在SVG图像中保留可编辑和可搜寻的状态;平均来讲,SVG文件比JPG和GIF格式的文件要小很多,因而下载也很快。

自2001年成为Web图形标准以来,SVG(可缩放向量制图法)一度被誉为未来Web图形标准。然而期待中的Web图形设计革命却迟迟未到,4年的时间正逐步将SVG推向遗忘的边缘。SVG将成为技术的古董?或者我们需要一个唤醒它的理由。

为什么浏览器开发商竞相开发SVG内建功能呢?这是因为SVG最大的魅力在它的易用性。与诸如GIF、JPEG等传统的图形图像格式相比,SVG的优点主要在于:

可缩放向量制图法可以保证图像的显示质量不会因为拖移或缩放等操作而受损,而这类操作目前正被广泛地用于绘制图表和Web站点的导航图。
增强的色彩精度(1600万种颜色)使得屏幕显示的图像与打印输出的图像色彩保持一致。
兼容XML、HTML4、XHTML等语言并符合CSS、XSL、DOM等规范。这就意味着SVG将是可扩展、可样式化、可脚本化和易于集成的。
高效的SVG词汇表大大缩减了图像文件的尺寸,从而减少了下载时间。

对于目前正面临着种种难题的Internet及其应用而言,SVG的应用前景十分广阔。可以预计,随着浏览器对SVG图形的支持,SVG图形将在Web应用中越来越流行。

小资料:什么是SVG?

  SVG格式的全名是“Scalable Vector Graphics”,中文的大概意思为“可变动的向量绘图形文件”其最主要的目的在于改善网页上头图片的品质,这种格式的文件可以包含渐层、动画、自型的处理及一些特效等功能,让网页的图片可以“活”起来,不再只是单纯的图片而已,并且其有取代“动态GIF”文件的架式呢。当您安装之后,可以先连上Adobe的SVG测试网页,看看是否真的可以使用了,如您看到如上面标题旁的时钟图,就表示您的浏览器可以观看SVG格式了。另外,Adobe公司的SVG网页中,有更多相关的资料

PNG 图像格式

PNG是一种可携式网络图像格式。PNG一开始便结合GIF及JPG两家之长,打算一举取代这两种格式。1996年10月1日由PNG向国际网络联盟提出并得到推荐认可标准,并且大部分绘图软件和浏览器开始支持PNG图像浏览,从此PNG图像格式生机焕发。

IE浏览器从4.0版本开始支持png图像浏览。

特点1:兼有gif和jpg的色彩模式。

我们知道gif格式图像采用了256色以下的index color色彩模式,jpg采用的是24位真彩模式。png不仅能储存256色以下的index color图像,还能储存24位真彩图像,甚至能最高可储存至48位超强色彩图像。

特点2:png能把图像文件压缩到极限以利于网络传输,但又能保留所有与图像品质有关的信息。

如果你的图像是以文字、形状及线条为主,png会用类似gif的压缩方法来得到较好的压缩率,而且不破坏原始图像的任何细节。据国际网络联盟测算,八位的png图像比同位的gif图像就小10%到30%。

而对于相片品质一类的压缩,png则采用类似jpg的压缩演算法。但是jpg压缩程度越大、影像的品质越差。因为它的压缩是采用的是破坏性压缩法、每次压缩的同时便多多少少漏掉一些像素。 png不同于jpg的地方在于:它处理相片类图像亦是采用非破坏性压缩,图像压缩后能保持与压缩前图像质量一样,没有一点失真。

特点3:更优化的传输显示。

熟悉gif格式的图像处理者知道,gif图像有两种模式——normal(普通)模式和interlaced(交错)模式。interlaced模式更适用于网络传输。在传送图像过程中,浏览者先看到图像一个大略的轮廓然后再慢慢清晰。png也采取了interlaced模式,使图像得以水平及垂直方式显像在萤幕上,加快了下载的速度。

特点4:支持图像透明显示。

gif格式虽然也支持透明显示,采用gif格式透明图像过于刻板,因为gif透明图像只有1与0的透明信息、只有透明或不透明两种选择,没有层次;而png提供了α频段0至255的透明信息,可以使图像的透明区域出现深度不同的层次。

png图像就可以让图像覆盖在任何背景上都看不到接缝,改善gif透明图像描边不佳的问题。

特点5:兼容性较好。

gif图像在不同系统上所显示的画面也会跟着不一样,但png却可以让你在Macintosh上制作的图像与在Windows上所显示的图像完全相同,反之亦然。
png被设计成可以通过网络传送到任何机种及作业系统上读取。

文字资料(如作者、出处)、储存遮罩(MASK)、伽玛值、色彩校正码等信息均可参杂在 png图像中一起传输。

几个发现:

不透明和索引色透明的图片, png8比gif更加具有优势。

Alpha透明的图片,png8比gif显示效果好,但文件更大。

png24没有透明效果:包括索引色透明和Alpha透明。

不同的浏览器,显示效果不一样。

Firefox:支持png8的索引色透明度, png8 和png32的alpha透明度。

IE:支持png8的索引色透明度,但不支持png8和png32的alpha透明度。(可用Js+css滤镜解决)

网页中使用的照片类图片,jpg文件一般比png24要小很多。但不排除特殊情况。

上一篇: what is "Disk Identifier"?

下一篇: CSS 段落首行缩进两个字符