通过Sketch设计软件学习SVG基础知识

作者：大漠 日期：2020-08-23 点击：462
SVG
SVG之旅
会员专栏

特别声明：如果您喜欢小站的内容，可以点击申请会员进行全站阅读。如果您对付费阅读有任何建议或想法，欢迎发送邮件至: airenliao@gmail.com!或添加QQ：874472854(^_^)

在《图解SVG的核心概念》一文中，花了很长的篇幅和大家深入的探讨了SVG中的几个核心概念。有了这些基础概念之后，对于学习和理解SVG方面的知识会变得更容易。时至今日，设计SVG的应用软件也越来越多，比如我们熟悉的Adobe Illustrator以及近几年较为流行的Sketch和Figma等。不过今天，我想结合Sketch软件帮助大家更好的理解SVG的一些基础知识。如果您感兴趣的话，请继续往下阅读。

SVG和设计工具的结合

了解清楚SVG的几个核心概念之后，就可以进入接下来要聊的内容了：学习一些SVG的简单知识。

虽然在小站上有过一些SVG相关的教程，但这里我想将SVG和设计工具结合起来，以最简单的方式向大家阐述一些SVG的基本知识。

如果你想充分的用好SVG，不仅要学习它的语法，还要了解图形设计软件是如何生成SVG的。

在大多数开发者的认知中，SVG经常被视为是一种图像格式。事实上，SVG除了以图像格式.svg使用之外，还可以直接将代码（XML）运用到Web应用或Web页面当中。而且使用SVG除了它的可伸缩性和文件更小之外，SVG还有很多其他优势。比如：

  • 矢量图的呈现质量更高，图形不会失真
  • 矢量图具有动效、滤镜等特性

时至今日，SVG最新的版本是2.0，但我们平时使用还是大部分基于1.1第二版本。

不过对于Web开发者而言，要良好的理解SVG也算是一种罕见的技能。主要是因为SVG是一种基于 XML的标记语言。换句话说，掌握了SVG，也相当于掌握了一门语言。

另外，SVG和其他语言有点类似（特别是HTML这样的标记语言），Web开发者可以在文本编辑器中编写代码和修改代码，从而改变SVG的呈现效果。基于这一点而言，SVG又和我们熟悉的其他格式图像（比如.jpg、.png、.webp、.gif等）有所不同，因为不需要依赖任何GUI软件来创建SVG或编辑SVG。虽然如此，Web开发者直接使用代码方式来创建和编辑SVG还是有一定难度的，特别对于一些复杂的SVG图形，针对于这样的场景，还是需要依赖于图形设计应用程序。比如目前最为流行的几款设计软件：Adobe Illustrator、Sketch和Figma等。我们可以使用这些设计软件可视化地设计图形，然后将它们导出SVG代码，运用到Web应用或Web页面中。

因此，无论你是编写代码的设计师还是具有设计意识的开发人员，要熟练地使用SVG的话都需要对设计工具和SVG语言本身都有一定的了解。也正是因为这个原因，我才选择将SVG代码编写和设计工具结合在一起来介绍SVG的基础知识。

基本图形

为了更好地理解两者之间的关系，我们来了解一下图形设计软件提供了什么，有什么特性，如何将图形转换为SVG代码？接下来，我们从最简单的基本图形入手。

接下来向大家演示的图形设计软件都是基于Sketch软件。

在Sketch设计软件中提供了一些基本的工具，可以用来绘制常见的图形，比如上图所示：

利用上面这些基本工具，可以绘制出一些常见的图形，比如矩形（正方形）、圆、椭圆、多边形、线、箭头等：

上图在Sketch软件中可以直接导出.svg格式文件：

使用文本编辑器，打开导出来的.svg文件，你可以看到相应的SVG代码：

