JavaScript SVG

Open-source JavaScript projects categorized as SVG

Top 23 JavaScript SVG Projects

  • GitHub repo three.js

    JavaScript 3D library.

    Project mention: Recreating a classic starfield in GLSL & three.js | dev.to | 2021-02-21

    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!

  • GitHub repo anime.js

    JavaScript animation engine

    Project mention: Question about an animated 3D render moving on scroll + click | reddit.com/r/webflow | 2021-02-21

    I 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.

  • GitHub repo feather

    Simply beautiful open source icons

    Project mention: [Theme] Layers | reddit.com/r/androidthemes | 2021-02-21

    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

  • GitHub repo sharp

    High performance Node.js image processing, the fastest module to resize JPEG, PNG, WebP, AVIF and TIFF images. Uses the libvips library.

    Project mention: Setup Macbook M1 for Web and React Native development | dev.to | 2021-01-25

    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.

  • GitHub repo Mo.js

    The motion graphics toolbelt for the web

  • GitHub repo 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-16

    svgo to optimize the SVG, a lot.

  • GitHub repo Frappe Charts

    Simple, responsive, modern SVG Charts with zero dependencies (by frappe)

  • GitHub repo shields

    Concise, consistent, and legible badges in SVG and raster format

    Project mention: [Sway] Assassin Inkling | reddit.com/r/unixporn | 2021-02-20

    image-link.png is generate using shields.io.

  • GitHub repo SuperTinyIcons

    Under 1KB each! Super Tiny Icons are miniscule SVG versions of your favourite website and app logos

    Project mention: Always Bet on Text | news.ycombinator.com | 2021-02-17

    It's probably not the only removable part, the icon can be 414 bytes: https://github.com/edent/SuperTinyIcons#how-small

  • GitHub repo chartist-js

    Simple responsive charts

    Project mention: Understanding front-end data visualization tools ecosystem in 2021 📊📈 | dev.to | 2021-02-18

    Chartist.js

  • GitHub repo vega

    A visualization grammar.

    Project mention: Why Is Esbuild Fast? | news.ycombinator.com | 2021-02-16

    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.

  • GitHub repo c3

    :bar_chart: A D3-based reusable chart library

    Project mention: 10 Years of Open-Source Visualization – D3.js | news.ycombinator.com | 2021-02-23
  • GitHub repo svg.js

    The lightweight library for manipulating and animating SVG

  • GitHub repo svgr

    Transform SVGs into React components 🦁

    Project mention: How I Built My Personal Website | dev.to | 2021-01-22

    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:

  • GitHub repo dom-to-image

    Generates an image from a DOM node using HTML5 canvas

    Project mention: Building a local running tracker | dev.to | 2021-01-27

    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:

  • GitHub repo two.js

    A renderer agnostic two-dimensional drawing api for the web.

  • GitHub repo 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:

    Project mention: Sending Contact Form Messages to Your Email Inbox | dev.to | 2021-02-21

    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.

  • GitHub repo 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
  • GitHub repo rickshaw

    JavaScript toolkit for creating interactive real-time graphs

  • GitHub repo imagemin

    Minify images seamlessly

  • GitHub repo sqip

    "SQIP" (pronounced \skwɪb\ like the non-magical folk of magical descent) is a SVG-based LQIP technique.

    Project mention: 🔥 Native lazy loading is here! | reddit.com/r/web_design | 2021-01-18

    Alright, so SQIP generates an SVG from an image, see here and here.

  • GitHub repo react-simple-maps

    Beautiful React SVG maps with d3-geo and topojson using a declarative api.

  • GitHub repo react-designer

    It's not art

NOTE: The open source projects on this list are ordered by number of github stars. The number of mentions indicates repo mentiontions in the last 12 Months or since we started tracking (Dec 2020). The latest post mention was on 2021-02-23.

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