JavaScript SVG

Open-source JavaScript projects categorized as SVG

Top 23 JavaScript SVG Projects

  • d3

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

    Project mention: [E] I'd like to learn how to make high-quality interactive visualizations to explain statistical topics. (See example in post) | reddit.com/r/statistics | 2023-01-18

    This is the source code for the distill pub you linked to: https://github.com/distillpub/post--visual-exploration-gaussian-processes. I dug through the code a little and believe most of the interactive visuals were created with d3.js. That's certainly 1 of the options you can use to recreate the same type of visuals. d3 is incredibly powerful (it's the tool professional news organisations use for their visualisations) but also rather complex. If you are new to Javascript in general, it might not be the most practical choice.

  • three.js

    JavaScript 3D Library.

    Project mention: does anyone know how are these cool web design effects and designs made? | reddit.com/r/web_design | 2023-02-01
  • Appwrite

    Appwrite - The Open Source Firebase alternative introduces iOS support . Appwrite is an open source backend server that helps you build native iOS applications much faster with realtime APIs for authentication, databases, files storage, cloud functions and much more!

  • anime.js

    JavaScript animation engine

    Project mention: How to create a Youtube Studio like confetti ? Is this possible using just css? | reddit.com/r/css | 2023-01-15

    mo.js or anime.js are both really great libraries to do these types of animations with—they have really smooth, performant animation

  • 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: Crop and Upload Image Service | dev.to | 2023-01-17
  • feather

    Simply beautiful open source icons

    Project mention: Top 12 Icon Libraries 🔝 | dev.to | 2023-01-12

    1️⃣Freepik 2️⃣Glyphis 3️⃣Font Awesome 4️⃣Smashicons 5️⃣Iconfinder 6️⃣Shape so 7️⃣Flaticon 8️⃣The Noun Project 9️⃣IcoMoon 1️⃣0️⃣Icons8 1️⃣1️⃣Iconmonstr 1️⃣2️⃣Feather Icons 1️⃣3️⃣Material Icons

  • shields

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

    Project mention: Shields.io: Twitter badges are broken now | news.ycombinator.com | 2023-01-21
  • svgo

    ⚙️ Node.js tool for optimizing SVG files

    Project mention: Ask HN: FOSS Projects Worth Donating To? | news.ycombinator.com | 2022-12-21

    Look at software you use and identify underlying libraries.

    SVGO https://github.com/svg/svgo is used by many graphics software but hasn't seen donations commensurate with usage https://opencollective.com/svgo

  • InfluxDB

    Build time-series-based applications quickly and at scale.. InfluxDB is the Time Series Platform where developers build real-time applications for analytics, IoT and cloud-native services. Easy to start, it is available in the cloud or on-premises.

  • simple-icons

    SVG icons for popular brands

    Project mention: 📢 Fairphone on endoflife.date | dev.to | 2023-02-01

    Fairphone Icon on https://simpleicons.org/

  • Frappe Charts

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

    Project mention: [Showoff Saturday] I made a thing that shows you your valorant match stats | reddit.com/r/webdev | 2023-01-28

    charts: https://frappe.io/charts

  • SuperTinyIcons

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

    Project mention: Seriously, Don’t Use Icon Fonts | reddit.com/r/typography | 2022-11-29
  • Snap.svg

    The JavaScript library for modern SVG graphics.

    Project mention: Best Websites For Coders | dev.to | 2023-01-25

    Snap SVG : The JavaScript SVG library for the modern web

  • apexcharts.js

    📊 Interactive JavaScript Charts built on SVG

    Project mention: Top 5+ useful ReactJS Plugins for 2023 | dev.to | 2023-01-09

    1. Apex Charts

  • 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: 3 Quick Tips for Input Validation | dev.to | 2023-01-22

    It's also important to sanitize user input to prevent the injection of malicious code. There are several libraries that can help you with this such as xss-clean, dompurify or santize-html.

  • vega

    A visualization grammar.

    Project mention: Launched my ADHD productivity app on product hunt - would love your support | reddit.com/r/ADHD_Programmers | 2022-11-12

    Eh, I have no reason to, and not much interest in PHP anymore. Things like Vega seem really cool.

  • svg.js

    The lightweight library for manipulating and animating SVG

    Project mention: [AskJS] Is there any javascript library that can perform boolean operations on svg paths (union, subtract, intersect, difference)? | reddit.com/r/javascript | 2022-07-28

    Thanks for the link to this great and useful library. It's really awesome, and I didn't know there was a node.js version. But it seems that it doesn't support boolean operations, or at least I haven't found it in the documentation. There is only the following github issue with no answer: https://github.com/svgdotjs/svg.js/issues/339 And a request for an intersection function that doesn't seem to be implemented: https://github.com/svgdotjs/svg.js/issues/1200 Maybe I'm missing something?

  • zdog

    Flat, round, designer-friendly pseudo-3D engine for canvas & SVG

    Project mention: Web Scraping GitHub Page | dev.to | 2022-09-27
  • c3

    :bar_chart: A D3-based reusable chart library

    Project mention: Is c3 js deprecated? and general thoughts of c3? | reddit.com/r/d3js | 2022-11-22

    Looking here: https://github.com/c3js/c3/issues/2831

  • dom-to-image

    Generates an image from a DOM node using HTML5 canvas

    Project mention: Exporting html dom elements as png in javascript | dev.to | 2022-07-01
  • two.js

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

    Project mention: Trying to build a front end interactive browser or app experience where touch to screen simulates a visual heat map. | reddit.com/r/webdev | 2022-11-25

    Javascript touch events paired with WebGL would be the route I’d go. There are some really great libraries for WebGL (twojs) or working with SVG (mojs) if you want to keep it simple

  • octicons

    A scalable set of icons handcrafted with <3 by GitHub

    Project mention: Font-Awesome for GitHub README.md | reddit.com/r/github | 2022-10-25

    You might like these as well: https://github.com/primer/octicons

  • chart.xkcd

    xkcd styled chart lib

  • jsplumb

    Visual connectivity for webapps

    Project mention: Library suggestions for creating unidirectional graphs or flowcharts. | reddit.com/r/reactjs | 2022-10-22

    Check out https://jsplumbtoolkit.com/

  • icons

    Official open source SVG icon library for Bootstrap.

    Project mention: Assets #1 - definitions | reddit.com/r/yii3 | 2023-01-13

    Now let’s define the asset for bootstrap5 Icons.

  • Sonar

    Write Clean JavaScript Code. Always.. Sonar helps you commit clean code every time. With over 300 unique rules to find JavaScript bugs, code smells & vulnerabilities, Sonar finds the issues while you focus on the work.

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 2023-02-01.

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 104,244
2 three.js 88,625
3 anime.js 44,289
4 sharp 24,382
5 feather 23,098
6 shields 18,979
7 svgo 18,836
8 simple-icons 14,897
9 Frappe Charts 14,620
10 SuperTinyIcons 13,785
11 Snap.svg 13,648
12 apexcharts.js 12,217
13 DOMPurify 10,338
14 vega 10,198
15 svg.js 10,063
16 zdog 9,515
17 c3 9,239
18 dom-to-image 9,162
19 two.js 7,929
20 octicons 7,633
21 chart.xkcd 7,341
22 jsplumb 7,289
23 icons 6,561
Write Clean JavaScript Code. Always.
Sonar helps you commit clean code every time. With over 300 unique rules to find JavaScript bugs, code smells & vulnerabilities, Sonar finds the issues while you focus on the work.
www.sonarsource.com