跳转到内容

XML - 数据交换管理/SVG

来自维基教科书，开放的世界，开放的书籍


上一章 下一章
← SyncML VoiceXML →


 一位维基教科书用户认为此页面应该拆分为具有更窄子主题的较小页面。

你可以通过将此大页面拆分为更小的页面来提供帮助。请确保遵循 命名政策。将书籍拆分为更小的部分可以提供更多关注点，并允许每个部分专注于做好一件事，这有利于所有人。

你可以在 协助阅览室 中寻求帮助来拆分此书籍。
学习目标
  • 定义 SVG 及其目的
  • 讨论光栅图形和 SVG 之间的差异
  • 定义 Flash 和 SVG 之间的异同
  • 创建一个简单的 SVG 文档
 发起者

佐治亚大学

特里商学院

管理信息系统系

什么是 SVG？

[编辑 | 编辑源代码]

基于 XML，可缩放矢量图形 (SVG) 是一种由 W3C 创建的开放标准矢量图形文件格式和 Web 开发语言，旨在与其他 W3C 标准（如 DOM、CSS、XML、XSLT、XSL、SMIL、HTML 和 XHTML）兼容。SVG 能够从实时数据创建动态生成的、高质量的图形。SVG 允许你设计高分辨率图形，其中可以包含渐变、嵌入字体、透明度、动画和滤镜效果等元素。

SVG 文件不同于光栅或位图格式，例如 GIF 和 JPEG，它们必须包含显示图形所需的每个像素。因此，GIF 和 JPEG 文件往往体积庞大，仅限于单一分辨率，并消耗大量带宽。SVG 文件比它们的光栅对应文件小得多。此外，使用矢量意味着 SVG 图形在任何缩放级别都保持其分辨率。SVG 允许你缩放图形、使用任何字体并打印设计，而不会影响分辨率。SVG 基于 XML 并且以纯文本编写，这意味着 SVG 代码可以使用任何文本编辑器进行编辑。此外，SVG 与位图或光栅格式相比，提供了重要的优势，例如

  • 缩放：用户可以放大图像视图，而不会对分辨率产生负面影响。
  • 文本仍然是文本：文本保持可编辑和可搜索。此外，可以使用任何字体。
  • 小文件大小：SVG 文件通常比其他 Web 图形格式小，并且可以更快地下载。
  • 显示独立性：SVG 图像始终在你的屏幕上清晰显示，无论分辨率如何。你永远不会遇到“像素化”图像。
  • 卓越的颜色控制：SVG 提供了 1600 万种颜色调色板。
  • 交互性和智能性：由于 SVG 基于 XML，它提供了可以响应用户操作的动态交互性。

数据驱动的图形

[编辑 | 编辑源代码]

由于它是用 XML 编写的，因此 SVG 内容可以链接到后端业务流程、数据库和其他信息来源。SVG 文档使用现有的标准，例如层叠样式表 (CSS) 和可扩展样式表语言 (XSL)，使图形易于定制。这将导致

  • 降低维护成本：由于 SVG 允许动态更改图像属性，因此它消除了对大量图像文件的需求。SVG 允许你通过可脚本化的属性来指定悬停状态和行为。例如，复杂的导航按钮可以使用单个 SVG 文件创建，而通常这需要多个光栅文件。
  • 缩短开发时间：SVG 将传统 Web 工作流程的三个元素分开 - 内容（数据）、表示（图形）和应用程序逻辑（脚本）。对于光栅文件，如果对内容进行更改，则必须完全重新创建整个图形。
  • 可扩展的服务器解决方案：客户端和服务器都可以渲染 SVG 图形。由于“客户端”可以用于渲染图形，因此 SVG 可以减少服务器负载。客户端渲染可以通过允许用户“放大”SVG 图形来增强用户体验。此外，如果客户端的处理资源有限，例如 PDA 或手机，则可以使用服务器来渲染图形。无论以何种方式渲染文件，源内容都是相同的。
  • 易于更新：SVG 将设计与内容分开，允许轻松更新两者。

交互式图形

[编辑 | 编辑源代码]

SVG 允许你创建基于 Web 的应用程序、工具或用户界面。此外，你还可以包含脚本和编程语言，例如 JavaScript、Java 和 Visual Basic。任何 SVG 元素都可以用于修改或控制任何其他 SVG 或 HTML 元素。由于 SVG 是基于文本的，因此图形内的文本可以快速翻译成其他语言，从而简化了本地化工作。此外，如果与数据库有连接，SVG 允许图表和图形的钻取功能。这将导致

  • 改善最终用户体验：用户可以输入自己的数据、修改数据，甚至可以从两个或多个数据源生成新图形。
  • 在 SVG 中，文本就是文本：如前所述，SVG 将文本视为文本。这使得基于 SVG 的图形可被搜索引擎搜索。
  • SVG 可以创建 SVG：可以开发诸如在线帮助功能之类的企业应用程序。

个性化图形

[编辑 | 编辑源代码]

