从库提取 Web 优化的 SVG 文件

优质

小牛编辑

130浏览

2023-12-01

从库中提取 Web 优化的 SVG 文件，并自定义 SVG 文件的属性。

如果您已在 Creative Cloud 库中保存 Illustrator 或获得许可的 Adobe Stock 图像，则可以在您的 Dreamweaver 网页中将这些图像提取为 Web 优化的 SVG 文件。当您将图像从“库”面板拖动至您的网页中时，默认情况下这些图像将作为 SVG 文件插入。有关更多信息，请参阅重用在库中保存的图形。

如果您要自定义 SVG 文件的属性，则可以在位于以下位置的 options.json 文件中编辑首选项：

Windows：%appdata%\Adobe\Dreamweaver CC 2015\<locale>\Configuration\SVGOptions\
Mac：~/Library/Application Support/Adobe/Dreamweaver CC 2015/<locale>/Configuration/SVGOptions/

用于将 .ai 文件转换为 SVG 文件的 JSon 对象可包含以下属性：

属性名称	值	说明
trimToArtBounds	布尔值	SVG 将独立于 OMG 文档的尺寸覆盖图片边界。
useViewBox	布尔值	如果将 trimToArtBounds 和 useViewBox 设置为 true，则将不会转移文档的内容。而是修改根 SVG 元素的 viewBox 值以对内容进行切片和缩放操作来满足需求。
constrainToDocBounds	布尔值	按照文档边界剪切可见内容。
preserveAspectRatio	字符串	按 SVG 规范定义的长宽比。设置 preserveAspectRatio 将覆盖 svgWriter 的计算值。因此，建议不要设置此值。注意：对于 meet 或 xMidYMid meet，请使用等效字符串 xMidYMid 以减小文件大小。
styling	字符串	此属性是可选的，默认为 class： class：使用全局元素并利用 class 属性引用样式区块。 style：使用 style 属性来对元素应用样式属性。 attribute：使用 presentation 属性来对元素应用样式属性。
prefix	字符串	将添加到每个 ID 和类名称的前缀。这将允许每个 SVG 文档具有独一无二的命名方案。多个 SVG 文档可内联至一个 HTML 文档，只要提供的前缀是唯一的，便不会出现 ID 或类名称冲突。
cropRect	对象	具有 x、y、width 和 height 属性的矩形。x 和 y 是可选的。定义将 SVG 文档裁切为的矩形。如果文档尺寸小于裁切框，则创建内边距。
minify		在 SVG 输出中避免缩进、换行符和空格。使用最少的 ID。
idType	字符串	regular：创建 ID 的默认方法。在应用程序中可基于图层/对象名称优先选择。 minimal：独立于应用程序中用户定义的图层/对象名称创建尽可能最短的 ID。 unique：基于 rfc4122 创建采用 xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx 格式的 UUID。
precision	数字	浮点后的位数。该数字必须介于 0 到 10 之间，如果指定其他数字，则会进行调整。默认值为 3。
isResponsive	布尔值	如果设置为 true，则 SVG 文档将填充视口/图像区域（SVG 根上未设置 width 和 height 属性）。
carriageReturn	布尔值	默认情况下，svgWriter 使用行尾 LF。通过将 carriageReturn 设置为 true，行尾使用 CRLF。
indentation	字符串	将自定义字符串用作缩进。例如，使用制表符缩进。这种情况下默认值为 2 个空格。
fillFilter	布尔值	滤镜仅应用于元素的填充。笔触不会受到影响，并且笔触将在过滤的内容上面进行绘制。
documentUnits	字符串	mm \| cm \| pc \| in — 指定的文档单位将在根元素的 width 和 height 属性中使用。