SVG(可缩放矢量图形)

SVG可缩放矢量图形(Scalable Vector Graphics)是基于可扩展标记语言(XML),用于描述二维矢量图形的一种图形格式。SVG是W3C("World Wide Web ConSortium" 即 " 国际互联网标准组织")在2000年8月制定的一种新的二维矢量图形格式,也是规范中的网络矢量图形标准。SVG严格遵从XML语法,并用文本格式的描述性语言来描述图像内容,因此是一种和图像分辨率无关的矢量图形格式。

图片的数字化。将图片存储为数据有两种方案。其一为位图,也被称为光栅图。即是以自然的光学的眼光将图片看成在平面上密集排布的点的集合。每个点发出的光有独立的频率和强度,反映在视觉上,就是颜色和亮度。这些信息有不同的编码方案,在互联网上最常见的就是RGB。根据需要,编码后的信息可以有不同的位(bit)数——位深。位数越高,颜色越清晰,对比度越高;占用的空间也越大。另一项决定位图的精细度的是其中点的数量。一个位图文件就是所有构成其的点的数据的集合,它的大小自然就等于点数乘以位深。位图格式是一个庞大的家族,包括常见的JPEG/JPG, GIF, TIFF, PNG, BMP。

第二种方案为矢量图。它用抽象的视角看待图形,记录其中展示的模式而不是各个点的原始数据。它将图片看成各个“对象”的组合,用曲线记录对象的轮廓,用某种颜色的模式描述对象内部的图案(如用梯度描述渐变色)。比如一张留影,被看成各个人物和背景中各种景物的组合。这种更高级的视角,正是人类看世界时在意识里的反映。矢量图格式有CGM, SVG, AI (Adobe Illustrator), CDR (CorelDRAW), PDF, SWF, VML等等。

矢量图中简单的几何图形,只需要几个特征数值,就可以确定。比如三角形,只需要确定三个顶点的坐标。圆只需要确定圆心的坐标和半径。描述它的函数已知的曲线也只需要几个参数就能够确定。如正弦曲线、各种螺线等等。如果用位图记录这些几何图案,则需要包含组成线条的各个像素的数据。除了大大节省空间,矢量图还具有完美的伸缩性。因为记录的是图形的特征,图形的尺寸任意变化时,都只是做着相似变换,不会出现模糊和失真。相反位图的图片放大到超出原有大小时,各个像素点之间出现空缺,即使用某种算法填充,也会出现模糊锯齿等现象,不如矢量图精确。因而矢量图很适合用于记录诸如符号、图标等简单的图形。而位图则适合于没有明显规律的、颜色丰富细腻的图片。

SVG 有一些预定义的形状元素,可被开发者使用和操作:

  • 矩形 <rect>
  • 圆形 <circle>
  • 椭圆 <ellipse>
  • 线 <line>
  • 折线 <polyline>
  • 多边形 <polygon>
  • 路径 <path>

什么是SVG?

  SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
  SVG 用来定义用于网络的基于矢量的图形
  SVG 使用 XML 格式定义图形
  SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失
  SVG 是万维网联盟的标准
  SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体

 Canvas 和 SVG 的区别:
  SVG
    SVG 是一种使用 XML 描述 2D 图形的语言。
    SVG 基于 XML,这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。
    在 SVG 中,每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化,那么浏览器能够自动重现图形。
    特点:
       不依赖分辨率
       支持事件处理器
       最适合带有大型渲染区域的应用程序(比如谷歌地图)
       复杂度高会减慢渲染速度(任何过度使用 DOM 的应用都不快)
       不适合游戏应用
  Canvas
    Canvas 通过 JavaScript 来绘制 2D 图形。
    Canvas 是逐像素进行渲染的。
    在 canvas 中,一旦图形被绘制完成,它就不会继续得到浏览器的关注。如果其位置发生变化,那么整个场景也需要重新绘制,包括任何或许已被图形覆盖的对象。
    特点:
         依赖分辨率
       不支持事件处理器
       弱的文本渲染能力
       能够以 .png 或 .jpg 格式保存结果图像

       最适合图像密集型的游戏,其中的许多对象会被频繁重绘

