新建一个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,可以对形状的大小进行自由修改。