<svg xmlns="http://www.w3.org/2000/svg" width="946" height="638" viewBox="0 0 946 638">
    <g fill="none" fill-rule="evenodd">
        <rect width="140" height="127.874" x="67" y="46" fill="#D0021B" stroke="#F5A623"/>
        <ellipse cx="316" cy="110.5" fill="#F5A623" stroke="#979797" rx="85" ry="44.5"/>
        <circle cx="489" cy="110" r="64" fill="#F8E71C" stroke="#979797"/>
        <rect width="140" height="128" x="752" y="46" fill="#7ED321" stroke="#979797" rx="8"/>
        <line x1="262" x2="369" y1="319" y2="231" stroke="#4A90E2" stroke-linecap="square" stroke-width="6"/>
        <path fill="#50E3C2" fill-rule="nonzero" d="M539.5,267.5 L568.5,282 L539.5,296.5 L539.5,284.5 L407.5,284.5 L407.5,279.5 L539.5,279.5 L539.5,267.5 Z"/>
        <polygon fill="#BD10E0" stroke="#979797" points="137 204 207 339 67 339"/>
        <polygon fill="#417505" stroke="#979797" points="745 320 699.741 343.485 708.384 293.743 671.769 258.515 722.37 251.257 745 206 767.63 251.257 818.231 258.515 781.616 293.743 790.259 343.485"/>
        <polygon fill="#247AB9" stroke="#979797" points="249 413 329.84 470.352 298.962 563.148 199.038 563.148 168.16 470.352"/>
        <polygon fill="#8B572A" stroke="#979797" points="607.983 80.947 682.994 37 728 143.867 623.963 165 672.557 127.537 577 124.655 623.963 96.077"/>
        <path fill="#A23BA8" stroke="#979797" d="M508,437.026438 C532.800874,419.511616 565.889149,386.532143 600.707077,388.050678 C601.722458,388.094962 617.140041,387.406283 620.806215,393.01267 C635.186541,415.003354 649.931688,436.785373 663.245957,459.439338 C668.495111,468.370668 668.914654,491.426434 666.832305,497.827433 C662.219152,512.00795 644.152046,539.710187 626.396239,543.96498 C613.19016,547.129529 563.952142,545.059117 557.994461,568.400155 C556.859139,572.848125 555.75879,577.603639 556.649581,582.107122 C559.058022,594.283242 592.150571,600.685264 595.962964,601.267985 C625.905115,605.844613 669.148868,609.800891 667.346867,567.935579 C666.672969,552.279109 620.542792,536.758864 616.229724,534.419684 C607.560458,529.717932 599.606262,523.783975 591.039533,518.897355 C575.420709,509.98809 558.945135,502.574768 543.69585,493.045025 C539.780386,490.598132 536.304516,487.177101 533.934748,483.210833 C528.667256,474.394659 525.717161,464.371097 521.086269,455.203491 C519.286362,451.640282 516.813838,448.459971 514.677623,445.088211 L508,437.026438 Z"/>
    </g>
</svg>

Sketch设计软件中绘制图形的工具在SVG中有对应的标记：

Sketch设计工具 SVG标记 备注
矩形 <rect> 如果长和宽相等时，绘制的是一个正方形
椭圆形 <ellipse> 或 <circle> 椭圆有两个半径（rx和ry），圆只有一个半径（r）
圆角矩形 <rect> 带有rx属性，设置圆角半径
直线 <line>  
箭头 <path>  
三角形 <polygon>  
星形 <polygon>  
多边形 <polygon>  
矢量（钢笔） <polygon> 绘制其他的多边形
铅笔 <path>  

椭圆和圆

在SVG中，我们可以使用<ellipse>标签元素来绘制一个椭圆形，椭圆有圆心坐标（cx和cy）和两个半径（rx和ry）定义：

<ellipse cx="400" cy="300" rx="250" ry="150"/>

当<ellipse>中的rx和ry值相等时，将会绘制出一个圆：

<ellipse cx="400" cy="300" rx="250" ry="250"/>

不过在SVG中，可以直接使用<circle>标签来绘制圆形：

<circle cx="400" cy="300" r="250"/>

矩形和圆角矩形

另一个基本图形就是矩形，使用设计软件中使用矩形工具绘制的图形，对应的就是SVG中的<rect>标签。一个基本的<rect>标签由四个基本属性定义：矩形的起点坐标x和y以及矩形的width和height：

<rect x="150" y="100" width="500" height="400"/>

