526互联

史上最全SVG开源项目

发布时间 2023-12-18 21:41:55作者: 漫思

史上最全SVG开源项目

徐大大
徐大大
中文
 
3 人赞同了该文章

SVG（Scalable Vector Graphics）是一种矢量图形格式，它提供了一种可以在网络上高效描述矢量图形的方法，其标准最初由W3C制定，于1999年发布SVG规范1.0版本。

在HTML5之前，SVG只能作为插件运行在浏览器中，存在诸多的限制和安全问题。2014 年，SVG迎来了发展的重要时刻， W3C 正式宣布 HTML5 成为推荐标准，并决定将 SVG 整合到这个全新的 Web 标准中。这意味着浏览器制造商开始为 SVG提供原生支持，使得开发者可以更方便地使用 SVG 创造交互式、可扩展的 Web 内容和图形展示。

SVG和Canvas是当前Web端图形处理的两大主流技术，有着各自的优势和适用场景。Canvas 2D图形应用开发相关的开源项目详见另一篇文章《史上最全Canvas 2D 开源项目》。

SVG规范

SVG规范最新草案版本（ W3C Editor’s Draft 08 March 2023）

SVG规范推荐版本（W3C Candidate Recommendation 04 October 2018）

SVG GitHub 仓库

SVG图形应用开发相关的开源项目

1、 svgo

SVG文件压缩和优化。

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

Git项目地址

Demo地址

2、 svgedit

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

Powerful SVG-Editor for your browser。

Git项目地址

Demo地址

3、 Snap.svg

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

The JavaScript library for modern SVG graphics.

Git项目地址

Demo地址

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项目地址

Demo地址

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项目地址

Demo地址

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项目地址

Demo地址

7、 Font Awesome

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

The iconic SVG, font, and CSS toolkit

Git项目地址

Demo地址

8、 svg2png

把SVG转成PNG图片。

Converts SVGs to PNGs, using PhantomJS。

Git项目地址

9、 Inkscape

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

Git项目地址

下载地址

www.inkscape.org/

10、MDN SVG Document

目前为止全球最全面、最系统的SVG开发指引，包含入门（Tutorials）、参考（Reference）和指南（Guides）。MDN 提供多语言版本的SVG对象模型和API详细说明，并特别指出浏览器厂商对API的支持情况。

MDN SVG Document地址