Description
SVG is an excellent way to create interactive, resolution-independent vector graphics that will look great on any size screen. And the Snap.svg JavaScript library makes working with your SVG assets as easy as jQuery makes working with the DOM.
Snap.svg is designed for modern browsers and therefore supports the newest SVG features like masking, clipping, patterns, full gradients, groups, and more.
Snap was written entirely from scratch by the author of Raphaël (Dmitry Baranovskiy), and is designed specifically for modern browsers (IE9 and up, Safari, Chrome, Firefox, and Opera)
Snap.svg alternatives and similar libraries
Based on the "Data Visualization" category.
Alternatively, view Snap.svg alternatives based on common mentions on social networks and blogs.
-
echarts
Apache ECharts is a powerful, interactive charting and data visualization library for browser -
BabylonJS
Babylon.js is a powerful, beautiful, simple, and open game and rendering engine packed into a friendly JavaScript framework. -
p5.js
p5.js is a client-side JS platform that empowers artists, designers, students, and anyone to learn to code and express themselves creatively on the web. It is based on the core principles of Processing. http://twitter.com/p5xjs — -
#<Sawyer::Resource:0x00007f1b609038f0>
Open-source JavaScript charting library behind Plotly and Dash -
paper.js
The Swiss Army Knife of Vector Graphics Scripting – Scriptographer ported to JavaScript and the browser, using HTML5 Canvas. Created by @lehni & @puckey -
GoJS, a JavaScript Library for HTML Diagrams
JavaScript diagramming library for interactive flowcharts, org charts, design tools, planning tools, visual languages. -
mxGraph
DISCONTINUED. Diagramming library that enables interactive graph and charting applications to be quickly created that run natively in any major browser that is supported by its vendor. -
processing.js
DISCONTINUED. Processing.js makes your data visualizations work using web standards and without any plug-ins -
jquery.sparkline
A plugin for the jQuery javascript library to generate small sparkline charts directly in the browser
CodeRabbit: AI Code Reviews for Developers
* Code Quality Rankings and insights are calculated and provided by Lumnify.
They vary from L1 to L5 with "L5" being the highest.
Do you think we are missing an alternative of Snap.svg or a related project?
Popular Comparisons
README
Snap.svg ·
A JavaScript SVG library for the modern web. Learn more at snapsvg.io.
Install
- Bower -
bower install snap.svg
- npm -
npm install snapsvg
- Manual Minified - https://github.com/adobe-webplatform/Snap.svg/raw/master/dist/snap.svg-min.js
- Manual Unminified - https://raw.githubusercontent.com/adobe-webplatform/Snap.svg/master/dist/snap.svg.js
Learn
Use
In your HTML file, load simply by:
<script src="snap.svg-min.js"></script>
No other scripts are needed. Both the minified and uncompressed (for development) versions are in the /dist
folder.
webpack
To load with webpack 2.x and 3.x, install Imports Loader (npm i -D imports-loader
), and add the following to your webpack config:
module: {
rules: [
{
test: require.resolve('snapsvg/dist/snap.svg.js'),
use: 'imports-loader?this=>window,fix=>module.exports=0',
},
],
},
resolve: {
alias: {
snapsvg: 'snapsvg/dist/snap.svg.js',
},
},
Then, in any module you’d like to require Snap, use:
import Snap from 'snapsvg';
Build
Snap.svg uses Grunt to build.
- Open the terminal from the Snap.svg directory:
sh cd Snap.svg
Install its command line interface (CLI) globally:
npm install -g grunt-cli
*You might need to use
sudo npm
, depending on your configuration.Install dependencies with npm:
npm install
*Snap.svg uses Grunt 0.4.0. You might want to read more on their website if you haven’t upgraded since a lot has changed.
To build the files run
grunt
The results will be built into the
dist
folder.Alternatively type
grunt watch
to have the build run automatically when you make changes to source files.
Testing
Tests are located in test
folder. To run tests, simply open test.html
in there. Automatic tests use PhantomJS to scrap this file, so you can use it as a reference.
Alternatively, install PhantomJS and run command
grunt test
Contribute
- Fill out the CLA.
- Fork the repo.
- Create a branch:
sh git checkout -b my_branch
- Add your changes.
- Check that tests are passing
- Commit your changes:
sh git commit -am "Added some awesome stuff"
- Push your branch:
sh git push origin my_branch
- Make a pull request to
dev
(!) branch.
Note: Pull requests to other branches than dev
or without filled CLA wouldn’t be accepted.
*Note that all licence references and agreements mentioned in the Snap.svg README section above
are relevant to that project's source code only.