Top 23 JavaScript SVG Projects
-
Are you talking about 3D graphics? Look into WebGL. You could get started with a library like three.
-
1. Anime.js
-
Scout APM
Scout APM - Leading-edge performance monitoring starting at $39/month. 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.
-
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.
-
sharp
High performance Node.js image processing, the fastest module to resize JPEG, PNG, WebP, AVIF and TIFF images. Uses the libvips library.
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)
-
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.
-
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
-
-
SaaSHub
SaaSHub - Software Alternatives and Reviews. SaaSHub helps you find the best software and product alternatives
-
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
-
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.
-
-
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.
-
tabler-icons
A set of over 1250 free MIT-licensed high-quality SVG icons for you to use in your web projects.
-
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.
-
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.
-
Svg.js - The lightweight library for manipulating and animating SVG.
-
nivo
nivo provides a rich set of dataviz components, built on top of the awesome d3 and Reactjs libraries
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.
-
svpug is inspired by svgr which is the standard way of creating React components from SVGs.
-
-
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.
-
Two.js - A renderer agnostic two-dimensional drawing api for the web with animation support.
-
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!
-
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.
-
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 |