来自 计算机教程 2019-04-14 02:45 的文章
当前位置: 美洲杯冠军竞猜 > 计算机教程 > 正文

SVG美洲杯冠军竞猜: 入门

SVG 新司机开车指南

2017/04/10 · HTML5 · 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。

确保大家一小时内可以开车上路….. 来不及解释了,快上车…..

美洲杯冠军竞猜 1

二、理解 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可以做出什么比较好玩的东西呢?

美洲杯冠军竞猜 2

上周团队(

本文由美洲杯冠军竞猜发布于计算机教程,转载请注明出处:SVG美洲杯冠军竞猜: 入门

关键词: