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

2019.06.03 河东做网站

72

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是无与伦比的。但这并不意味着他们就是这群人的首选。这一切都取决于你的喜好,所以试一试,建立一个适合你的工作流程!

值得提及

以下是一些其他值得提及的地方,我知道,但由于缺乏知识,在本文中没有写过。你自己试试吧!

  • Inkscape

    -为Windows、MacOSX和Linux提供免费和开放源码的专业矢量图形编辑器。
  • SVG JS

    -一个用于操作和动画SVG的轻量级库。
  • JSX图

    -JSXGraphs是一个跨浏览器库,用于在Web浏览器中进行交互几何、功能绘图、图表绘制和数据可视化。


最新案例

寒枫总监

来电咨询

18868949445

微信咨询

寒枫总监

TOP