当<rect>的width和height值相等时，将会绘制一个正方形。

除了基本矩形之外，还会有圆角矩形。在Sketch设计软件中，使用“矩形”工具配合右侧工具栏的“圆角”设置，可以给一个矩形设置圆角，从而达到绘制“圆角矩形”的效果：

从导出来的SVG代码中可以发现，在<rect>标签上新增加了一个rx属性，该属性就是用来指定矩形圆角的半径：

<rect x="150" y="100" width="500" height="400" rx="30"/>

上面我们看到的是四个角的圆角半径相同。在设计工具中，我们还可以给每个角设置不同的圆角半径：

导出来的代码将会发现，它不再是一个<rect>标签，而变成了<path>：

<path d="M64,1 L173,1 C201.718807,1 225,24.281193 225,53 L225,73.5 C225,113.540644 192.540644,146 152.5,146 L64,146 C29.2060608,146 1,117.793939 1,83 L1,64 C1,29.2060608 29.2060608,1 64,1 Z" stroke="#979797" fill="#D8D8D8"></path>

至于为什么？我们就不深究了。

回过头来，你可能发现了，右侧工具栏的“圆角”设置项目中有“圆角”和“平滑圆角（Smooth Corners）”两个选项，如果使用矩形工具绘制矩形，并且圆角设置的时候选择的是“平滑圆角”选项，导出来的SVG代码并不是<rect>标签，而是<path>标签：

<path d="M26.638852,1 L192.361148,1 C201.276335,1 204.509198,1.92825611 207.768457,3.67132704 C211.027716,5.41439796 213.585602,7.97228371 215.328673,11.231543 C217.071744,14.4908022 218,17.7236646 218,26.638852 L218,107.361148 C218,116.276335 217.071744,119.509198 215.328673,122.768457 C213.585602,126.027716 211.027716,128.585602 207.768457,130.328673 C204.509198,132.071744 201.276335,133 192.361148,133 L26.638852,133 C17.7236646,133 14.4908022,132.071744 11.231543,130.328673 C7.97228371,128.585602 5.41439796,126.027716 3.67132704,122.768457 C1.92825611,119.509198 1,116.276335 1,107.361148 L1,26.638852 C1,17.7236646 1.92825611,14.4908022 3.67132704,11.231543 C5.41439796,7.97228371 7.97228371,5.41439796 11.231543,3.67132704 C14.4908022,1.92825611 17.7236646,1 26.638852,1 Z"  stroke="#979797" fill="#D8D8D8"></path>

平滑圆角指的是使用不规则的border-radius来获取看起来更自然、更平滑的效果！

平滑圆角最常见的应用是iOS上的应用程序图标和其他圆角元素。iOS6使用的是常规圆角，2013年的iOS7中开始使用平滑圆角：

这种圆角效果更自然，更平滑。但在CSS的世界中目前使用border-radius是无法达到该效果。不过在CSS Houdini中可以实现这种平滑圆角效果。这已经脱离我们今天要聊的话题，继续回到SVG的世界中来。

使用设计工具绘制一个圆角矩形和使用SVG绘制一个圆角矩形，其最大的区别就是圆角半径定义的方式。在设计工具中，圆角半径由单个变量定义的（一但有多个变量就会变成<path>）。我们可以把圆角半径看作是用来遮盖矩形角的小圆的半径：

而在SVG中使用<rect>绘制圆角矩形时，可以像<ellipse>定义两个方向的半径：rx（水平方向的）和ry(垂直方向的)，这样的话就看上去是用了一个椭圆来遮盖矩形：

<rect x="150" y="100" width="500" height="400" rx="40" ry="30"/>

剩余80%内容付费后可查看

如需转载，烦请注明出处：https://www.w3cplus.com/svg/learn-the-basics-of-svg-with-sketch.html

如果文章中有不对之处，烦请各位大神拍正。如果你觉得这篇文章对你有所帮助，打个赏，让我有更大的动力去创作。(^_^)。看完了？还不过瘾？点击向作者提问！

赏杯咖啡，鼓励他创作更多优质内容！
返回顶部