Top 23 JavaScript SVG Projects
-
three.js
JavaScript 3D library.
A starfield was one of the first things I built when learning to program. It's been quite some time now, and I've started learning shader programming with GLSL and three.js, so I decided why not go back to where it all started!
-
anime.js
JavaScript animation engine
Project mention: Question about an animated 3D render moving on scroll + click | reddit.com/r/webflow | 2021-02-21I feel what you want because I want things like that too. However this cannot be done in Webflow. I'm sure this requires more than some Webflow and casual web knowledge. Recently I found this website that can help creating complex animations, but for me this seems too complicated. 3D is a cool thing, but making it interactive and working on a website is less cool:D Some more resources in connection with 3D: Spline and Vectary.
-
Scout
Get performance insights in less than 4 minutes. Scout APM uses tracing logic that ties bottlenecks to source code so you know the exact line of code causing performance issues and can get back to building a great product faster.
-
feather
Simply beautiful open source icons
These are Feather Icons, great open source pack and the icons are actually .svg files (applied via Image not FontIcon) 😉 Forgot to mention about it in the descrpition but I'm gonna fix that now
-
sharp
High performance Node.js image processing, the fastest module to resize JPEG, PNG, WebP, AVIF and TIFF images. Uses the libvips library.
If you have a side project that uses GatsbyJS, chances are you are going to face the issue https://github.com/lovell/sharp/issues/2460. Gatsby uses a C based library called Sharp that needs to be compiled under the ARM architecture. It did not work for me and the only way I could solve was to install vips formulae from Homebrew as mentioned in the GitHub issue itself.
-
Mo.js
The motion graphics toolbelt for the web
-
svgo
:tiger: Node.js tool for optimizing SVG files
Project mention: A tool to convert SVG into React 17 / TypeScript components + Ion Icons | dev.to | 2021-02-16svgo to optimize the SVG, a lot.
-
Frappe Charts
Simple, responsive, modern SVG Charts with zero dependencies (by frappe)
-
shields
Concise, consistent, and legible badges in SVG and raster format
image-link.png is generate using shields.io.
-
SuperTinyIcons
Under 1KB each! Super Tiny Icons are miniscule SVG versions of your favourite website and app logos
It's probably not the only removable part, the icon can be 414 bytes: https://github.com/edent/SuperTinyIcons#how-small
-
chartist-js
Simple responsive charts
Project mention: Understanding front-end data visualization tools ecosystem in 2021 📊📈 | dev.to | 2021-02-18Chartist.js
-
vega
A visualization grammar.
For Vega, I would just use the pre-built minified ES5 version: https://github.com/vega/vega#es5-support
Access it via a global variable.
-
c3
:bar_chart: A D3-based reusable chart library
-
svg.js
The lightweight library for manipulating and animating SVG
-
svgr
Transform SVGs into React components 🦁
I'm using SVGR to transform my SVG files into React components, rather than loading them via . This means my SVGs will be loaded with the markup, rather than being loaded asynchronously, which can help eliminate Cumulative Layout Shift (CLS) issues. It's as simple as customizing your next.config.js file to use the @svgr/webpack loader for *.svg file types, then importing them in your components, a la:
-
dom-to-image
Generates an image from a DOM node using HTML5 canvas
Something I thought would be pretty cool is the ability to generate (and download) an image of one's progress. I've dabbled a bit with generating images with Java on the server side, but never in a client-side app. My searching led me to find dom-to-image, which has options for exporting to a JPEG, a PNG, or even a blob (not the killer kind; a "blob" is raw file data, which can be read or processed as you wish). Combined with another library to make saving files easier, exporting the image is done easily:
-
two.js
A renderer agnostic two-dimensional drawing api for the web.
-
DOMPurify
DOMPurify - a DOM-only, super-fast, uber-tolerant XSS sanitizer for HTML, MathML and SVG. DOMPurify works with a secure default, but offers a lot of configurability and hooks. Demo:
Since we are dealing with user input sanitizing it is a good security practice, you can set up any user input sanitizing method you are familiar with, a good start can be DOMPurify.
-
octicons
A scalable set of icons handcrafted with <3 by GitHub
Project mention: Is there a collection of Git icons available anywhere? | reddit.com/r/git | 2020-12-30 -
rickshaw
JavaScript toolkit for creating interactive real-time graphs
-
imagemin
Minify images seamlessly
-
sqip
"SQIP" (pronounced \skwɪb\ like the non-magical folk of magical descent) is a SVG-based LQIP technique.
Alright, so SQIP generates an SVG from an image, see here and here.
-
react-simple-maps
Beautiful React SVG maps with d3-geo and topojson using a declarative api.
-
react-designer
It's not art
Index
What are some of the best open-source SVG projects in JavaScript? This list will help you:
Project | Stars | |
---|---|---|
1 | three.js | 67,797 |
2 | anime.js | 38,342 |
3 | feather | 19,631 |
4 | sharp | 18,997 |
5 | Mo.js | 16,510 |
6 | svgo | 15,615 |
7 | Frappe Charts | 13,780 |
8 | shields | 13,482 |
9 | SuperTinyIcons | 12,550 |
10 | chartist-js | 12,464 |
11 | vega | 9,015 |
12 | c3 | 9,003 |
13 | svg.js | 8,630 |
14 | svgr | 7,315 |
15 | dom-to-image | 7,045 |
16 | two.js | 7,013 |
17 | DOMPurify | 6,672 |
18 | octicons | 6,571 |
19 | rickshaw | 6,484 |
20 | imagemin | 4,567 |
21 | sqip | 2,981 |
22 | react-simple-maps | 2,190 |
23 | react-designer | 1,639 |