<svg width="100%" height="100%"  >
    <circle cx="300" cy="60" r="50" stroke="#ff0" stroke-width="3" fill="red" />
</svg>

<img src="kiwi.svg" alt="新西兰鹬鸵鸟">
<a href="/" class="logo" style="background: url(kiwi.svg); display: block;text-indent: -9999px;width: 100px;height: 82px;background-size: 100px 82px;"> 新西兰 </a>

图标字体:

使用字体图标的优势

字体图标除了图像清晰度之外,比位图还有哪些优势呢。

适用性:一个图标字体比一系列的图像(特别是在Retina屏中使用双倍大小的图像)要小。一旦图标字体加载了,你的图标就会马上渲染出来,不需要下载一个图像。

可扩展性:图标字体可以用过font-size属性设置其任何大小。这使您能够随时输出不同大小的图标,然而,使用位图,你必须得为每个不同大小的图像输出一个不同文件。

灵活性文字效果可以很容易地应用到你的图标上,包括颜色,阴影和翻转等效果。他们还可以在任何背景下显示。

兼容性:网页字体支持所有现代浏览器,包括IE低版本。

弊端:

1、浏览器将其视为文字进行抗锯齿优化,有时得到的效果并没有想象中那么锐利。 尤其是在不同系统下对文字进行抗锯齿的算法不同,可能会导致显示效果不同。

2、Icon Font 作为一种字体,Icon 显示的大小和位置可能要受到font-sizeline-heightword-spacing等等 CSS 属性的影响。 Icon 所在容器的 CSS 样式可能对 Icon 的位置产生影响,调整起来很不方便。

3、使用上存在不便。首先,加载一个包含数百图标的 Icon Font,却只使用其中几个图标,非常浪费加载时间。 如果是自己制作 Icon Font 以及把多个 Icon Font 中用到的图标整合成一个 Font 也非常不方便。当然使用阿里UX矢量图标库可以解决这个问题

4、为了实现最大程度的浏览器支持,可能要提供至少四种不同类型的字体文件。包括TTF、WOFF、EOT 以及一个使用 SVG 格式定义的字体。如果是自己制作的话,可能要头疼死

参考:

http://www.w3school.com.cn/svg/index.asp

https://icomoon.io/

http://www.iconfont.cn/

时间: 2024-10-14 14:01:51

SVG(可缩放矢量图形)的相关文章

SVG可缩放矢量图形