SVG 可以针对人们来克服文化、可访问性和审美问题，并且可以针对许多受众和人口统计群体进行定制。SVG 还可以使用从数据库或用户交互中收集的信息动态生成。总体目标是拥有一个源文件，该文件可以无缝地转换为各种情况。这将导致

  • 一个源，定制外观：SVG 使根据审美、文化和可访问性问题来更改颜色和其他属性成为可能。SVG 可以使用样式表来定制其在不同情况下的外观。
  • 国际化，本地化：SVG 支持 Unicode 字符，以便有效地以多种语言和方式显示文本 - 垂直、水平和双向。
  • 利用现有标准：SVG 与样式表无缝配合，以控制表示。层叠样式表 (CSS) 可用于典型的字体特征以及其他 SVG 图形元素。例如，你可以从外部样式表控制元素的笔触颜色、填充颜色和填充不透明度。

SVG 与 Macromedia Flash

[编辑 | 编辑源代码]

在过去的 10 年里，Macromedia 一直是网络矢量图形领域的领先力量。然而，显而易见的是，SVG 为 Flash 的许多功能提供了替代方案，并整合了许多其他功能。矢量图形元素的创建是 SVG 和 Flash 的基础结构。与 Flash 类似，SVG 还包括为每个元素创建基于时间的动画的功能，并允许通过 DOM、JavaScript 或 SVG 查看器支持的任何其他脚本语言来编写元素脚本。许多基本元素可供开发人员使用，包括用于创建圆形、矩形、直线、椭圆形、多边形和文本的元素。与 HTML 类似，元素使用级联样式表 (CSS2) 进行样式设置，使用 style 元素或通过 style 属性直接在特定图形元素上进行样式设置。样式属性也可以使用表示属性进行指定。对于适用于元素的每个 CSS 属性，也可以使用指定相同样式属性的 XML 属性。关于 Flash 或 SVG 哪个更适合 Web 开发存在持续的争论。两者都有优势，通常取决于具体情况。

Flash 优势

  • 如果您想制作一个类似 Flash 的网站，请使用 Flash - 使用 SVG 复制相同的效果很困难。
  • 如果您需要复杂的动画或复杂的遊戲，请使用 Flash (SVG 内置的 SMIL 动画引擎非常占用处理器资源)。
  • 如果您的用户不那么精通电脑，例如儿童网站或面向广泛受众的网站，请使用 Flash。
  • 如果声音很重要，请使用 Flash - SVG/SMIL 支持声音，但它非常基础。
  • 如果您更喜欢 WYSIWYG 而不是脚本，请使用 Flash。

SVG 优势

  • 它完全可编写脚本，使用 DOM1 接口和 JavaScript。这意味着您可以从一个空的 SVG 图像开始，并使用 JavaScript 构建它。
  • SVG 可以很容易地由 ASP、PHP、Perl 等创建，并从数据库中提取。
  • 它有一个内置的 ECMA 脚本 (JavaScript) 引擎，因此您不必为每个浏览器编写代码，也不需要学习 Flash 的 ActionScript。
  • SVG 是 XML，这意味着它可以被任何可以读取 XML 的东西读取。Flash 可以使用 XML，但需要在使用之前进行转换。
  • 这也允许 SVG 通过 XSLT 样式表/解析器进行转换。
  • SVG 支持标准的 CSS1 样式表。
  • SVG 中使用的文本仍然可以选择和搜索。
  • 您只需要一个文本编辑器来创建 SVG，而不是购买 Flash。
  • SVG 是一个 Web 真实标准（不仅仅是“事实上的”），受各种不同程序的支持，其中一些是自由软件（因此可用于大多数免费计算机操作系统）。

为什么要使用 SVG？

[编辑 | 编辑源代码]

SVG 正在通过 W3C 及其成员的努力而兴起。它是开源的，因此不需要使用专有语言和开发工具，如 Macromedia Flash。由于它是基于 XML 的，因此开发人员对其看起来很熟悉，并允许他们使用现有的技能。SVG 基于文本，可以通过利用他人的工作（或代码）来学习，这大大减少了整体学习曲线。此外，由于 SVG 可以整合 JavaScript、DOM 和其他技术，熟悉这些语言的开发人员可以以相同的方式创建图形。SVG 还具有很高的兼容性，因为它与 HTML、GIF、JPEG、PNG、SMIL、ASP、JSP 和 JavaScript 兼容。最后，在 SVG 中创建的图形是可缩放的，并且不会跨平台和设备导致质量下降。因此，SVG 可用于 Web、印刷以及便携式设备，同时保持完整质量。

SVG 查看器

[编辑 | 编辑源代码]

Adobe SVG 查看器

[编辑 | 编辑源代码]

Adobe SVG 查看器可作为可下载的插件使用，允许在 Windows、Linux 和 Mac 操作系统的所有主流浏览器中查看 SVG，包括 Internet Explorer（版本 4.x、5.x、6.x）、Netscape（版本 4.x、6.x）和 Opera 在 Internet Explorer 和 Netscape 中。

Adobe SVG 查看器是部署最广泛的 SVG 查看器，它支持几乎所有 SVG 规范，包括对 SVG DOM、动画和脚本的支持。

Adobe SVG 查看器的功能 点击鼠标右键（在 Mac 上按 CTRL 键 + 鼠标点击）您的 SVG 图像以获取上下文菜单。上下文菜单为您提供了几个选项，所有这些选项都可以通过菜单本身或“热键”访问。

表 1：Adobe SVG 查看器的功能

功能 描述
放大

使用 CTRL 键（或 Apple 键），您可以拖动鼠标以制作一个矩形，该矩形指定您将缩放到的区域的横截面。

缩小

此操作与“放大”类似，只是您同时按下 CTRL 键和 SHIFT 键。

平移

