更改Illustrator导出的SVG中的viewbox属性

38

我有一个带有viewBox =“-155.7 -99 510 510”的SVG文件。我相信这会将Mac OS X预览中的路径偏移-155.7 -99。当我在Illustrator中打开SVG时，路径完全没有偏移。我该如何导出此svg，例如：

  1. viewBox =“ 0 0 510 510”
  2. 并且所有路径都增加了-155.7 -99

我尝试更改画板的位置，但视图框的原点永远不会为0,0。

adobe-illustrator  svg 
— 用户名
source

Answers:

6

我对SVG做了一些研究，显然viewbox不是可以通过Illustrator导出的元素。viewbox元素仅与选择使用此元素或对其进行操作的某些程序兼容。可悲的是，Illustrator不是其中之一。

如果没有使用“保留Illustrator编辑功能”而从Illustrator保存SVG，则可以撤消该过程。无论您对SVG文件的数据进行的任何更改，都将在Illustrator中反映出来，但需要重新放置Artboard和Layers并调整其大小以创建一个伪视图框。

现在，您所要做的就是在Illustrator中进行设计工作，并使用所有其他代码在文件数据中偏移和定位视图框。您可以通过简单地更改画板的Width + Height / X + Y位置，然后更改对象的Size和Position属性来创建伪视图框。但是，除非它们发布具有可编辑视图框功能的Illustrator更新，否则永远不会有一个真正的viewbox属性。

在Illustrator中对SVG格式的一些阅读：Adobe Illustrator以SVG格式保存

— 心灵公园
source
1
Illustrator确实从Illustrator CC（v 17.x）起导出viewbox属性。
— 杰克·威尔逊
33

我已经多次遇到此问题，从Illustrator导出时，将SVG视图框可靠地重置为0、0的唯一有效方法是创建一个新的空白文档并将其复制并粘贴到其中。

未修改的默认画板的左上角将导出为视图框的点0、0。如果您需要艺术作品以精确的0、0开始，请使用智能参考线（cmd-u）或align设置为的窗口Align to Artboard。

您可以从右下角安全调整画板的大小，但是如果您移动左上角，事情就会开始出错。将画板的左上角移动或将SVG文件导入AI似乎会导致标尺，画板和某种只有Illustrator知道的不可见的秘密视点原点之间的怪异内部分离。

与大多数与Web或新兴技术有关的事物一样，AFAICT是Adobe对SVG的处理方式，是将一些粗略的东西放在一起，以便他们可以在新闻稿中夸耀它，然后让它有漏洞，未完成和不受欢迎，并假装它没有存在并像1998年一样进行下去。

— user56reinstatemonica8
source
1
使用Illustrator CC对我不起作用。我也尝试过将Artboard调整为图稿自定义尺寸。最终的SVG始终具有居中的视口。
— wprater 2013年
1
奇怪-绝对可以在CS6中使用。必须在CS6和CC之间进行了更改-尽管看起来有些奇怪。
— user56reinstatemonica8 2013年
1
@ user568458这是我也使用的技术，虽然不完全精确但非常相似。在Illustrator中对“画板”进行的任何转换都将直接转换为viewbox在导出到SVG时被更改的值。您完全正确地创建了一个新文档并复制了所有插图。您的答案应标记为正确的+1。
— 2014年
2
Adobe是SVG的主要支持者，但是当svg出现时，他们在Macromedia收购之后的几年中在这方面没有做任何事情，因为他们希望Flash成功。
— joojaa 2014年
1
我正在使用Adobe Illustrator CC 18.1.0并创建一个全新的文档，复制并粘贴我的svg，然后重新保存似乎可以解决问题。我还要确保检查Preserve Illustrator Editing Capabilities第一次保存，以防万一我需要做更多的调整，然后在我认为一切都还不错之后，我将其保存下来（文件大小的增加非常重要，因此您需要这样做这）
— 2015年8
7

我知道这对于该主题来说太晚了，但是我遇到了同样的问题，并做了以下工作。

  1. 在文本编辑器中打开SVG，并将viewBox属性更改为0 0 xy
  2. 保存并在Illustrator中重新打开
  3. 现在，艺术品将位于画板之外-将其移回0 0
  4. 保存并预览，一切正常。

希望这对其他人有帮助。

— 标记
source
马克您好，欢迎使用GDSE，感谢您的回答。如果您有任何疑问，请在信誉良好后访问帮助中心或在聊天中 ping我们中的一个（20）。继续贡献并享受该网站！
— Zach Saucier 2015年
我发现将width="<W>" height="<H>"您喜欢的文本编辑器添加到SVG标记中也有帮助（其中<W>和<H>都是十进制数字）。
— jtheletter
4

我有一个非常相似的问题，我的AI创建的SVG没有居中并扩展到整个浏览器窗口，因为AI不断更改画板的大小，却忘记了居中。

修复它的唯一方法是在Inkscape中进行最后的手动处理。

  • 在Inkscape中打开SVG
  • 在“文件”->“文档属性”下调整画布的大小
  • 通过选择艺术品并在工具栏编辑中输入w，h来调整艺术品的大小和移动

最后，您必须再次保存SVG，但在“另存为”对话框中使用格式“ Optimized SVG”。将出现一个用于SVG选项的对话框，您必须启用“启用视图框”。

由于我所有的SVG都是相同大小的图标，因此此处理步骤仅需1分钟，因为我始终具有相同的画布和对象大小。但是，是的，根本不需要执行此步骤，并且应该在AI中修复，这是一个遗憾。

— 塞比
source
0

我已经弄清楚了。最后！有一个简单的方法可以做到这一点。像这样：

<svg id="xbox" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 60.7"><title>xbox</title><rect width="200" height="60.68" style="fill:none"/><path d="M195.2,49.2l-11.8-16-11.5,16h-4.8L181.2,30,168.4,12.8h4.8l10.2,14,10.5-14h4.8L185.9,30,200,49.2Zm-90.7,0L90.4,30l12.8-17.2H98.4l-10.5,14-10.3-14H72.8L85.6,30l-14,19.2h4.8l11.5-16,11.8,16Z" style="fill:#0f7c10"/><path d="M131,31.3l-2.2-1.6a8.2,8.2,0,0,0,4.4-7c0-2.6-.9-9.9-12.1-9.9H106.4V28.4h-4.8l-2.9,3.5h7.7V49.2h14.7c8.3,0,13.1-4.2,13.1-10.9a8.6,8.6,0,0,0-3.2-7m-20.5-15h10.6c3.2,0,8,1,8,6.1s-2.9,6-8,6H110.5Zm10.6,29.1H110.5V31.9h10.6c4.1,0,8.9,1.3,8.9,6.4s-5.4,7.1-8.9,7.1m32.3-33.6c-10.3,0-17.3,7.7-17.3,19.2s7,18.8,17.3,18.8,17.5-7.6,17.5-18.8-7.3-19.2-17.5-19.2m0,34.2c-7.7,0-13.1-6.1-13.1-15s5.4-15.3,13.1-15.3S166.8,22,166.8,31s-5.5,15-13.4,15M8.9,8.6h0A31,31,0,0,0,0,30.4,32.5,32.5,0,0,0,6.1,48.9h.3C4.2,41.5,16,24.3,22,16.9h0C11.8,6.4,8.9,8.9,8.9,8.6m42.9,0h0a31,31,0,0,1,8.9,21.8,32.5,32.5,0,0,1-6.1,18.5h-.3c2.2-7-9.6-24.3-15.6-31.6h0C48.9,7,51.8,9.6,51.8,9.3M30.4,0A29.9,29.9,0,0,1,46.3,4.5h0c0,.3,0,.3-.3.3C40.3,3.5,31.3,8.3,30.4,8.9h0C28.1,7.7,19.8,3.2,14.7,4.8a.3.3,0,0,1-.3-.3h0A30,30,0,0,1,30.4,0m0,24.3h0c9.2,7,24.9,24.3,20.1,29.1h0a31.5,31.5,0,0,1-40.3,0h0C5.8,48.6,21.1,31.3,30.4,24.3h0" style="fill:#0f7c10"/></svg>

问题是，当您从Illustrator导出图像时（很多），画板不包含在导出的SVG中。路径没有任何依据可进行计算。

在我的情况下，图片的最大高度为100px，因此我需要根据图片的宽度和高度为它们创建CSS样式。在CSS中，我使用vw单位，或者100%如果SVG要填充块空间，则使用旧的单位。这样可以很好地扩展。这样，您就不会在CSS中设置宽度和高度以确保其正确显示。

我浏览了每个徽标，并将高度设置为，100px然后根据宽高比自动计算宽度。然后，我将画板贴到徽标上，以删除所有未使用的空间。

我选择了一个矩形，并关闭了填充和描边功能，并确保它与画板的尺寸完全相同。将此空白对象放在后面。现在，当您导出时，路径将具有进行计算的基础。

要在代码中执行此操作，您可以将路径包裹在中rect并设置其宽度和高度，然后可以将其设置viewBox为相同（保持宽高比相同）。如上例所示。我没有实际测试过，但是我会测试和更新。

— BugHunterUK
source
0

我可以使用Inkscape进行修复。似乎Illustrator对SVG文件的支持不佳。

  1. 在Inkscape中打开svg文件 CTRL + O
  2. 然后创建一个新文件 CTRL + N
  3. CTRL + SHIFT + D 记录属性并调整画板尺寸。 3
  4. 选择并将svg复制到新创建的文件中。
  5. 现在，通过更改位置和大小值来调整资产。例如，将位置设置为原点，将宽度和高度设置为文档大小。 5
  6. 保存新文件。
— 帕尼·里维维（Phani Rithvij）
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.