使用 Adobe Illustrator 创建 svg 复合路径

Author Avatar
tanglijun 5月 14, 2018

在网页设计中,我们经常会用到 svg 图标,本文记录下在制作 svg 时如何使用复合路径。

原文件

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 48 48" style="enable-background:new 0 0 48 48;" xml:space="preserve">
<style type="text/css">
  .st0{fill:#FFFFFF;}
</style>
<path d="M6.4,3.7C6,3.8,5.3,4.3,4.8,4.7C4.4,5,3.8,6,3.7,6.5c-0.2,0.7-0.2,33.9,0,34.4c0.4,1,1.7,2.3,2.6,2.6c0.4,0.2,35,0.2,35.5,0c0.9-0.3,2.3-1.7,2.6-2.6c0.1-0.3,0.1-3.5,0.1-17.2c0-11,0-16.9-0.1-17.2c-0.1-0.2-0.3-0.6-0.6-1c-0.4-0.6-0.6-0.8-1.2-1.2c-0.4-0.3-0.9-0.5-1.1-0.6C41.4,3.6,33.9,3.6,24,3.6C10.3,3.6,6.7,3.6,6.4,3.7z"/>
<g>
  <path class="st0" d="M9.3,32c1.9,1.2,3.8,1.8,5.7,1.8c2.3,0,3.5-0.6,3.5-1.9c0-0.9-1-1.6-2.9-2.2c-2.4-0.8-4.1-1.6-5-2.5S9.3,25,9.3,23.4c0-1.9,0.8-3.4,2.3-4.5s3.6-1.6,6.1-1.6c1.8,0,3.5,0.3,5.2,0.8v4.5c-1.5-0.9-3.2-1.3-5-1.3c-0.9,0-1.6,0.2-2.2,0.5s-0.8,0.7-0.8,1.3c0,0.9,0.8,1.6,2.5,2.2c1.8,0.6,3.1,1.1,4,1.6s1.6,1.1,2,1.9s0.7,1.7,0.7,2.7c0,2-0.8,3.6-2.4,4.7s-3.8,1.7-6.4,1.7c-2.1,0-4.1-0.3-5.9-1V32H9.3z"/>
  <path class="st0" d="M40,12.8c-0.8-0.3-1.5-0.5-2.2-0.5c-1.9,0-2.9,1.1-2.9,3.2v2.2h4.4V22h-4.4v15.2h-5.7V22h-3.3v-4.2h3.3v-2.5c0-2.2,0.7-4,2.2-5.3s3.3-2,5.7-2c1.2,0,2.2,0.1,3,0.4L40,12.8L40,12.8z"/>
</g>
</svg>

选区

segmentfault 图标 sf 为例,ctrl + A 选择全部路径

compound

复合路径建立后

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 48 48" style="enable-background:new 0 0 48 48;" xml:space="preserve">
<path d="M6.4,3.7C6,3.8,5.3,4.3,4.8,4.7C4.4,5,3.8,6,3.7,6.5c-0.2,0.7-0.2,33.9,0,34.4c0.4,1,1.7,2.3,2.6,2.6c0.4,0.2,35,0.2,35.5,0c0.9-0.3,2.3-1.7,2.6-2.6c0.1-0.3,0.1-3.5,0.1-17.2c0-11,0-16.9-0.1-17.2c-0.1-0.2-0.3-0.6-0.6-1c-0.4-0.6-0.6-0.8-1.2-1.2c-0.4-0.3-0.9-0.5-1.1-0.6C41.4,3.6,33.9,3.6,24,3.6C10.3,3.6,6.7,3.6,6.4,3.7z M9.3,32c1.9,1.2,3.8,1.8,5.7,1.8c2.3,0,3.5-0.6,3.5-1.9c0-0.9-1-1.6-2.9-2.2c-2.4-0.8-4.1-1.6-5-2.5S9.3,25,9.3,23.4c0-1.9,0.8-3.4,2.3-4.5s3.6-1.6,6.1-1.6c1.8,0,3.5,0.3,5.2,0.8v4.5c-1.5-0.9-3.2-1.3-5-1.3c-0.9,0-1.6,0.2-2.2,0.5s-0.8,0.7-0.8,1.3c0,0.9,0.8,1.6,2.5,2.2c1.8,0.6,3.1,1.1,4,1.6s1.6,1.1,2,1.9s0.7,1.7,0.7,2.7c0,2-0.8,3.6-2.4,4.7s-3.8,1.7-6.4,1.7c-2.1,0-4.1-0.3-5.9-1V32H9.3z M40,12.8c-0.8-0.3-1.5-0.5-2.2-0.5c-1.9,0-2.9,1.1-2.9,3.2v2.2h4.4V22h-4.4v15.2h-5.7V22h-3.3v-4.2h3.3v-2.5c0-2.2,0.7-4,2.2-5.3s3.3-2,5.7-2c1.2,0,2.2,0.1,3,0.4L40,12.8L40,12.8z"/>
</svg>

使用 svgomg 优化 svg

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M6.4 3.7c-.4.1-1.1.6-1.6 1-.4.3-1 1.3-1.1 1.8-.2.7-.2 33.9 0 34.4.4 1 1.7 2.3 2.6 2.6.4.2 35 .2 35.5 0 .9-.3 2.3-1.7 2.6-2.6.1-.3.1-3.5.1-17.2 0-11 0-16.9-.1-17.2-.1-.2-.3-.6-.6-1-.4-.6-.6-.8-1.2-1.2-.4-.3-.9-.5-1.1-.6-.1-.1-7.6-.1-17.5-.1-13.7 0-17.3 0-17.6.1zM9.3 32c1.9 1.2 3.8 1.8 5.7 1.8 2.3 0 3.5-.6 3.5-1.9 0-.9-1-1.6-2.9-2.2-2.4-.8-4.1-1.6-5-2.5S9.3 25 9.3 23.4c0-1.9.8-3.4 2.3-4.5s3.6-1.6 6.1-1.6c1.8 0 3.5.3 5.2.8v4.5c-1.5-.9-3.2-1.3-5-1.3-.9 0-1.6.2-2.2.5s-.8.7-.8 1.3c0 .9.8 1.6 2.5 2.2 1.8.6 3.1 1.1 4 1.6s1.6 1.1 2 1.9.7 1.7.7 2.7c0 2-.8 3.6-2.4 4.7s-3.8 1.7-6.4 1.7c-2.1 0-4.1-.3-5.9-1V32h-.1zM40 12.8c-.8-.3-1.5-.5-2.2-.5-1.9 0-2.9 1.1-2.9 3.2v2.2h4.4V22h-4.4v15.2h-5.7V22h-3.3v-4.2h3.3v-2.5c0-2.2.7-4 2.2-5.3s3.3-2 5.7-2c1.2 0 2.2.1 3 .4l-.1 4.4z"/></svg>

参考资料