河东做网站：增强SVG工作流的有用工具

2019.06.03 河东做网站

1.矢量软件

任何矢量编辑和创建软件最终都是一个SVG工具，有一些可以选择。让我们河东做网站来看看三个顶级工具。

一个。AdobeIlluStrator

毫无意外地领导这群人AdobeIlluStrator..AdobeIlluStrator是一个功能非常强大的矢量图形软件，广泛应用于许多行业。随着SVG在网络上的兴起，它作为SVG工具的实用性大大提高了。

然而，这是有代价的。如果图形是你的事情，而你使用的SVG是大量的，它可能值得投资几分钱！

b.Corel图

Corel图是Corel系列设计产品中的一员，是另一个功能很强的工具。Corel长期以来一直是Adobe在图形领域的竞争对手，但随着Adobe在许多其他软件领域(包括网络领域)占据主导地位，Corel似乎被搁置了一些。

然而，世界各地的许多平面艺术家仍然对此发誓，但如果你的兴趣完全在SVG领域，它可能不是你的软件。毕竟，它也有自己的价格标签。

c.SVG-编辑

如果没有一个好的开放源码工具，矢量软件的列表当然是不完整的，除了在Google的代码驱动程序之外，还有其他地方可以找到它。SVG-编辑是一个开源的、快速的、基于web的SVG编辑器.它基于JavaScript，可以在任何现代浏览器中工作。

它以惊人的$Free.99的价格推出，对于那些想要可视化创建图形并输出SVG代码的开发人员来说，这是一个完美的解决方案。

2.用于编写SVG的SVG库

在视觉方面，SVG是形状、笔画、颜色和作品的集合，在屏幕上进行分组和输出。但是，任何SVG文件实际上都可以在文本编辑器中打开，这就是SVG的内部工作方式。

在我的教程中开始使用内联SVG，我将详细介绍如何在文档中直接编写SVG脚本，以在屏幕上生成输出。但是，有一些库可以简化SVG脚本，使交互更加容易。让我们看看其中的两个。

一个。SnapSVG

SnapSVG是我最近最喜欢使用SVG的库，很容易在短时间内使用它来运行。根据他们的说法，这是一个很好的方法来创建交互式的，分辨率独立的矢量图形，在任何屏幕大小上都会看起来很好。

我完全同意这一说法。该库有很好的文档，拥有大量的特性和方法，并附带了一些演示供您阅读。他（她，它）们的入门指南很容易被跟踪，并且会让你的脚湿润，你的想法也会流动。例如，创建一个圆就像这样简单：

var s = Snap("#svg");var circle = s.circle(150, 150, 100);circle.attr({
    fill: "#bada55",
    stroke: "#000",
    strokeWidth: 2});

输出将是半径为100 px的圆，从SVG原点开始，x和y坐标位于150 px。设置属性也非常简单，如上文所示。动动圆圈也是一件轻而易举的事：

circle.animate({
  r: 50}, 1000);

这将在1秒内将圆周半径线性地动画到50 px。我有没有提过有许多宽松功能的快速船？

b.拉斐尔

拉斐尔与SnapSVG一样，它也是一个JavaScript库，其任务是简化SVG工作流。在他们的网站上也有大量的文档，你可以从这些演示中窥探源代码，了解一些可能性和内部工作原理。

它的安装和使用也非常容易掌握。为了创建与上面相同的循环，我们应该这样做：

var paper = Raphael("#svg");var paper = Raphael("svg");var circle = paper.circle(150, 150, 100);circle.attr({
  fill: "#bada55",
  stroke: "#000",
  "stroke-width": "2"});

正如您所看到的，这是一个非常类似的语法来抓取SVG！正如您所预期的，绘制圆圈的动画也同样容易：

circle.animate({
  r: 50}, 1000);

瞧。与SnapSVG一样，Raphael也推出了自己的一套宽松功能。我想这只是你选择图书馆时的优先选择，但我想说的是，选择一个就行了。

3.SVG优化工具

如果您在您选择的任何图形软件中预先创建SVG，然后希望在操作或输出之前将它们放到文档中，则强烈建议您首先优化您的文件。

大多数图形软件输出SVG与一堆不必要的Ho-ha‘s，增加了您的页面重量和整体超重行李。这里有几个让你开始的工具。

一个。命令行SVG优化器(SVGO)

SVGO是一个基于NodeJS的工具，它通过命令行运行，包含大量的函数。它可以清理属性、删除注释、删除元数据、将颜色从一种字符串格式转换为另一种格式，甚至可以缩小SVG代码。

这是我选择的工具，使用起来就像调用svgo在你的档案里：

svgo foo.svg

b.基于Web的SVG优化器(彼得·科林里奇)

如果NodeJS和命令行不是您的问题，那么您肯定应该查看PeterCollingrid的基于web的SVG优化工具..它没有将所有的特性打包成SVGO，但不适合于更简单的文件。

包起来

我们河东做网站在本文中看到的只是对我们可用的SVG工具表面的一点了解。我是AdobeIlluStrator的长期用户，所以它是我选择的工具。SnapSVG也是我喜欢的SVG脚本库，在我看来SVGO是无与伦比的。但这并不意味着他们就是这群人的首选。这一切都取决于你的喜好，所以试一试，建立一个适合你的工作流程！