跳转到内容

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 复制相同的效果很困难。
  • 如果您想要复杂的动画或复杂的遊戲（SVG 内置的 SMIL 动画引擎非常占用处理器资源），请使用 Flash。
  • 如果您的用户不是那么精通电脑，例如儿童网站或面向广泛受众的网站，请使用 Flash。
  • 如果声音很重要，请使用 Flash - SVG/SMIL 支持声音，但它非常基础。
  • 如果您喜欢 WYSIWYG 到脚本，请使用 Flash。

SVG 优势

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

为什么要使用 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 Viewer

[edit | edit source]

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

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

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

表 1：Adobe SVG Viewer 的功能

功能 描述
放大

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

缩小

这与“放大”的工作方式相同，只是您同时按下 CTRL-Key 和 SHIFT-Key。

平移

按下 ALT-Key 并移动鼠标光标，同时显示一个手形图标。

复制 SVG

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

查看源代码

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

将 SVG 保存为…

此选项允许通过弹出“将 SVG 保存为”表单快速将 SVG 内容保存到您的本地计算机，该表单让您选择输入文件的名稱和位置。在 Adobe SVG Viewer 版本 3 中，将“保存为 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 Viewer 插件可以与 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 编辑器

[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 开源（免费，附带源代码）

快速矢量图形所见即所得编辑器。

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

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

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

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

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

（Gnome 插图应用程序）

 Linux / UNIX（使用 Gnome） 免费，附带源代码

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

IMS Web

矮人

 Win95/98/ME，WinNT/2000/XP 免费下载 所见即所得编辑器，导出为 HTML 或 SVG
IMS Web

引擎

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

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

Inkscape Linux、Windows、Mac 免费，附带源代码 所见即所得编辑器，但允许直接编辑 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]

Haskel 代码：Claude Heiland-Allen 使用 Haskell 和 SVG 输出的 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。注意“独立”属性。这表示此特定文件不包含足够的处理指令来单独运行。为了获得显示特定图像所需的必要功能，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

圆形

[编辑 | 编辑源代码]

圆形元素需要三个属性：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 严格规范：图 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 之外的其他值，则不会显示此备用内容。

Iframe

[编辑 | 编辑源代码]

语法如下，符合 HTML 4 过渡规范：图 9：使用关键字 iframe 将 SVG 嵌入 HTML

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

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

<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-prime、y-prime 和 z-prime），而不是使用 x、y 和 z 值。公式将如下所示。

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 创建 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 – 然后转到灵感，流畅解决方案/Adobe 剧院演示 在 Mozilla 中不能提供完整的功能
HTML、JS、DOM http://www.adobe.com/svg/viewer/install/main.html – 然后转到灵感，图表和图形演示 在 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 个路径元素创建一个黄色的笑脸，带有黑色的眼睛和黑色的嘴巴。使用文本元素，使消息“祝您一天愉快！”出现在笑脸下方。
    • 提示：由于 <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. ↑ 验证器 w3.org
检索自 "https://wikibooks.cn/w/index.php?title=XML_-_Managing_Data_Exchange/SVG&oldid=3512934"
华夏公益教科书