电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛

标题: HTML5 中的可缩放矢量图形（SVG）-基础 [打印本页]

作者: look_w 时间: 2018-10-17 19:17 标题: HTML5 中的可缩放矢量图形（SVG）-基础

简介可缩放矢量图形 (SVG) 是基于矢量的图形家族的一部分。它们与基于光栅的图形不同，后者在一个数据数组中存储每个像素的颜色定义。如今，网络上使用的最常见的光栅图形格式包括 JPEG、GIF 和 PNG，每种格式都具有优缺点。
常用缩写词

CSS：级联样式表
GIF：图形交换格式
GUI：图形用户界面
HTML：超文本标记语言
JPEG：联合图像专家组
PNG：可移植网络图形
SVG：可缩放矢量图形
XML：可扩展标记语言

相比任何基于光栅的格式，SVG 具有多项优势：

SVG 图形是使用数学公式创建的，需要在源文件中存储的数据要少得多，因为您无需存储每个独立像素的数据。
矢量图形可更好地缩放。对于网络上的图像，尝试从原始大小放大图像可能产生失真（或像素化的）图像。原始像素数据是针对特定大小进行设计的。当图像不再是该大小时，显示图像的程序会猜测使用何种数据来填充新的像素。矢量图像具有更高的弹性；当图像大小变化时，数据公式可相应地调整。
源文件大小可能更小，所以 SVG 图形比其他光栅图形的加载速度更快，使用的带宽更少。
SVG 图像由浏览器渲染，可以以编程方式绘制。SVG 图像可动态地更改，这使它们尤其适合数据驱动的应用程序，比如图表。
SVG 图像的源文件是一个文本文件，所以它既具有易于访问和搜索引擎友好特征。

本文将介绍 SVG 格式的优势，以及它们如何在 HTML5 中的 Web 设计工作中提供帮助。
SVG 基础知识要创建 SVG 图形，您会经历与创建 JPEG、GIF 或 PNG 文件完全不同的流程。JPEG、GIF 和 PNG 文件通常使用图像编辑程序创建，比如 Adobe Photoshop。SVG 图像通常使用基于 XML 的语言创建。有一些 SVG 编辑 GUI 将为您生成基础的 XML。但是，对于本文，我们假设您使用的是原始的 XML 语言。请参见获取有关 SVG 编辑程序的信息。
清单 1 给出了一个简单 SVG XML 文件的示例，该文件绘制一个具有 2 像素宽的黑色边框的红色圆形。
清单 1. SVG XML 文件

1
2
3
4

上述代码会得到图 1 中的图形。
图 1. 具有 2 像素宽的黑色边框的红色圆形

欢迎光临电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛 (http://bbs.eccn.com/)