使用 MacSVG 创建动画、可缩放的矢量图形图像

新巴比伦摄政王伯沙撒没有理会在他盛大宴会上神奇出现的预兆。然而，如果他在公元前 539 年拥有一台笔记本电脑和良好的互联网连接，他或许可以通过在浏览器上阅读 SVG 来避开那些讨厌的波斯人。

在网页上为文本和对象添加动画是建立用户兴趣和参与度的绝佳方式。有几种方法可以实现这一点，例如视频嵌入、动画 GIF 或幻灯片——但您也可以使用可缩放矢量图形 (SVG)。

SVG 图像与 JPG 等图像不同，因为它可缩放且不会损失分辨率。矢量图像由点而不是点创建，因此无论放大多少，它都不会损失分辨率或像素化。可缩放静态图像的一个良好用例是网站上的徽标。

动起来，动起来

您可以使用多种绘图程序创建 SVG 图像，包括开源 Inkscape 和 Adobe Illustrator。让您的图像“动起来”需要付出更多努力。幸运的是，有一些开源解决方案甚至可以引起伯沙撒的注意。

MacSVG 是一款可以使您的图像动起来的工具。您可以在 GitHub 上找到源代码。

MacSVG 由阿肯色州康威的 Douglas Ward 开发，根据其 网站介绍，它是一款“用于设计 HTML5 SVG 艺术和动画的开源 Mac OS 应用程序”。

我对使用 MacSVG 创建动画签名很感兴趣。我承认我发现这个过程有点令人困惑，并且在第一次尝试创建实际的动画 SVG 图像时失败了。

首先了解是什么使“预兆”真正显现非常重要。

动画文字背后的属性是 stroke-dasharray。将该术语分解为三个词有助于解释正在发生的事情：Stroke 指的是您用笔（无论是物理笔还是数字笔）绘制的线条或笔画。Dash 意味着将笔画分解为一系列短划线。Array 意味着将整个事物生成一个数组。这是一个简单的概述，但它帮助我理解了应该发生什么以及原因。

使用 MacSVG，您可以导入图形 (.PNG) 并使用钢笔工具描摹文字的路径。我使用了我的名字的草书表示。然后只需应用属性即可为文字添加动画效果、增加和减少笔画的粗细、更改其颜色等等。完成后，动画文字将导出为 .SVG 文件，并准备好在网络上使用。除了手写之外，MacSVG 还可以用于许多不同类型的 SVG 动画。

预兆已在 WordPress 上

我准备在我的 WordPress 网站上上传和分享我的 SVG 示例，但我发现 WordPress 不允许导入 SVG 媒体。幸运的是，我找到了一个方便的插件：Benbodhi 的 SVG Support 允许像我将 JPG 导入到我的媒体库一样快速、轻松地导入我的 SVG。我得以向世界各地的巴比伦人展示我的预兆。

我在 Brackets 中打开了我的 SVG 的源代码，以下是结果

<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://web.resource.org/cc/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" height="360px" style="zoom: 1;" cursor="default" id="svg_document" width="480px" baseProfile="full" version="1.1" preserveAspectRatio="xMidYMid meet" viewBox="0 0 480 360"><title id="svg_document_title">Path animation with stroke-dasharray</title><desc id="desc1">This example demonstrates the use of a path element, an animate element, and the stroke-dasharray attribute to simulate drawing.</desc><defs id="svg_document_defs"></defs><g id="main_group"></g><path stroke="#004d40" id="path2" stroke-width="9px" d="M86,75 C86,75 75,72 72,61 C69,50 66,37 71,34 C76,31 86,21 92,35 C98,49 95,73 94,82 C93,91 87,105 83,110 C79,115 70,124 71,113 C72,102 67,105 75,97 C83,89 111,74 111,74 C111,74 119,64 119,63 C119,62 110,57 109,58 C108,59 102,65 102,66 C102,67 101,75 107,79 C113,83 118,85 122,81 C126,77 133,78 136,64 C139,50 147,45 146,33 C145,21 136,15 132,24 C128,33 123,40 123,49 C123,58 135,87 135,96 C135,105 139,117 133,120 C127,123 116,127 120,116 C124,105 144,82 144,81 C144,80 158,66 159,58 C160,50 159,48 161,43 C163,38 172,23 166,22 C160,21 155,12 153,23 C151,34 161,68 160,78 C159,88 164,108 163,113 C162,118 165,126 157,128 C149,130 152,109 152,109 C152,109 185,64 185,64 " fill="none" transform=""><animate values="0,1739;1739,0;" attributeType="XML" begin="0; animate1.end+5s" id="animateSig1" repeatCount="indefinite" attributeName="stroke-dasharray" fill="freeze" dur="2"></animate></path></svg>

您会使用 MacSVG 做什么？