从 Illustrator 保存带有周围空白的 SVG

假设您在 Adobe Illustrator 中有一个这样的图形

请注意，艺术作品没有接触画板的边缘。假设您想要保留周围的空白，并将其保存为 SVG 以在网络上使用。

不：保存为 Web 格式

THE CLAW！您将在此处看到周围的空白，但不幸的是，经典的“保存为 Web 格式”对话框根本不导出为 SVG，因此这不是一个真正的选项。

他们已经称此为“传统”功能，因此我预计它很快就会消失。

不：导出为

“导出为”功能支持 SVG，并且您可能会对输出感到非常满意。它经过了相当程度的优化，没有冗余代码，并且几乎可以立即在网络上使用。

但是……它会裁剪到艺术作品，没有更改此设置的选项，因此我们将丢失此处要保留的周围空白。

此处一个可能的解决方法是在艺术作品后面放置一个矩形，并带有我们需要的周围间距，但随后我们在输出中会得到一个矩形，这应该是不必要的。

不：资源导出

资源导出面板非常方便，但是导出会裁剪到艺术作品，并且无法更改。

是：导出到屏幕

保留空白的技巧是导出画板本身。您可以从“导出到屏幕”对话框中执行此操作。

然后，viewBox 将反映画板以及我们在艺术作品周围留出的空白。这就是我们的目标，所以我很高兴有办法做到这一点！

Jake Wilson

# 2017年8月18日

嗯……我非常确定，如果您只是执行“另存为”并选择“SVG”作为文件类型，它也会保留艺术板周围的所有空间……在我刚刚测试时，似乎就是这种情况。

Alex Berkowitz

# 2017年8月18日

我总是从 Illustrator 保存 SVG。我发现最简单的方法是简单地“另存为”，然后选择 SVG 作为类型。单击“保存”后，您将获得一个额外的对话框，允许您修改 SVG 设置，并且它会保留您的画板空间。您甚至可以单击 SVG 设置窗口底部的一个小按钮来查看 SVG 代码（我的代码在浏览器中以纯文本形式打开），这非常适合当您只想将代码复制/粘贴到另一个文件中而无需实际保存新的 SVG 文件时。

Chris Coyier

# 2017年8月18日

啊，是的！确实如此。我只是总是避免以这种方式保存 SVG，因为这是您获得所有冗余代码的方式。例如，以下内容

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->

如果您使用 SVGO 等优化软件，这些内容将被删除，但这并非始终是每个人 SVG 工作流程的一部分。

您还需要注意正确设置，例如，关闭“保留 Illustrator 编辑功能”，否则您将获得更多冗余代码，例如

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
    <!ENTITY ns_extend "http://ns.adobe.com/Extensibility/1.0/">
    <!ENTITY ns_ai "http://ns.adobe.com/AdobeIllustrator/10.0/">
    <!ENTITY ns_graphs "http://ns.adobe.com/Graphs/1.0/">
    <!ENTITY ns_vars "http://ns.adobe.com/Variables/1.0/">
    <!ENTITY ns_imrep "http://ns.adobe.com/ImageReplacement/1.0/">
    <!ENTITY ns_sfw "http://ns.adobe.com/SaveForWeb/1.0/">
    <!ENTITY ns_custom "http://ns.adobe.com/GenericCustomNamespace/1.0/">
    <!ENTITY ns_adobe_xpath "http://ns.adobe.com/XPath/1.0/">

我认为使用 Illustrator 提供的“导出”方法是最佳选择，然后以本机 Illustrator 格式保存原始图稿。

Olli

# 2017年8月18日

嗯，我喜欢 Inkscape。我从未想过这样的问题——它工作起来非常完美 :)

Dirk Schulze

# 2017年8月18日

您也可以使用“导出为…”导出画板。

选择文件 > 导出 > 导出为…后，将打开初始导出对话框。在这里，您可以选择“使用画板”，Illustrator 也会使用 viewBox 保留画板的间距。

Generator

评论永久链接# 2017年8月20日

这有效，但它（令人讨厌地）会在文件名后添加画板编号。

Vasilj Milosevic

# 2017年8月19日

另存为 > svg
或者创建一个与文档匹配的完全透明的框，然后导出；)

这是我的方法

无论如何，我编码时总是使用带 SVG 优化器的 gulp，因此无需手动清理垃圾 :)

此评论线程已关闭。如果您有重要信息需要分享，请联系我们。