按下 ALT 键，并在出现手形图标时移动鼠标光标。

复制 SVG

SVG 查看器的“复制 SVG”选项的目的是让用户能够将图形和/或源代码剪切粘贴到其他应用程序中。使用“复制 SVG”，开发人员可以复制源代码，该代码可以粘贴到任何文本编辑器中。此外，在选择“复制 SVG”并切换到桌面应用程序（如 MS Office）后，用户可以选择使用编辑/粘贴选项来生成 SVG DOM 树代码的快照（其中包含动态 SVG 图像的当前结构），或者用户可以使用编辑/特殊粘贴选项将 SVG 转换为位图图像。这些选项可能会随着其他应用程序对 SVG 支持的改进而改进和增加。

查看源代码

SVG 查看器的“查看源代码”菜单选项允许将压缩和未压缩的 SVG 源代码立即以文本形式显示在新的浏览器窗口中。这对设计师和开发人员来说是一个非常方便的选择。

将 SVG 保存为...

此选项允许您通过弹出“将 SVG 保存为”窗体快速将 SVG 内容保存到本地计算机，该窗体允许您输入文件名称和位置。在 Adobe SVG 查看器版本 3 中，在“保存为”对话框中添加了将 SVG 保存为 GZip 压缩的 SVG（.svgz）选项。

SMIL

[编辑 | 编辑源代码]

同步多媒体集成语言 (SMIL，发音为“微笑”) 使得交互式视听演示的简单创作成为可能。SMIL 通常用于“富媒体”/多媒体演示，这些演示将流式音频和视频与图像、文本或任何其他媒体类型集成在一起。SMIL 是一种易于学习的类似 HTML 的语言，许多 SMIL 演示都是使用简单的文本编辑器编写的。SMIL 可以与 XML 一起使用，以便在查看 SVG 时启用视频和声音。

注意 Microsoft Windows Mozilla 用户！

[编辑 | 编辑源代码]

Seamonkey 和 Mozilla Firefox 浏览器本机支持 SVG。如果需要，Adobe SVG 查看器插件将与 Mozilla Firefox 或 Seamonkey 浏览器一起使用。 [1] 基于 Webkit 的浏览器也有一些 SVG 本机支持。

原生 SVG (Firefox)

[编辑 | 编辑源代码]

Mozilla SVG 实现是原生 SVG 实现。这与 Adobe 查看器之类的插件 SVG 查看器相反（目前是使用最广泛的 SVG 查看器）。

这带来的某些影响是

  • Mozilla 可以处理包含 SVG、MathML、XHTML、XUL 等的文档，这些文档都混合在同一个“复合”文档中。这通过使用 XML 命名空间成为可能。
  • Mozilla “知道” SVG 内容。它可以通过 SVG DOM（与 XML DOM 兼容）进行访问，并由 Mozilla 的脚本引擎进行操作。
  • 其他 Mozilla 技术可以与 SVG 一起使用。XBL 与 SVG 的组合特别有趣。它可用于创建图形小部件（我想知道我们何时才能看到第一个基于 SVG 的 chrome！）或扩展 Mozilla 以识别其他专用语言，例如 CML（化学标记语言）。这些更高级的使用模式示例可以在 http://croczilla.com/svg/ 上找到。

rsvg-view

[编辑 | 编辑源代码]

rsvg-view 程序是 librsvg 包的一部分[1]。它可以用作默认的 svg 打开程序。它可以调整 svg 的大小并将它们导出为 png，这通常是人们需要对 svg 文件做的唯一操作。[2]

示例：rsvg-view-3 name.svg

创建 SVG 文件

[编辑 | 编辑源代码]

如何操作

[编辑 | 编辑源代码]

可以使用 4 组程序

  • 通用文本编辑器，如 Notepad ++（具有 XML 语法高亮显示）
  • 专门的 svg 编辑器
  • 可以导出 svg 的程序（如 gnuplot、Maxima CAS）
  • 通过串联字符串直接创建 svg 文件的专用程序

SVG 编辑器

[edit | edit source]

正如您在前面的路径定义示例中看到的，SVG 文件以极其简化的格式编写，以帮助最小化文件大小。但是，根据图像的复杂性，它们可能非常难以编写。有一些 SVG 编辑器工具可以帮助简化此任务。其中一些工具是

表 3：SVG 编辑器

SVG 编辑器 平台 可用性 描述
Adobe Illustrator 10.0 Mac OS 9.1/9.2/10.1, Win98/ME, Win2000/XP 商业产品

Illustrator 版本 9.01 具有 SVG 导出功能。最近发布的版本 10 添加了 SVG 导入功能并增强了 SVG 导出功能，包括数据驱动图形。

Sodipodi Linux / UNIX 开源（免费，含源代码）

快速矢量图形 WYSIWYG 编辑器。

Adobe Livemotion 2 Win98/ME, Win2000/XP 商业产品

Adobe Livemotion 是类似于 Macromedia Flash 的创作工具。它在早期版本中具有 SVG 导出功能，但在版本 2 中，其支持被撤回。看来即使 Adobe 对 SVG 的支持也令人怀疑。

Beez Win95/98/ME, WinNT/2000/XP 免费下载

Beez 是一个 WYSIWYG 编辑器，用于创建一个由多个贝塞尔曲线组成的单个动画 SVG 路径，然后可以在 SVG 文件中使用。对于手工编码人员来说，这是一个不错的实用程序。这是一个开源项目，在 sourceforge 上，并用 Delphi 编写。