SVG是指可伸缩矢量图形 SVG用来定义用于网络的基于矢量的图形 SVG使用XML格式定义图形 SVG图像在放大或缩小(改变尺寸)的情况下,其图形质量不会受受损失 SVG是W3C的一个标准 与其他图像格式相比,使用SVG的优势在于: SVG可被非常多的工具读取和修改(比如记事本) SVG与JPEG和GIF图像比起来,尺寸更小,且可压缩性更强. SVG是可伸缩的 SVG图像可在任何的分辨率下被高质量地打印 SVG可在图像质量不下降的情况下被放大 SVG图像中的文本是可选的,同时也是可搜索的(很适合

svg --- 可缩放矢量图形

svg听了很多遍了,一直没有机会好好地了解一下这是个什么东西,今天突然有兴趣,就好好看看吧~ 这篇文章主要参考的还是 w3school上的svg教程. 第一部分:简介 svg就是scalable vector graphics, 即可伸缩矢量图形. 我们平时下载icon时,就会遇到是否选择svg格式的图片的情况, SVG 用来定义用于网络的基于矢量的图形. SVG 使用XML格式定义图形. 重要: SVG图像在放大或改变尺寸的情况下其图形质量不会损失! 厉害啦 SVG 时万维网联盟的标准,与20

HTML5 中的可缩放矢量图形(SVG)

简介 可缩放矢量图形 (SVG) 是基于矢量的图形家族的一部分.它们与基于光栅的图形不同,后者在一个数据数组中存储每个像素的颜色定义.如今,网络上使用的最常见的光栅图形格式包括 JPEG.GIF 和 PNG,每种格式都具有优缺点. 相比任何基于光栅的格式,SVG 具有多项优势: SVG 图形是使用数学公式创建的,需要在源文件中存储的数据要少得多,因为您无需存储每个独立像素的数据. 矢量图形可更好地缩放.对于网络上的图像,尝试从原始大小放大图像可能产生失真(或像素化的)图像. 原始像素数据是针对特

SVG 意为可缩放矢量图形

SVG 意为可缩放矢量图形(Scalable Vector Graphics).SVG 使用 XML 格式定义图像.::::::::::::::::::::::::::::::::::::::http://www.iis7.com/b/wzjk/SVG 简介SVG 是使用 XML 来描述二维图形和绘图程序的语言.......什么是SVG?SVG 指可伸缩矢量图形 (Scalable Vector Graphics)SVG 用来定义用于网络的基于矢量的图形SVG 使用 XML 格式定义图形SVG

Andrid5.0新特性——SVG(可缩放矢量图形)

什么是SVG(Scalable Vector Graphics) SVG一种用于描述图像的标记语言.类似HTML. SVG严格遵从XML语法,并用文本格式的描述性语言来描述图像内容,因此是一种和图像分辨率无关的矢量图形格式. 标准制定开发历史 2001年9月4日,发布SVG 1.0. 2003年1月4日,发布SVG 1.1. 2003年1月14日,推出SVG移动子版本:SVG Tiny和SVG Basic. 2008年12月22日,发布SVG Tiny 1.2. 2011年8月16日,发布SVG

SVG可伸缩的矢量图形

SVG是对画该图形时的一些路径,做出精准的,必要的与分辨率无关的一种描述.即对矢量图的描述 在此安利一个svg绘图的网址,可以直接手动绘图,然后生成相关的svg描述,即可实现图片 属于所见所得的方式 有两种方式在Adobe系列软件中Illustrator可以直接生成svg的相关代码,还有相关的在线转换网站,可以实现将图片和svg的相互转换,https://www.aconvert.com/cn/format/svg/ 以及 https://convertio.co/zh/svg-converte

贝塞尔曲线与CSS3动画、SVG和canvas的应用

简介 贝塞尔曲线是可以做出很多复杂的效果来的,比如弹跳球的复杂动画效果,首先加速下降,停止,然后弹起时逐渐减速的效果. 使用贝塞尔曲线常用的两个网址如下: 缓动函数:http://www.xuanfengge.com/easeing/easeing/ cubic-bezier:http://cubic-bezier.com/ 如何用贝塞尔曲线画曲线 一个标准的3次贝塞尔曲线需要4个点:起始点.终止点(也称锚点)以及两个相互分离的中间点. 无论SVG, Canvas还是CSS3动画,都牵扯到这4个

HTML学习总结(四)【canvas绘图、WebGL、SVG】

一.Canvas canvas是HTML5中新增一个HTML5标签与操作canvas的javascript API,它可以实现在网页中完成动态的2D与3D图像技术.<canvas> 标记和 SVG以及 VML 之间的一个重要的不同是,<canvas> 有一个基于 JavaScript 的绘图 API,而 SVG 和 VML 使用一个 XML 文档来描述绘图.SVG 绘图很容易编辑与生成,但功能明显要弱一些. canvas可以完成动画.游戏.图表.图像处理等原来需要Flash完成的一

HTML5学习笔记3 内联SVG

HTML5支持内联SVG 下面来介绍一下什么是SVG SVG可缩放矢量图形 可缩放矢量是基于可扩展标记语言(标准通用语言的子集),用于描述二维矢量图形的一种图形格式.它由万维网联盟制定,是一个开放标准. 使用xml格式定义图形 在放大或缩小或改变尺寸的情况下其图形质量不会有损失 SVG优势 与其他的图像格式相比(比如jpeg和gif),使用svg优势在于 svg图像可通过文本编辑器来编辑来创建和修改 svg图像可被搜索,索引,脚本化或压缩 svg是可伸缩的 svg图像可在任何的分辨率下被高质量地