史上最全SVG开源项目

1,216 阅读2分钟

SVG(Scalable Vector Graphics,可缩放矢量图形)是基于XML、用于描述二维矢量图形的一种图形格式。SVG由W3C制定,是一个开放标准。

下面列举SVG图形应用开发中可能用到相关的开源项目。

1、 svgo

SVG文件压缩和优化。

SVGO, short for SVG Optimizer, is a Node.js library and command-line application for optimizing SVG files.

Git项目地址

github.com/svg/svgo

Demo地址

svgo.dev/docs/plugin…

2、 svgedit

基于浏览器的SVG图形编辑工具

Powerful SVG-Editor for your browser。

Git项目地址

github.com/SVG-Edit/sv…

Demo地址

svgedit.netlify.app/editor/inde…

3、 Snap.svg

Snap.svg 提供强大且直观的SVG动画内容操纵API,支持屏蔽、裁剪、全梯度和组别等使得内容更具吸引力和交互性的功能。

The JavaScript library for modern SVG graphics.

Git项目地址

github.com/adobe-webpl…

Demo地址

snapsvg.io/start/

snapsvg.io/docs/

4、 svg.js

SVG.js 是一个轻量级的 JavaScript 库,用于创建和操作 SVG 图形。它提供了一组简单易用的 API,使得开发者可以轻松创建各种形状、路径、文本、动画等 SVG 元素,而无需深入了解 SVG 的细节和DOM native API。

A lightweight library for manipulating and animating SVG, without any dependencies.

Git项目地址

github.com/svgdotjs/sv…

Demo地址

svgjs.dev/docs/3.0/

5、 HuayouJS

HuayouJS增强了原生SVG所不提供的整体平移(pan)、缩放(zoom)和分层(layer)等功能。与Snap和svg.js等产品思路显著不同,HuayouJS选择原生方案,支持开发者使用SVG原生对象模型和API开发应用。

HuayouJS is a 2D graphics library based on SVG,which provides Pan, Zoom, and Layer management functions.

Git项目地址

github.com/HuayouJS/hu…

Demo地址

huayoujs.github.io/huayou/exam…

huayoujs.github.io/huayou/exam…

6、 svgr

svgr是一个将SVG转换为React组件的工具。

SVGR is an universal tool to transform SVG into React components.

SVGR takes a raw SVG and transforms it into a ready-to-use React component.

Git项目地址

github.com/gregberge/s…

Demo地址

react-svgr.com/

react-svgr.com/docs/gettin…

7、 Font Awesome

一套绝佳的图标字体库和CSS框架。

The iconic SVG, font, and CSS toolkit

Git项目地址

github.com/FortAwesome…

Demo地址

fontawesome.com/docs

8、 svg2png

SVG 转成 PNG 图片。

Converts SVGs to PNGs, using PhantomJS

Git项目地址

github.com/domenic/svg…

9、 Inkscape

Inkscape 是一款功能强大的开源矢量图形编辑软件。作为一个跨平台的桌面图形编辑工具,它提供了丰富的绘图和设计功能,可用于创建精美的插图、图标、徽标等各种矢量图形。Inkscape 支持 SVG 格式,并提供了丰富的绘图工具、路径编辑、渐变、滤镜等功能。

Git项目地址

github.com/inkscape/in…

下载地址

www.inkscape.org/**