Corel Draw! Win95/98/ME, WinNT/2000, Mac OS X 版本 11 商业产品 具有 SVG 导入和导出功能
Gill

（Gnome Illustration Application）

 Linux / UNIX（带 Gnome） 免费，含源代码

带 SVG 导入和导出的绘图程序；具有完整的 DOM；不断更新，可以将 SVG 嵌入其他 Gnome 程序（如 Gnumeric 电子表格）。有关最新状态，请参阅 CVS 变更日志

IMS Web

Dwarf

 Win95/98/ME, WinNT/2000/XP 免费下载 WYSIWYG 编辑器，导出到 HTML 或 SVG
IMS Web

引擎

 Win95/98/ME, WinNT/2000/XP 可下载 14 天试用版

IMS Web Engine 是一个交互式动画编辑器和 Web Top 发布程序，用于创建富内容的交互式动态 HTML 和 SVG

Inkscape Linux、Windows、Mac 免费，含源代码 WYSIWYG 编辑器，但允许直接编辑 XML。目前还没有动画。

自己的程序

[edit | edit source]
C
[edit | edit source]

以下是 C 中的示例

/*

c console program based on :
cpp code by Claudio Rocchini

http://commons.wikimedia.org/wiki/File:Poincare_halfplane_eptagonal_hb.svg


http://validator.w3.org/
The uploaded document "circle.svg" was successfully checked as SVG 1.1.
This means that the resource in question identified itself as "SVG 1.1"
and that we successfully performed a formal validation using an SGML, HTML5 and/or XML
Parser(s) (depending on the markup language used).

*/

#include <stdio.h>
#include <stdlib.h>
#include <math.h>


const double PI = 3.1415926535897932384626433832795;

const int  iXmax = 1000,
           iYmax = 1000,
           radius=100,
           cx=200,
           cy=200;


const char *black="#FFFFFF", /* hexadecimal number as a string for svg color*/
           *white="#000000";

 FILE * fp;
 char *filename="circle.svg";
 char *comment = "<!-- sample comment in SVG file  \n can be multi-line -->";


void draw_circle(FILE * FileP,int radius,int cx,int cy)
{
    fprintf(FileP,"<circle cx=\"%d\" cy=\"%d\" r=\"%d\" style=\"stroke:%s; stroke-width:2; fill:%s\"/>\n",
    cx,cy,radius,white,black);
}


int main(){

        // setup
        fp = fopen(filename,"w");
	fprintf(fp,
		    "<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?>\n"
		    "%s \n "
           "<!DOCTYPE svg PUBLIC \"-//W3C//DTD SVG 1.1//EN\" \n"
           "\"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd\">\n"
           "<svg width=\"20cm\" height=\"20cm\" viewBox=\"0 0 %d %d \"\n"
           " xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\">\n",
           comment,iXmax,iYmax);

        // draw
	draw_circle(fp,radius,cx,cy);

        // end
        fprintf(fp,"</svg>\n");
	fclose(fp);
	printf(" file %s saved \n",filename );

	return 0;
}
Haskell
[edit | edit source]

Haskell 代码：Claude Heiland-Allen 编写的带有 SVG 输出的 Haskell 中的 lavaurs 算法

JavaScript
[edit | edit source]
带有 JavaScript 代码的 SVG 图像
Matlab
[edit | edit source]

基于 Guillaume JACQUENOT 的代码：[3]

filename = [filename '.svg'];
fid = fopen(filename,'w');
fprintf(fid,'<?xml version="1.0" standalone="no"?>\n');
fprintf(fid,'"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">\n');
fprintf(fid,'<svg width="620" height="620" version="1.1"\n');
fprintf(fid,'xmlns="http://www.w3.org/2000/svg">\n');
fprintf(fid,'<circle cx="100" cy="100" r="10" stroke="black" stroke-width="1" fill="none"/>\n');
fprintf(fid,'</svg>\n');
fclose(fid);
Lisp
[edit | edit source]

可以使用 cl-svg 库或您自己的过程。

Maxima
[edit | edit source]
BeginSVG(file_name,cm_width,cm_height,i_width,i_height):=
block(
destination : openw (file_name),
printf(destination, "<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?>~%"),
printf(destination,"<svg width=\"~d cm\" height=\"~d cm\" viewBox=\"0 0 ~d ~d\" xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\">~%",
cm_width,cm_height,i_width,i_height),
return(destination)
);
CircleSVG(dest,center_x,center_y,_radius):=printf(dest,"<circle cx=\"~d\" cy=\"~d\" r=\"~d\" fill=\"white\" stroke=\"black\" stroke-width=\"2\"/>~%",
center_x,center_y,_radius);
CloseSVG(destination):=
(
printf(destination,"</svg>~%"),
close (destination)
);
/* ---------------------------------------------------- */
cmWidth:10;
cmHeight:10;
iWidth:800;
iHeight:600;
radius:200;
centerX:400;
centerY:300;
f_name:"b.svg";
/* ------------------------------------------------------*/
f:BeginSVG(f_name,cmWidth,cmHeight,iWidth,iHeight);
CircleSVG(f,centerX,centerY,radius);
CloseSVG(f);
Python
[edit | edit source]

可以使用准备好的库，或将 svg 代码包装在单引号中。

