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

QoP*_*QoP 12 html svg

正如标题所说,我如何在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>
Run Code Online (Sandbox Code Playgroud)

(它不包含任何东西,它只是一个随机的svg).

我必须先将其下载为.svg吗?我怎样才能将其下载为.svg?

ray*_*eld 39

将其粘贴到名为whatever.svg的文本文件中,然后在Illustrator中打开该文件.


rev*_*.de 5

创建 .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>
Run Code Online (Sandbox Code Playgroud)

在浏览器中打开它。打开打印并按“另存为 .pdf”

现在您可以在 Illustrator 中打开它。

例子

  • 这是导出由 javascript/jquery 生成或修改的 SVG 并在 Illustrator 上使用的完美解决方案。 (2认同)