第 2 章 在网页中使用 SVG

将 SVG 作为图像

• 在 <img> 元素内包含 SVG
• 在 CSS 中包含 SVG

将 SVG 作为应用程序

• 使用 <object> 元素嵌入外部文件，可以让不能直接显示 SVG 但是有 SVG 插件的老版本浏览器也能查看
• 使用 <embed> 元素，但没有 <object> 元素灵活

混合文档中的 SVG 标记

可以在一个文件内同时包含 SVG 代码与 HTML 或者 XML 标记。当应用 CSS 样式和使用脚本时，混合文档内的所有元素会被视为一个文档对象

SVG 中的 foreign object

混合内容的一种方式是在 SVG 内插入部分 HTML（或其他）内容。SVG 规范定义了一种在图像指定区域嵌入这种 foreign 内容的方式

• <foreignObject> 元素定义了一个矩形区域，浏览器应该在其中绘制子 XML 内容，内容类型通过子内容上的 xmlns 属性声明的 XML 命名空间来定义
• 矩形区域通过元素的 x、y、width、height 属性定义，方式类似于 <use> 或者 <image> 元素
• 矩形区域基于本地 SVG 坐标系统求值，因此受坐标系统变换和其他 SVG 效果影响。子文档通常渲染在矩形框内，其结果可以像其他 SVG 图像一样被操作

在 XHTML 或者 HTML5 中内联 SVG

即在页面上直接写入 SVG 元素

其他 XML 应用程序中的 SVG

如 XSL-FO 文件