def svg_page():
 """ Function to write test code for a stub svg code page
 The raw code that uses double-quotes is captured by single quotes
 To become a python text string"""
 page='<?xml version="1.0"?>\n<svg xmlns="http://www.w3.org/2000/svg" top="0in" width="5.5in" height="2in">\n    <rect fill="blue" width="250" height="200"/>\n</svg>\n'
 return page

def write_page(page, title):
    """ Function to write the svg code to disk """
    filename = title + ".svg"
    f = open(filename, "w")
    f.write(page)

write_page (svg_page(), "My svgstub")
带有 python 代码的图像

入门

[edit | edit source]

由于基于 XML，SVG 遵循标准 XML 约定。每个 SVG 文件都包含在 <svg> 标签中作为其父元素。SVG 可以嵌入父文档或独立使用。例如，以下显示了一个独立的 SVG 文档

示例 1：创建 SVG 

<?xml version="1.0" standalone="no"?>
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
    ...
</svg>

第一行声明以下代码是 XML。请注意“standalone”属性。这表示此特定文件不包含足够的处理指令来单独运行。为了获得显示特定图像所需的必要功能，SVG 文件必须引用外部文档。

第二行提供了对文档类型定义 (DTD) 的引用。如第 7 章：XML 模式中所述，DTD 是定义 XML 实例文档中包含的数据的另一种方法。熟悉 HTML 的开发人员会注意到 DTD 声明类似于 HTML 文档中的声明，但它专门针对 SVG。有关 DTD 的更多信息，请访问：https://w3schools.org.cn/dtd/dtd_intro.asp

提示：许多 IDE（例如 NetBeans）没有在工具中内置 SVG“模板”。因此，在创建 SVG 文档时，使用简单的文本编辑器可能更容易。安装 SVG 查看器后，您应该能够使用任何浏览器打开和查看 SVG 文档。在创建 SVG 文档时，请记住

  • 将您的文档声明为 XML 文件
  • 确保您的 SVG 文档元素位于 <svg> 元素标签之间，包括 SVG 命名空间声明。
  • 将您的文件保存为 .svg 文件扩展名。
  • 不需要包含 DOCTYPE 语句，其中包含识别此为 SVG 文档的信息（因为 SVG 1.2 以后不再有这样的信息）。[4][5][6]

第二行上的 <svg> 元素定义了 SVG 文档，并且可以指定（除其他事项外）用户坐标系和各种 CSS 单位规范。就像 XHTML 文档一样，文档元素必须包含一个命名空间声明，以声明该元素是相关命名空间的成员（在本例中，是 SVG 命名空间）。在 <svg> 元素中，可以有三种类型的绘图元素：文本、形状和路径。

文本

[edit | edit source]

以下是一个文本元素的示例：示例 2：在 SVG 中使用文本

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="5.5in" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" height="0.5in">
   <text y="15" fill="red">This is SVG.</text>
</svg>

<svg> 元素指定：1）文本元素中的空白将被保留，2）SVG 文档的宽度和高度——对于指定打印输出大小尤其重要。在此示例中，文本位于 5.5 英寸宽、0.5 英寸高的图像区域中。第 5 行的“y”属性声明文本元素的基线距离 SVG 文档顶部 15 像素。文本元素上省略的“x”属性意味着 x 坐标为 0。

由于 SVG 文档使用 W3C DTD，因此您可以使用 W3C 验证器来验证您的文档。请注意，“style”属性用于描述文本元素的呈现方式。文本也可以通过使用呈现属性 fill="red" 等效地设置为红色。

形状

[edit | edit source]

SVG 包含以下基本形状元素

  • 矩形
  • 圆形
  • 椭圆形
  • 线条
  • 折线
  • 多边形

这些基本形状，以及本章后面介绍的“路径”，构成了 SVG 的图形形状。在本 SVG 简介中，我们将只介绍其中的一些形状。

矩形

[edit | edit source]

<rect> 元素定义了一个矩形，该矩形与当前用户坐标系对齐，当前用户坐标系是当前活动的坐标系，用于定义如何定位和计算当前画布上的坐标和长度。可以通过设置 rx 和 ry 属性的值来创建圆角矩形。

以下示例生成一个蓝色矩形，其左上角与图像区域的左上角对齐。这使用了 x 和 y 属性的默认值“0”。

示例 3：在 SVG 中创建矩形 

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" top="0in" width="5.5in" height="2in">
    <rect fill="blue" width="250" height="200"/>
</svg>

它将生成以下结果

Example of SVG use of rectangle shape

圆形

[edit | edit source]

圆形元素需要三个属性：cx、cy 和 r。'cx' 和 'cy' 值指定圆心的位置，而 'r' 值指定半径。如果未指定 'cx' 和 'cy' 属性，则圆心的默认位置为 (0, 0)。如果 'r' 属性设置为 0，则圆形将不会出现。与 'cx' 和 'cy' 不同，'r' 属性不是可选的，必须指定。此外，关键字 stroke 会创建图像的轮廓。宽度和颜色都可以更改。

示例 4：在 SVG 中创建圆形 

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" width="350" height="300">
    <circle cx="100" cy="50" r="40" stroke="darkslategrey" stroke-width="2" fill="grey"/>
</svg>

它将生成以下结果

Example of SVG use of circle shape

多边形

[编辑 | 编辑源代码]

多边形是由三个或更多边组成的任何几何形状。'points' 属性描述了指定多边形角点的 (x,y) 坐标。对于这个特定的例子，有三个点，表示将产生一个三角形。

示例 5：在 SVG 中创建多边形 

<?xml version="1.0" standalone="no"?>
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
   <polygon points="220,100 300,210 170,250" style="fill:#blue;stroke:red;stroke-width:2"/>
</svg>

它将生成以下结果

路径

[编辑 | 编辑源代码]

路径用于在 SVG 中绘制你自己的形状，并使用以下数据属性描述。

表 2：SVG 路径

属性 命令 参数 功能 描述
移动到 M x y 设置新的当前点 在给定的 (x,y) 坐标处开始新的子路径。
线段到 L x y 绘制一条直线

从当前点绘制一条线到给定的 (x,y) 坐标，该坐标成为新的当前点。

水平线段到 H x 绘制一条水平线

从当前点 (cpx, cpy) 到 (x, cpy) 绘制一条水平线。

垂直线段到 V y 绘制一条垂直线

从当前点 (cpx, cpy) 到 (cpx, y) 绘制一条垂直线。

曲线到 C x1 y1 x2 y2 x y 使用三次贝塞尔曲线绘制曲线

从当前点到 (x,y) 绘制三次贝塞尔曲线，使用 (x1,y1) 作为曲线的起始控制点，使用 (x2,y2) 作为曲线的结束控制点。

平滑曲线到 S x2 y2 x y 使用三次贝塞尔曲线绘制简写/平滑曲线

从当前点到 (x,y) 绘制三次贝塞尔曲线。第一个控制点被假定为相对于当前点，是先前命令的第二个控制点的反射。(x2,y2) 是第二个控制点（即曲线末端的控制点）

二次贝塞尔曲线到 Q x1 y1 x y 绘制二次贝塞尔曲线

从当前点到 (x,y) 绘制二次贝塞尔曲线，使用 (x1,y1) 作为控制点。

平滑二次贝塞尔曲线到 T x y 绘制简写/平滑二次贝塞尔曲线

从当前点到 (x,y) 绘制二次贝塞尔曲线。

椭圆弧 A rx ry x-轴旋转 大弧标志 扫描标志 x y 绘制椭圆或圆弧

从当前点到 (x, y) 绘制椭圆弧。椭圆的大小和方向由两个半径 (rx, ry) 和一个 x 轴旋转定义，表示椭圆作为一个整体相对于当前坐标系的旋转方式。椭圆的中心 (cx, cy) 是自动计算的，以满足其他参数施加的约束。large-arc-flag 和 sweep-flag 有助于自动计算，并帮助确定弧线的绘制方式。

闭合路径 Z (无)

通过绘制一条线到最后一个移动到点来关闭当前路径

通过从当前点绘制一条直线到当前子路径的初始点来关闭当前子路径。

以下示例生成一个三角形的形状。“M”表示“移动到”，用于设置第一个点。“L”表示“线段到”，用于从“M”绘制一条线到“L”坐标。“Z”表示“闭合路径”，它从最后设置的 L 坐标绘制一条线回到 M 起始点。

示例 6：在 SVG 中创建路径 

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" width="5.5in" height="2in">
    <path d="M 50 10 L 350 10 L 200 120 z"/>
</svg>

它产生以下结果

Example of SVG use of paths

验证

[编辑 | 编辑源代码]

创建文件后，使用 W3C 验证器[7] 检查其代码。

优化

[编辑 | 编辑源代码]

即使没有错误的代码也可以改进。例如，对元素进行分组可以使代码更短。

在 HTML 中包含 SVG

[编辑 | 编辑源代码]

有三种方法可以在 HTML 文档中包含 SVG。基本上，SVG 文档首先作为独立文件创建。然后，使用以下命令之一在 HTML 文档中引用它。

表 4：在 HTML 中包含 SVG

命令 优点 缺点
<embed>
  1. 几乎在所有浏览器中都受支持
  2. 允许 html2svg 和 svg2html 脚本
  3. Adobe 建议在其 SVG 查看器中使用
  1. 在任何 HTML 规范中都没有明确的标准化
<object>
  1. HTML4 及更高版本标准
  2. 在更新的浏览器版本中受支持
  1. 适用于更新的浏览器，但不支持 html2svg 和 svg2html 脚本
<iframe>
  1. 适用于大多数浏览器，但没有文档记录
  1. 在没有特定样式的情况下生成类似窗口的边框

嵌入

[编辑 | 编辑源代码]

语法如下：**示例 7：使用关键字嵌入将 SVG 嵌入 HTML**

<embed src="canvas.svg" width="350" height="176" type="image/svg+xml" name="emap">

可以将一个额外的属性“pluginspage”设置为插件可下载的 URL

pluginspage="http://www.adobe.com/svg/viewer/install/main.html"

对象

[编辑 | 编辑源代码]

语法如下，符合 HTML 4 Strict 规范：**示例 8：使用关键字 object 将 SVG 嵌入 HTML**

<object type="image/svg+xml" name="omap" data="canvas_norelief.svg" width="350" height="176"></object>

在起始和结束 <object> 标记之间，可以添加针对不支持 object 的浏览器的信息

<object ...>You should update your browser</object>

不幸的是，一些浏览器（如 Netscape Navigator 4）如果 type 属性被设置为除 text/html 之外的其他内容，则不会显示此备用内容。

内联框架

[编辑 | 编辑源代码]

