SVG美洲杯冠军竞猜: 入门
SVG 新司机开车指南
原文出处: Tw93
一、栅格图形和矢量图形
栅格图形:也称位图,图像由一组二维像素网格表示。
Canvas 2d API 就是一款栅格图形 API。通过 Canvas API 绘制图形,其实是更新
Canvas 的像素。PNG 和 JPEG 是两种栅格图形的格式。即 PNG 和 JPEG
图像中的数据也同样代表着像素。
矢量图形:图像由数学描述的几何形状表示。矢量图像包括使用高级几何形状(比如线和形状)绘制图像所需的全部信息。
SVG 是矢量图形的一种,同 HTML 一样,SVG 是一种文件格式,有自己的
API。SVG 同 DOM API 结合形成了一种矢量图形 API。尽管可以将 PNG
等栅格图形嵌入到 SVG 中,但从根本上讲,SVG 是一种矢量格式。
TL,TR
SVG其相关特性远比想象中要强,本文首先介绍下SVG的相关定义、特点和Demo,接下来会介绍它的相关语法和动画,最后告诉大家如何使用和优化SVG。
确保大家一小时内可以开车上路….. 来不及解释了,快上车…..
二、理解 SVG
SVG 的本质特征是它基于 XML。HTML5 引入了内连 SVG,所以 SVG
元素可以直接出现在 HTML 标记中。
一、简介
SVG 和 Canvas 的重要差异:
(1)SVG 绘制的文本可选,而 Canvas 不能(因为 Canvas
文本用像素绘制,是图像的一部分);
(2)SVG 上的文本是可搜索的,Canvas 上的文本无法被搜索引擎获取。
定义
SVG(Scalable Vector Graphics)是可缩放矢量图形的缩写,基于可扩展标记语言XML来描述二维矢量图形的一种图形格式,由W3C制定,是一个开放标准。
HTML 是用来定义页面结构的声明性语言,而 SVG 是用来创建视觉结构的语言。通过 DOM API ,你可以与 SVG 和 HTML 进行交互。SVG 文档是元素构成的树状结构,同 HTML 一样,它支持脚本操作和添加样式,还可以向 SVG 元素添加事件处理函数。
特点
现在我们可以使用PNG、JPG来展示静态的图片,使用CSS3、JS或者挫一点的GIF来表示动画,厉害一点我们可以使用Canvas来绘图,那么为什么还要使用SVG呢?
- 和PNG、GIF比较起来,文件体积更小,且可压缩性强;
- 由于采用XML描述,可以轻易的被读取和修改,描述性更强;
- 在放大或改变尺寸的情况下其图形质量不会有所损失,与分辨率无关,是可伸缩的;
- SVG是面向未来 (W3C 标准)的,同时浏览器兼容性好;
- 使用CSS 和 JS能很方便的进行控制,同时可以很轻易地描述路径动画;
- 和Canvas相比
- Canvas基于像素,提供2D绘制函数,是一种HTML元素类型,依赖于HTML,只能通过脚本来绘制图形,Canvas提供的功能比较原始,适合像素处理,动态渲染和大数据量绘制的应用场景;
- SVG为矢量,提供一系列图形元素(Rect, Path, Circle, Line …),还有完整的动画,事件机制,本身可以独立使用,也可以嵌入到HTML中,SVG很早就成为了国际标准,功能更完善,适合静态图片展示,高保真文档查看和打印的应用场景;
图形 API 设计方面存在两个派系:
一是即时模式(immediate-mode):图形提供了绘图接口,由 API
接口调用引起的绘制行为会即时发生。如 Canvas。
二是保留模式(retained-mode):在保留模式图形中,有一个与场景中的视觉对象对应的模型,它会随着时间的推移而保留下来。可以使用
API 操作场景图形,当其改变时,图形引擎会重绘场景。SVG
是一种保留模式图形,其场景图形就是文档。用于操作 SVG 的 API 是 W3C DOM
API。
Demo
使用SVG可以做出什么比较好玩的东西呢?
上周团队(
本文由美洲杯冠军竞猜发布于计算机教程,转载请注明出处:SVG美洲杯冠军竞猜: 入门
关键词: