logo标签列表

HTML SVG - 是否可以将<svg>导入Adobe Illustrator进行修改？

htmlsvg
26

正如标题所述，我该如何在Adobe Illustrator中修改svg文件？

例如，我得到了这个：

<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="595.28px" height="841.89px" viewBox="0 0 595.28 841.89" enable-background="new 0 0 595.28 841.89" xml:space="preserve">
<text transform="matrix(1 0 0 1 225 321)" font-family="'MyriadPro-Regular'" font-size="12">This a TEST!</text>
<path fill="none" d="M177,246c0,92.859,77.824,168,174,168"/>
<path fill="none" d="M357,246c0,161.398-105.555,292-236,292"/>
<path fill="none" d="M288,414c0,113.311-23.252,205-51.987,205"/>
<rect x="93" y="383" fill="none" width="364" height="147"/>
<g>
    <rect x="167" y="272" fill="none" width="216" height="244.5"/>
</g>
<rect x="476" y="428" fill="none" width="216" height="244.5"/>
<rect x="121" y="230" fill="none" width="403" height="231"/>
<rect x="179" y="158" fill="none" width="362" height="454.25"/>
<rect x="73" y="230" fill="none" width="294" height="184"/>
<rect x="371" y="516.5" fill="none" width="12" height="13.5"/>
<rect x="167" y="143" fill="none" width="221" height="387"/>
</svg>

(它并不包含任何内容，只是一个随机的svg文件。)

我是否需要先将其下载为.svg文件？如何将其下载为.svg文件？

1
我投票关闭此问题，因为这是一个好的问题和答案，但更适合在graphicdesign stackexchange上。 - Michael Schmidt
4个回答
56
将其粘贴到名为whatever.svg的文本文件中，并在Illustrator中打开该文件。
1
哇，太简单了！谢谢！ - Dan
跳过文本文件。将SVG代码直接粘贴到Illustrator文档中。 - ndemarco
7
创建一个 .html 文档。 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
 <head profile="http://gmpg.org/xfn/11">
 </head>
 <body>
  <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="595.28px" height="841.89px" viewBox="0 0 595.28 841.89" enable-background="new 0 0 595.28 841.89" xml:space="preserve">
   <text transform="matrix(1 0 0 1 225 321)" font-family="'MyriadPro-Regular'" font-size="12">This a TEST!</text>
   <path fill="none" d="M177,246c0,92.859,77.824,168,174,168"/>
   <path fill="none" d="M357,246c0,161.398-105.555,292-236,292"/>
   <path fill="none" d="M288,414c0,113.311-23.252,205-51.987,205"/>
   <rect x="93" y="383" fill="none" width="364" height="147"/>
   <g>
    <rect x="167" y="272" fill="none" width="216" height="244.5"/>
   </g>
   <rect x="476" y="428" fill="none" width="216" height="244.5"/>
   <rect x="121" y="230" fill="none" width="403" height="231"/>
   <rect x="179" y="158" fill="none" width="362" height="454.25"/>
   <rect x="73" y="230" fill="none" width="294" height="184"/>
   <rect x="371" y="516.5" fill="none" width="12" height="13.5"/>
   <rect x="167" y="143" fill="none" width="221" height="387"/>
  </svg>
 </body>
</html>

在浏览器中打开此文件，然后选择打印，并按“另存为.pdf”

现在您可以在Illustrator中打开此文件。

示例

2
这是将由javascript/jquery生成或修改的SVG导出并在Illustrator上使用的完美解决方案。 - Gendrith
@Gendrith 你可以在开发者工具中复制 SVG 根元素的外部 HTML，并粘贴到一个空白的 SVG 文件中。 - cuixiping
1

将SVG代码复制到剪贴板，然后粘贴到您的Illustrator文档中。

在Illustrator 25上进行了测试。

来源

1
如果这是来自网络的图像，您可以右键单击“检查”，然后在第一个<svg>标签上单击并复制[cntrl-c]。然后，您应该能够将整个SVG数据直接作为图像复制到Illustrator中。
如果SVG数据未嵌入网页中，则可能需要先将其链接打开到新标签中或从DevTools中的“元素”选项卡获取。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接