语法如下，符合 HTML 4 Transitional 规范：**示例 9：使用关键字 iframe 将 SVG 嵌入 HTML**

<iframe src="canvas_norelief.svg" width="350" height="176" name="imap"></iframe>

在起始和结束 <iframe> 标记之间，可以添加针对不支持 iframe 的浏览器的信息

<iframe ...>You should update your browser</iframe>

创建 3D SVG 图像

[编辑 | 编辑源代码]

由乔治亚大学互联网技术硕士课程 2007 届学生查尔斯·冈蒂撰写

有时我们可能希望以三维方式查看 SVG 图像。为此，我们需要更改图形的视点。到目前为止，我们已经创建了二维图形，如圆形和正方形。它们存在于简单的 x，y 平面中。如果我们想以三维方式查看某物，我们需要添加 z 坐标平面。z 平面已经存在，但我们正对着它看，所以如果 z 上的数据发生了变化，观看者看起来没有任何不同。我们需要在数据文件中添加另一个参数，即 z 参数。

<?xml version="1.0"?>
  <data>
  <subject x_axis="90" y_axis="118" z_axis="0" color="red" />
  <subject x_axis="113" y_axis="45" z_axis="75" color="purple" />
  <subject x_axis="-30" y_axis="-59" z_axis="110" color="blue" />
  <subject x_axis="60" y_axis="-50" z_axis="-25" color="yellow" />
</data>

拥有数据后，我们将使用 XSLT 创建 SVG 文件。SVG 样式表与其他样式表相同，但我们需要确保在转换期间创建 SVG 文件。我们在声明中使用此行调用 SVG 命名空间

 xmlns="http://www.w3.org/2000/svg

我们需要对先前示例进行的另一个更改是更改 (0, 0) 的原点。我们在本例中更改原点是因为我们的一些数据为负数。默认原点位于 SVG 图形的左上角。负值不会显示，因为与传统的坐标平面不同，负值位于正值之上。要移动原点，我们只需在样式表中添加一行代码。在讨论该行代码之前，让我们先看看 g 元素。容器元素 g 用于对相关的图形元素进行分组。在这里，我们将使用 g 将图形元素分组在一起，然后我们可以应用变换。以下是我们声明 g 并将原点更改为向右 300 像素，向下 300 像素的点的示例

 <g transform="translate(300,300)">graphical elements</g>

SVG 变换非常简单，直到要改变视角。SVG 具有在二维空间中旋转和倾斜图像的功能，但无法在三维空间中旋转坐标系。为此，我们需要使用一些数学和 Java 代码。在三维空间中旋转时，需要进行两次旋转，一次绕 Y 轴，另一次绕 X 轴。第一次旋转将绕 Y 轴进行，公式如下

Az 是 Z 轴旋转的角度

Y 不会改变，因为我们绕 Y 轴旋转

第二次旋转将绕 X 轴进行。请记住，已经进行了一次旋转，因此我们不是使用 X、Y 和 Z 值，而是需要使用上次旋转中找到的 X'、Y' 和 Z'（X-prime、Y-prime 和 Z-prime）。公式如下

Z" = Z'*cos(Ay) – Y'*sin(Ay) Ay 是 Y 轴旋转的角度

Y" = Z'*sin(Ay) + Y'*cos(Ay)

X" = X' 请记住我们绕 X 轴旋转，所以这不会改变

还记得三角学课上的老式缩略语 **SOH CAH TOA** 吗？这意味着

Sin = 对边 / 斜边 Cos = 邻边 / 斜边 Tan = 对边 / 邻边

我们使用这些函数来找到我们旋转所需的角。根据前面的两个公式，我们可以对 Az 和 Ay 做出以下陈述

tan(Az) = Xv/Zv

sin(Ay) = Yv/sqrt(Xv2 + Yv2 + Zv2)

由于要执行如此多的步骤来进行旋转，我们应该将所有这些信息放入 Java 类中，然后在样式表中调用该类。Java 类应该具有用于执行所有计算的方法，以确定旋转后新的数据点将位于何处。创建该 Java 类超出了本节的范围，但在这个例子中，我将它称为 ViewCalc.class。

现在我们可以旋转图像了，我们需要将该功能集成到变换中。我们将使用参数在变换期间将视角传递到样式表中。默认视角为 (0, 0, 0)，并在样式表中指定如下

Exhibit 10: 使用 SVG 的 3D 图像 

     <?xml version="1.0" ?>
     <xsl:stylesheet version="1.0"
           xmlns="http://www.w3.org/2000/svg"
           xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
        <!-- default viewpoint in case they are not specified  -->
        <!-- from the command line -->
        <xsl:param name="viewpoint_x">0</xsl:param>
        <xsl:param name="viewpoint_y">0</xsl:param>
        <xsl:param name="viewpoint_z">0</xsl:param>
     <xsl:template match="/">
      …

现在需要将 Java 添加到样式表中，以便处理器知道要调用哪些方法。在命名空间声明中添加了两行

     <?xml version="1.0" ?>
     <xsl:stylesheet version="1.0"
         xmlns="http://www.w3.org/2000/svg"
         xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
         <b>xmlns:java="ViewCalc"
         exclude-result-prefixes="java"</b>>

注意 exclude-result-prefixes="java" 行。添加该行是为了使样式表中带有 java: 前缀的内容得到处理，而不是输出。确保 ViewCalc 类在 CLASSPATH 中，否则变换将无法运行。

