SVG图像

块级和内联图像宏都内置了对可缩放矢量图形（SVGs）的支持。但是将SVG包含到网页中的方式不止一种，使用的策略会影响SVG的行为（或者说不规范的行为）。因此，这些宏提供了额外的选项来控制SVG的包含方式（即引用方式）。

SVG 尺寸

根元素`<svg>`上的viewBox属性是必需的。viewBox建立了SVG数据内的x和y值所放置的坐标空间。没有这个信息，转换器无法正确解释SVG数据并将其转换到画布上。

我们强烈建议不要在根`<svg>`元素上使用width和height属性。你会发现，只指定viewBox的SVG在文档中的工作效果最好。那是因为SVG数据本身可以无限缩放。通过指定一个明确的宽度和高度，你可能会限制SVG在文档中的大小或定位方式。最好是在图像宏上指定宽度（或类似的属性，如pdfwidth），或者使用CSS来设置。

你特别希望避免使用百分比宽度，例如 width="100%"。根据SVG规范，这意味着使用所有可用空间，但不改变长宽比。结果，你可能会在页面导向型媒介（如PDF）中的SVG上下出现很大的空隙。如果你确实指定了宽度和高度，至少确保这些值是固定的，并且它们遵守数据的长宽比。

SVG图像的选项

当图片目标是一个SVG时，宏上的`options`属性（通常缩写为`opts`）接受以下其中一个值来控制如何引用SVG：

none (default)
交互式
inline

下表展示了这些选项的影响。

Table 1. SVG图像选项值的演示
image::sample.svg[Static,300]
	Observe that the SVG does not respond to the hover event.
image::sample.svg[Interactive,300,opts=interactive]
	Observe that the color changes when hovering over the SVG.
image::sample.svg[Embedded,300,opts=inline]

这些选项值的工作原理以及各自应当使用的情况将在下面进行描述：

Table 2. 选项值控制如何在HTML输出中引用SVG图像。
选项	使用的HTML元素	效果	何时使用
none (默认)	`<img>`	图像被栅格化	静态图像，无交互性，无自定义字体
`interactive`	`<object>`	作为活动的、可交互的对象嵌入图像	用于CSS动画、脚本、网络字体，或者当你想指定一个后备图像时
`inline`	`<svg>`	SVG直接嵌入到HTML本身中	用于CSS动画、脚本、网络字体，当你需要搜索引擎搜索SVG内容时允许在主DOM中通过JavaScript访问SVG内容或从主DOM继承样式

当使用`interactive`选项时，您可以使用`fallback`属性指定一个回退图像。如果浏览器不支持`<object>`标签，则会使用该回退图像。如果回退属性的值是一个相对路径，它将以`imagesdir`文档属性的值为前缀。

当使用`inline`或`interactive`选项时，必须在根`<svg>`元素上定义`viewBox`属性，以便正确进行缩放。

当在AsciiDoc中使用`inline`选项时，如果你在image宏上指定了一个宽度或高度，那么`<svg>`元素上的`width`、height`和`style`属性将被移除。此外，当使用`inline`时，主SVG元素（例如，<svg>`）不能有命名空间。

如果使用`interactive`选项，您必须使用XML样式表声明，链接到在SVG文件中声明字体的CSS。

如果您正在使用`inline`或`interactive`选项插入SVG，我们强烈建议您使用类似https://github.com/svg/svgo[svgo^]或https://petercollingridge.appspot.com/svg-editor[SVG Editor^]这样的工具来优化您的SVG。

在你使用SVG的过程中，你将变得更加习惯做出根据具体情况选择哪种方法的决定。只有当你第一次遇到这样的选择时，你会感到困惑。要了解更多关于在网络上使用SVG的信息，请查阅在线书籍[SVG on the Web: A Practical Guide^{]（https://svgontheweb.com/），以及[这些关于SVG的文章}]（https://www.sarasoueidan.com/tags/svg/）。