JavaScript SVG

Open-source JavaScript projects categorized as SVG | Edit details

Top 23 JavaScript SVG Projects

  • d3

    Bring data to life with SVG, Canvas and HTML. :bar_chart::chart_with_upwards_trend::tada:

    Project mention: Drawing on Canvas in Svelte | reddit.com/r/sveltejs | 2022-01-19
  • three.js

    JavaScript 3D Library.

    Project mention: Which technologies were used to make this website? | reddit.com/r/webdev | 2022-01-23

    Most of that file is three.js and greensock, Both quite popular for web animations. Uses WebGL rendered to a . You can see a canvas element covering the background just before the closing body tag in the DOM.

  • SonarQube

    Static code analysis for 29 languages.. Your projects are multi-language. So is SonarQube analysis. Find Bugs, Vulnerabilities, Security Hotspots, and Code Smells so you can release quality code every time. Get started analyzing your projects today for free.

  • anime.js

    JavaScript animation engine

    Project mention: Hey there Redditors! Can you guys tell me how to do this sort of animation on a website. I am fluent with Adobe After Effects and other design tools but don't know how websites are animated | reddit.com/r/Frontend | 2022-01-16

    Another interesting library is Animejs. But yeah, you need to know JavaScript in order to use these libraries.

  • 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: Best Practices for Website Image Creation/Storage? | reddit.com/r/webdev | 2022-01-14

    I just used commander to build a simple CLI, you might need a shebang to make it executable on your OS but it was easy to google that, and then used sharp to do all the image processing.

  • feather

    Simply beautiful open source icons

    Project mention: Ajout d'icônes SVG à mon Wordle français | dev.to | 2022-01-16

    Feather – Simply beautiful open source icons

  • svgo

    ⚙️ Node.js tool for optimizing SVG files

    Project mention: Image Optimizer | dev.to | 2021-12-09

    SVGO

  • shields

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

    Project mention: 12 ways to get more GitHub stars for your open-source project | dev.to | 2022-01-16

    Readme is the first thing that a visitor to your repository sees. The readme should be able to convey what your project does, how to install the project, how to deploy the project ( if applicable ), how to contribute and how it works. Also, use badges that are helpful for the developers. We used https://shields.io/ for adding badges to our Readme.

  • OPS

    OPS - Build and Run Open Source Unikernels. Quickly and easily build and deploy open source unikernels in tens of seconds. Deploy in any language to any cloud.

  • Frappe Charts

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

  • Snap.svg

    The JavaScript library for modern SVG graphics.

    Project mention: Create SVG from Javascript | dev.to | 2021-12-13

    SNAP SVG

  • SuperTinyIcons

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

    Project mention: 100 design resources for developers | dev.to | 2021-11-26

    Super Tiny Icons

  • chartist-js

    Simple responsive charts

    Project mention: Blazor Data Visualization Tools - Vector Map and Charts | reddit.com/r/Blazor | 2021-12-01

    For anyone interested or looking for a charting/vector map tool for Blazor, my organisation has developed and open sourced some packages that sit on top of a couple excellent JS libraries that handle these needs beautifully, Chartist.JS and JQuery Mapael. They are available in the nuget repository, source links below:

  • simple-icons

    SVG icons for popular brands

    Project mention: Debutur | dev.to | 2022-01-13

    Simple Icons

  • apexcharts.js

    📊 Interactive JavaScript Charts built on SVG

    Project mention: Apexcharts – Modern and Interactive Open-Source Charts | reddit.com/r/CKsTechNews | 2022-01-20
  • tabler-icons

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

    Project mention: 100 design resources for developers | dev.to | 2021-11-26

    Tabler Icons

  • vega

    A visualization grammar.

    Project mention: Deneb: Declarative Visualization in Power BI | reddit.com/r/PowerBI | 2021-11-24

    As such, I've been obsessed with the Vega and Vega-Lite languages for a long time. These use JSON rather than full-blown code, and allow you to build a visual from the ground-up using a grammar of graphics, much like ggplot2 in R or Altair in Python (which is actually an implementation of Vega/Vega-Lite).

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

  • c3

    :bar_chart: A D3-based reusable chart library

    Project mention: [OC] I spent the last 18 months of lockdown pouring my soul into a website that allows you to visualize virtually every U.S. company's international supply chain. E.g. What products, how much, which factories and where does Walmart import from? (Just type a company in the search box) | reddit.com/r/dataisbeautiful | 2022-01-18

    C3.js is actually something that I like to use on top of D3, specifically for POC's and things like that. It wraps the D3 code in something a little more semantic, provides an API for updating the chart/data, and makes the UI easier to style after the chart is generated. Purely a preference thing, but might be useful in some cases.

  • 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: How to allow custom entered HTML in item description, but make sure no JS gets entered? | reddit.com/r/webdev | 2022-01-02

    You can use an input sanitizer. I'd use something like DOMPurify if you don't want to write the sanitizer yourself. But yeah you should not allow or remove a certain tags like script and img.

  • dom-to-image

    Generates an image from a DOM node using HTML5 canvas

    Project mention: I created a chrome extension which allows you to see real-time stock data, directly on Twitter, by hovering over stock cashtags | reddit.com/r/SideProject | 2021-12-26

    Hey! The library used to convert the HTML to an image is https://github.com/tsayen/dom-to-image

  • two.js

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

    Project mention: [AskJS] What is the best canvas library to make an app like figma or integromat? | reddit.com/r/javascript | 2021-08-29
  • octicons

    A scalable set of icons handcrafted with <3 by GitHub

    Project mention: Implementing Dark Mode (Part 2) | dev.to | 2021-12-09

    Another implementation detail was related to coloring of images. Open Sauced makes use of many SVG images, of differing flavors. In the cases where SVG files are in the static assets of Open Sauced (e.g. ), the coloring of these is controlled using the filter CSS property. On the other hand, we also make use of @primer/octicons-react.

  • chart.xkcd

    xkcd styled chart lib

    Project mention: Rough.js – Create graphics with a hand-drawn, sketchy, appearance | news.ycombinator.com | 2021-12-14

    This looks like a wonderful library! I'm wondering how a handwritten font could fit into this api, a font like in https://github.com/timqian/chart.xkcd

  • jsplumb

    Visual connectivity for webapps

    Project mention: Is there any node graph library for svelte? | reddit.com/r/sveltejs | 2021-12-22

    Amazing!!! I am looking specifically for something like react flow as well. After looking into it the best option might be jsplumb.

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 2022-01-23.

JavaScript SVG related posts

Index

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

Project Stars
1 d3 100,086
2 three.js 77,896
3 anime.js 41,344
4 sharp 21,359
5 feather 21,163
6 svgo 17,190
7 shields 15,941
8 Frappe Charts 14,137
9 Snap.svg 13,375
10 SuperTinyIcons 13,248
11 chartist-js 12,748
12 simple-icons 12,314
13 apexcharts.js 11,082
14 tabler-icons 10,991
15 vega 9,618
16 svg.js 9,407
17 c3 9,169
18 DOMPurify 8,305
19 dom-to-image 8,124
20 two.js 7,506
21 octicons 7,090
22 chart.xkcd 7,006
23 jsplumb 6,807
Find remote jobs at our new job board 99remotejobs.com. There are 30 new remote jobs listed recently.
Are you hiring? Post a new remote job listing for free.
Less time debugging, more time building
Scout APM allows you to find and fix performance issues with no hassle. Now with error monitoring and external services monitoring, Scout is a developer's best friend when it comes to application development.
scoutapm.com