最后一步是从样式表中调用 ViewCalc 类中的方法。例如

   <xsl:template match="square">
        <xsl:for-each select=".">
         <xsl:variable name="locationx" select="@x_axis"/>
         <xsl:variable name="locationy" select="@y_axis"/>
         <xsl:variable name="locationz" select="@z_axis"/>
        <xsl:variable name="thisx" select="java:locationX($locationx,$locationy,
          $locationz, $viewpoint_x, $viewpoint_y,
          $viewpoint_z)"/>
        <xsl:variable name="thisy" select="java:locationY($locationx,
          $locationy, $locationz, $viewpoint_x, $viewpoint_y,
          $viewpoint_z)"/>
       </xsl:for-each>

最后，我们传递新的参数并运行 XSL 变换，以创建具有不同视角的 SVG 文件。

总结

[edit | edit source]
SVG 代表可缩放矢量图形。这意味着它创建的图像在移动或更改大小后不会丢失图像质量。与 Flash 在功能上类似，两者都没有比另一个更好，但是它们在特定情况下更出色（前面列出了一些）。可以通过 SVG 创建 2D 和 3D 图像。受 W3C 支持。

演示

[edit | edit source]

下表提供了一些 SVG 文档的示例，这些文档展示了不同程度的功能和复杂性

表格 5: SVG 演示

功能 URL 浏览器兼容性
基础 http://www.carto.net/papers/svg/samples/canvas.svg 所有
填充 http://www.carto.net/papers/svg/samples/fill.svg 所有
HTML、JS、Java Servlet http://www.adobe.com/svg/viewer/install/main.html – 然后前往 Inspiration，Fluent Solutions/Adobe Theater 演示 在 Mozilla 中未提供完整的功能
HTML、JS、DOM http://www.adobe.com/svg/viewer/install/main.html – 然后前往 Inspiration，图表和图形演示 在 Mozilla 中未提供完整的功能
PHP、MySQL http://www.carto.net/papers/svg/samples/mysql_svg_php.shtml 所有
HTML5、ANGULARJS、PostGreSQL https://vectoriole.com/ – 然后使用任何一个演示登录 所有

基础 演示展示了缩放、平移和抗锯齿（高质量）的效果。

填充 演示展示了颜色和透明度的效果。黑色圆圈是可以拖动的。只需单击并拖动方块内的圆圈，即可查看更改。

HTML、JS、Java Servlet 演示描述了一个交互式的、数据库驱动的座位图，其中椅子代表可供演出使用的座位。如果用户将鼠标指针移到某个座位上，它会改变颜色，并且会显示座位详细信息（区域、排和座位号）以及价格。在应用程序的客户端，SVG 呈现座位图并与 JavaScript 协同工作以提供用户交互性。SVG 应用程序与服务器端数据库集成，该数据库维护票证和事件可用性信息并处理票证购买。Java Servlet 处理表单提交并将座位购买更新到数据库。

HTML、JS、DOM 演示展示了 SVG 如何管理和显示数据，动态地从数据生成 SVG 代码。虽然这种应用程序可以用多种不同的方式编写，但 SVG 提供了客户端处理以维护和显示数据，从而减少了服务器的负载以及整体延迟。使用 DOM，开发人员可以构建文档、浏览其结构，并添加、修改或删除元素和内容。

PHP、MySQL 演示展示了使用数据库驱动的 SVG 生成，该生成利用了 MySQL。它随机生成欧洲国家的地图。每次重新加载页面时，您都会看到一个不同的国家。

HTML5、ANGULARJS、PostGreSQL 演示展示了如何创建一个 SVG，然后将可变数据集成到 SVG 中，并生成一个可变数据 PDF。

练习

[edit | edit source]
  1. 下载并安装 Adobe SVG Viewer。安装好 Adobe SVG Viewer 后，访问此页面测试安装是否成功：http://www.adobe.com/svg/viewer/install/svgtest.html
  2. 创建您自己的独立 SVG 文件，以生成包含矩形内圆圈的图像。
  3. 创建您自己的独立 SVG 文件。使用 3 个圆圈和 1 个路径元素创建一个黄色的笑脸，带有黑色的眼睛和黑色的嘴巴。使用文本元素，使消息“Have a nice day!”出现在笑脸下方。
    • 提示：因为 <path> 元素可能难以编写，以下是一个您可以使用的示例路径
    • <path d="M 100, 120 C 100,120 140, 140 180,120" style="fill:none;stroke:black;stroke-width:1"/>

参考文献

[edit | edit source]
  1. ↑ libsrsvg – 免费的开源 SVG 渲染库
  2. ↑ Barry Kauler 博客
  3. ↑ Guillaume JACQUENOT ł 编写的 2D 阿波罗尼垫片，包含四个相同的圆圈
  4. ↑ W3C SVG 1.1 推荐：SVG 命名空间、公用标识符和系统标识符，另请参阅 W3C SVG 2 编辑草案：SVG 命名空间和 DTD（2013 年 2 月 6 日）
  5. ↑ SVG 创作和 Web 服务器配置指南。Jonathan Watt 不要包含 DOCTYPE 声明
  6. ↑ Mozilla 关于 SVG: 命名空间速成, 入门
  7. ↑ validator w3.org
检索自 "https://wikibooks.cn/w/index.php?title=XML_-_Managing_Data_Exchange/SVG&oldid=3512934"
华夏公益教科书