PS绘制的SVG与AI绘制的区别

2,236 阅读1分钟

新建一个PS绘制的代码如下:

<svg 
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    width="526px" height="61px">
   <path fill-rule="evenodd"  fill="rgb(52, 52, 52)"
    d="M-0.000,61.000 C-0.000,61.000 34.000,-26.000 123.000,9.000 C212.000,44.000 316.000,51.000 406.000,19.000 C496.000,-13.000 526.000,35.000 526.000,35.000 "/>
   </svg>

把路径复制到AI,生成的SVG如下:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 23.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 600 150" style="enable-background:new 0 0 600 150;" xml:space="preserve">
<style type="text/css">
	.st0{fill-rule:evenodd;clip-rule:evenodd;}
</style>
<path class="st0" d="M6.28,112.7c0,0,34-87,123-52s193,42,283,10s120,16,120,16"/>
</svg>

总结一下两者的区别:

  • path路径完全不一样

  • PS生成的SVG会自动裁切为形状的大小,并非画布大小。啥意思呢,我们来看图: 建立的画布是600x150(实线部分),但是实际上导出的SVG高宽是形状大小(虚线部分)。

    而AI生成的SVG会带 viewBox,可以对形状的大小进行自由修改。