跳转到内容

XML - 数据交换管理/SVG

来自维基教科书，开放世界中的开放书籍
< 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

[编辑 | 编辑源代码]

过去十年，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？

[edit | edit source]

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

SVG 浏览器

[edit | edit source]

Adobe SVG 浏览器

[edit | edit source]

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

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.0 版本中，在“另存为”对话框中添加了将文件保存为 GZip 压缩的 SVG（.svgz）的选项。

SMIL

[edit | edit source]

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

注意使用 Microsoft Windows Mozilla 的用户！

[edit | edit source]

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

原生 SVG (Firefox)

[edit | edit source]

Mozilla SVG 实现是一个原生 SVG 实现。这与 Adobe 查看器等插件式 SVG 查看器相反（目前 Adobe 查看器是最流行的 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

[edit | edit source]

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

示例：rsvg-view-3 name.svg

创建 SVG 文件

[edit | edit source]

如何操作

[edit | edit source]

可以使用 4 组程序 

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

SVG 编辑器

[编辑 | 编辑源代码]

正如您从前面路径定义示例中看到的，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 开源（免费，带源代码）

快速矢量图形 WYSWIG 编辑器。

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

Engine

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

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

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

自己的程序

[编辑 | 编辑源代码]
C
[编辑 | 编辑源代码]

以下是用 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
[编辑 | 编辑源代码]

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

JavaScript
[编辑 | 编辑源代码]
带 JavaScript 代码的 SVG 图像
Matlab
[编辑 | 编辑源代码]

基于 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
[编辑 | 编辑源代码]

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

Maxima
[编辑 | 编辑源代码]
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
[编辑 | 编辑源代码]

可以使用预先准备的库，或者将 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 代码的图像

入门

[编辑 | 编辑源代码]

由于它基于 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> 元素中，可以有三种类型的绘图元素：文本、形状和路径。

文本

[编辑 | 编辑源代码]

以下是文本元素的示例：示例 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" 以相同的方式为文本赋予红色。

形状

[编辑 | 编辑源代码]

SVG 包含以下基本形状元素

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

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

矩形

[编辑 | 编辑源代码]

<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

圆形

[编辑 | 编辑源代码]

圆形元素需要三个属性：cx、cy 和 r。'cx' 和 'cy' 值指定圆心的位置，而 'r' 值指定半径。如果未指定 'cx' 和 'cy' 属性，则圆心点假定为 (0, 0)。如果 'r' 属性设置为零，则圆形将不会显示。与 '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 使用三次贝塞尔曲线绘制曲线

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

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

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

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

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

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

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

椭圆弧 A rx ry x-axis-rotation large-arc-flag sweep-flag 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：使用关键字 embed 将 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 ...>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 ...>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)，在样式表中指定如下

示例 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 创建二维和三维图像。由 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，Chart and Graph 演示 在 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 演示展示了利用 MySQL 进行数据库驱动的 SVG 生成的使用。它随机生成欧洲国家的路线图。每次重新加载页面时，您都会看到一个不同的国家。

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"/>

参考

[编辑 | 编辑源代码]
  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”
华夏公益教科书