adobe-webplatform/snap.svg

★ 14,011JavaScriptAudience · developerComplexity · 2/5Setup · easy

Mindmap

mindmap
  root((Snap.svg))
    What It Does
      Draw SVG shapes
      Animate graphics
      Manipulate elements
    Installation
      npm or Bower
      Direct download
      webpack config
    Features
      No dependencies
      Modern browsers
      Scalable vector
    Contributing
      Grunt build
      PhantomJS tests
      Pull requests

mindmap root((Snap.svg)) What It Does Draw SVG shapes Animate graphics Manipulate elements Installation npm or Bower Direct download webpack config Features No dependencies Modern browsers Scalable vector Contributing Grunt build PhantomJS tests Pull requests

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Draw and animate SVG shapes, icons, or illustrations directly in a web page with JavaScript.

USE CASE 2

Build interactive data visualizations or diagrams that animate smoothly on user interaction.

USE CASE 3

Add animated logos or illustrations to a site that remain crisp on any screen resolution.

Tech stack

JavaScriptSVGnpmBowerGruntwebpack

Getting it running

Difficulty · easy Time to first run · 5min

In plain English

Snap.svg is a JavaScript library for working with SVG graphics on the web, created by Adobe's web platform team. SVG, short for Scalable Vector Graphics, is a way of describing pictures using shapes and math rather than a fixed grid of pixels, which means the images stay sharp at any size. The library gives web developers a set of ready-made tools for drawing, changing, and animating these graphics directly in a web page, and the README describes it as aimed at the modern web. The README points to the project site at snapsvg.io for the full story. There are several ways to add it to a project. You can install it through package managers called Bower or npm, or you can download the finished file by hand. The download comes in two forms: a minified version, which is compressed to load faster, and an uncompressed version that is easier to read while developing. Both live in a folder named dist. Using it in a plain web page is simple. You add one script tag that points at the library file, and the README states that no other scripts are needed. For projects built with the webpack bundler, the README gives the extra configuration required to load Snap correctly and shows how to import it inside a module. The rest of the README is aimed at people who want to build the library from source or contribute to it. Building uses a tool called Grunt, and the page lists the terminal commands to install the dependencies and produce the output files. Tests live in a test folder and can be run in a browser or through a tool called PhantomJS. To contribute, the maintainers ask you to sign a contributor agreement, fork the repository, make your changes on a branch, and open a pull request against the dev branch.

Copy-paste prompts

Prompt 1

Using Snap.svg, write JavaScript that draws an animated bar chart with five bars that grow from zero on page load.

Prompt 2

Show me how to use Snap.svg to create a circle that morphs into a square when a user clicks a button.

Prompt 3

How do I use Snap.svg with webpack? Give me the config and the import code for a module-based project.

Prompt 4

Write Snap.svg code that loads an existing SVG file from the server and animates each path element in sequence.

Open on GitHub → Explain another repo

← adobe-webplatform on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.