UDN 企业互联网技术社区 U视野 20 个强大图象处理功能的 SVG 工具

20 个强大图象处理功能的 SVG 工具

佚名 oschina 2015-8-20 09:30
分享到:
摘要: SVG现正在Web设计领域变得越发流行,你可以使用Illustrator或者Inkscape来创建SVG图像。但当进行Web设计时,我们还需要做一些优化来使得SVG变得更加轻量。下面介绍的20个工具,可以帮助你快速有效的创建SVG图像 ... ...
      SVG现正在Web设计领域变得越发流行,你可以使用Illustrator或者Inkscape来创建SVG图像。但当进行Web设计时,我们还需要做一些优化来使得SVG变得更加轻量。

  下面介绍的20个工具,可以帮助你快速有效的创建SVG图像。现有的在线工具已经可以帮助我们进行优化、转换、新建模式等工作。

  更详细的介绍,参见:HowToCreateSVGAnimationUsingCSS

  交互式SVG坐标系统

  设计SVG,离不开它的坐标系统。这是一个由SaraSouiden编写的超赞的交互工具,可以帮助你理解SVG坐标系统是怎么一回事。使用SVG的viewBox和preserveAspectRatio,也就是下图所示的粉色线和橙色线,以及旁边的标尺,你可以在折腾的过程中学习到SVG坐标是如何工作的。




  b64

  b64是一个通过将图像格式转换为base64来进行优化的小工具。你可以直接把你的SVG图像(或者JPG和PNG也行)扔进去,然后直接把结果作为CSS弄到你的网站上就行了。



  SVGO

  默认的SVG包含了许多可删除的不必要的信息,删除这些东西不会影响图像本身。如果你想删除关于编辑器元数据、注释或者隐藏的节点,你可以用SVGO。

  你可以通过npm来安装SVGO

  $[sudo]npminstall-gsvgo

  也可以使用GUI版本,这样你就可以愉快的拖拖拖了。

  SVGOMG

  SVGOMG将SVGO的命令行包装成了一个带GUI的版本,你可以简单的通过点点按钮来打开和关闭特性,最后你导出一下图片或者代码就行了。


  SVGNow

  当你工作在Illustrator上时,输出的SVG包含许多并不需要的信息。使用这个工具你可以从你的Illustrator右边得到优化版本的导出SVG。这个工具在面板上添加了一些优化SVG选项。你可以从CreativeCloudAdd-onspage取得SVGNow。



  SVGtoPNGconverter

  想要把输出的SVG文件转换成PNG格式?不用打开类似Illustrator这样的应用就能做?使用这个SVG到PNG转换工具可以得到PNG格式的输出图像,并且如果你需要的话还能得到PNG的Base64数据URI。

  


  SVGCircus

  如果你认为加载动画很酷,那么现在你可以通过SVGCircus来简单地处理SVG。这个工具可以让你制作自己的加载器,旋转器,或者任何类似的循环动画。设置‘角色’,位置,尺寸,颜色和其他形式的面板,之后输出就可以得到结果。



  SVGSprite

  SVGSprite是一个Node.js模块,可以优化一大堆SVG文件,并烤制成SVGsprite-types,带有传统的背景CSSsprites或者前景图片,SVGstacks以及其他的。

  Quasi

  使用quasi,你可以生成如下看到的Quasicrystal图片。这个生成器只是试验性的,但是结果却是很酷。你可以通过改变选项值试用一下,然后使用’SaveSVG’按钮下载下来。



  PlainPattern

  使用SVG创图案从来就不是简单而很有趣的事情。上传你的图片,按比例缩小或改变间隔,旋转和重新着色,直到你得到一个漂亮的图案。你可以在下载之前预览结果。



  TrianglifyGenerator

  使用Trianglify生成器创建漂亮的SVG几何图案。你可以随意/变化设置颜色,粒度大小并选择一个颜色调色板来配合使用。这个工具是Trianglify的GUI版本。



  SVGGradient

  你知道你可以使用CSS来制作渐变但是你知道你也可以使用SVG做到相同的效果吗?使用SVG产生渐变最简单的方式是使用这个工具。只需要输入开始和停止颜色,然后就可以获得产生效果的代码了。CSS的后退也有包括。



  ExportPSDtoSVG

  如果你使用Photoshop作为你作品的图片编辑器,有时候你可以需要在Photoshop的workspace里边转换你的设计成SVG,在Photoshop中有一个不支持的格式。下载脚本到这个工具里边,然后复制到AdobePhotosho/presets/scripts文件夹里边。

  用SVG扩展名重命名一个矢量层名字(e.g.layer1变成layer1.svg),你现在可以从File>Scripts>PStoSVG来运行脚本了。

  SVGFilters

  你知道使用SVG可以对图片添加效果吗?例如色度,饱和度,模糊度,线性颜色叠加和其他效果。这是一款可以显现这些效果的工具,然后给你一个小片段使得它容易被嵌入效果到你的项目中。


  SVGMorpheous

  SVGMorpheous是一个JavaScript库,允许你从一个形状到另一个形状改变一个SVG图标。你可以设置宽松效果,过度动画的持续时间,以及旋转的方向。



  Clippathgenerator

  SVG允许你单击图片形状修剪。如果形状在一个方形或者圆形里边,就相当简单。但是假设形状是一个带有很多店或者多边形的呢?这就是你需要找个ClipPathGenerator工具了。



  Chartist.js

  Chartist.js一个创建高可定制化响应式图表的库。它利用SVG来显示图表,也可以使用SMIL动画。使用这个库,你可以创建线性图表,饼图,直方图和其他类型的图表,甚至可以跟图表添加动画。

  SVGstrokedashgenerator

  这是一个使用SVGstroke-dasharray生成虚线的简单工具。首先选择从列表中选择一个虚线类型,然后在宽度,高度,旋转或颜色方便自定义虚线。然后你可以攫取HTML代码和CSS应用这条虚线到你的项目中。

 


  MethodDraw:ASimpleSVGEditor

  Methoddraw是一个基于web的SVG编辑器,带有一个两边伴有工具的画布的直观的界面。你可以画线条,形状,输入文本或者使用内置的形状,然后编辑绘画兑现的属性。使用SVG格式导出图像(也可以变成SVGbase64格式)或者直接使用PNG保存。



  ExportFlashtoanimatedSVG

  尽管它不在流行了,但是有时候你很难放弃Flash。如果是这样,你可以让你的flash动画变成SVG与更新的技术保持协调工作。这个工具塑造了Flash应用程序的扩展形式,可以和CS5,CS5和CC一起工作。

  当它变成Shapes,BitmapsSymbols,ClassicMotionTweens,Shapetweens,你可以将它导出到SVG(对另一些人来说,成功是有议可争的)。

相关阅读

分享到:
已有3条评论

最新评论

gxxf
涛声依旧
好东西
倾心遁世
很强大

一周焦点

    关注我们:
    关于我们
    联系我们
    • 电话:4006-815-456
    • 邮件:udn@yonyou.com
    • 地址:北京市海淀区北清路68号
    移动客户端下载
    关注我们
    • 微信公众号:yonyouudn
    • 扫描右侧二维码关注我们
    • 专注企业互联网的技术社区
    版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
    返回顶部