JavaScript SVG

Open-source JavaScript projects categorized as SVG

Top 23 JavaScript SVG Projects

  • GitHub repo three.js

    JavaScript 3D Library.

    Project mention: 3D Websites. | reddit.com/r/webdev | 2021-06-08

    Are you talking about 3D graphics? Look into WebGL. You could get started with a library like three.

  • GitHub repo anime.js

    JavaScript animation engine

    Project mention: 10 Best JavaScript Animation Libraries 🔥 | dev.to | 2021-06-07

    1. Anime.js

  • GitHub repo feather

    Simply beautiful open source icons

    Project mention: Creating a Vacation themed website using TailwindCSS | dev.to | 2021-06-08

    We’ll use the Raleway font-family and an icon set called Feathericons. We’ve also included our stylesheets and initialised Feathericons using the feather.replace() method right before the end of our body tag.

  • 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: Rethinking JavaScript Infrastructure | reddit.com/r/javascript | 2021-05-20

    Commit binary files that might not work on every platform (e.g. the Sharp NPM Package has bins for every platform - although this specific example is not frontend product code)

  • GitHub repo svgo

    ⚙️ Node.js tool for optimizing SVG files

    Project mention: The smallest SVG possible | dev.to | 2021-04-15

    At this point, I'd urge you to go one step further and optimise with SVGO or manually with SVGOMG — being sure not to melt the shape with precision settings.

  • GitHub repo shields

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

    Project mention: Hey dev people, I made an open source shield for your GitHub readme that shows your Discord username and presence! (link in the comments) | reddit.com/r/discordapp | 2021-06-14

    You should check the "Dynamic" section of the shields.io website. I don't really know about any tutorials, though it should be easy enough to use

  • GitHub repo Frappe Charts

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

  • 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: 21 Popular JavaScript Libraries Every Web Developer Should Know | dev.to | 2021-04-18

    Ah, here is something for the data analysts! Chartist is a nice JavaScript library for creating simple, responsive and customizable charts for your website. Chartist uses SVG to render them; hence, your charts can also obey custom CSS rules.

  • GitHub repo simple-icons

    SVG icons for popular brands

    Project mention: [pt-BR] REDAMEs DO GITHUB: IDEIAS... E DICAS | dev.to | 2021-06-01
  • GitHub repo apexcharts.js

    📊 Interactive JavaScript Charts built on SVG

    Project mention: Top 30 Open Source And Paid React Charts + Examples | dev.to | 2021-06-02

    A great example of an interactive area chart that goes with an open-source tool React-ApexCharts. It is a wrapper for the very popular JavaScript charting library ApexCharts with more than 10 k stars on GitHub.

  • GitHub repo tabler-icons

    A set of over 1250 free MIT-licensed high-quality SVG icons for you to use in your web projects.

  • 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: How long should it typically take to learn a new JS LIBRARY? Is 2 weeks too much? | reddit.com/r/learnjavascript | 2021-03-25

    Honestly if you're just doing charts there are libraries specifically for that which are much easier to use and might fit your needs a lot better- C3.js is even built on top of D3. D3 really shines when you need to do a complex visualisation outside of standard use cases like charts.

  • GitHub repo svg.js

    The lightweight library for manipulating and animating SVG

    Project mention: Web Effect | dev.to | 2021-03-01

    Svg.js - The lightweight library for manipulating and animating SVG.

  • GitHub repo nivo

    nivo provides a rich set of dataviz components, built on top of the awesome d3 and Reactjs libraries

    Project mention: Top 30 Open Source And Paid React Charts + Examples | dev.to | 2021-06-02

    Nivo is a popular React charts library with full components for data visualization. It offers more than 50 types of charts with comprehensive documentation for every type. The number of stars on GitHub is 8.5 k.

  • GitHub repo svgr

    Transform SVGs into React components 🦁

    Project mention: svpug: Generate Pug mixins from SVG files | dev.to | 2021-05-11

    svpug is inspired by svgr which is the standard way of creating React components from SVGs.

  • GitHub repo dom-to-image

    Generates an image from a DOM node using HTML5 canvas

    Project mention: Download your d3.js Charts as SVG, PNG, PDF | reddit.com/r/d3js | 2021-04-11
  • 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 two.js

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

    Project mention: Web Effect | dev.to | 2021-03-01

    Two.js - A renderer agnostic two-dimensional drawing api for the web with animation support.

  • GitHub repo chart.xkcd

    xkcd styled chart lib

    Project mention: [OC] Time Series showing the percentage of changed headlines of the biggest german online newspapers for the last 3 Weeks. | reddit.com/r/dataisbeautiful | 2021-04-04

    Tools: nodejs for scraping and statistics, https://github.com/timqian/chart.xkcd for visualization!

  • GitHub repo octicons

    A scalable set of icons handcrafted with <3 by GitHub

    Project mention: The process behind creating a ruby gem | dev.to | 2021-03-16

    The first thing that I did was to look for other ruby gems that did something like this. I came across octicons by GitHub and liked how they implemented the gem.

  • GitHub repo rickshaw

    JavaScript toolkit for creating interactive real-time graphs

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-06-14.

Index

What are some of the best open-source SVG projects in JavaScript? This list will help you:

Project Stars
1 three.js 71,727
2 anime.js 39,566
3 feather 20,218
4 sharp 19,845
5 svgo 16,251
6 shields 14,365
7 Frappe Charts 13,901
8 SuperTinyIcons 12,798
9 chartist-js 12,593
10 simple-icons 10,945
11 apexcharts.js 10,403
12 tabler-icons 10,373
13 vega 9,236
14 c3 9,080
15 svg.js 8,874
16 nivo 8,838
17 svgr 7,681
18 dom-to-image 7,393
19 DOMPurify 7,211
20 two.js 7,167
21 chart.xkcd 6,814
22 octicons 6,778
23 rickshaw 6,497