# adobe-webplatform/snap.svg

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/adobe-webplatform-snap-svg).**

14,012 stars · 1,120 forks · JavaScript · Apache-2.0

## Links

- GitHub: https://github.com/adobe-webplatform/Snap.svg
- Homepage: http://snapsvg.io
- awesome-repositories: https://awesome-repositories.com/repository/adobe-webplatform-snap-svg.md

## Topics

`javascript` `javascript-library` `snap` `svg` `svg-animations`

## Description

Snap.svg is a JavaScript library for creating, manipulating, and animating scalable vector graphics directly in the web browser. It functions as a browser-based SVG generator and vector graphics manipulation tool, providing a framework to programmatically generate complex drawings and masks.

The project serves as an animation engine for transitioning visual properties and attributes over time to create motion. It enables the development of dynamic SVG content, including the ability to animate viewboxes, matrices, and polygon points.

Its capability surface covers geometric calculations and the management of element hierarchies. It also provides utilities for managing SVG gradients, applying CSS classes, and exporting vector graphics as raster images or JSON data.

## Tags

### Part of an Awesome List

- [SVG Libraries](https://awesome-repositories.com/f/awesome-lists/devtools/svg-libraries.md) — Provides a comprehensive JavaScript library for the programmatic manipulation and rendering of vector graphics.
- [SVG Animation Libraries](https://awesome-repositories.com/f/awesome-lists/devtools/svg-animation-libraries.md) — Modern library for SVG graphics manipulation.

### Graphics & Multimedia

- [Vector Graphics Editors](https://awesome-repositories.com/f/graphics-multimedia/graphics-and-media/vector-graphics-editors.md) — Provides a comprehensive library for creating and modifying scalable vector graphics directly in the browser. ([source](https://github.com/adobe-webplatform/Snap.svg/blob/master/dr.json))
- [Vector Animation Libraries](https://awesome-repositories.com/f/graphics-multimedia/animation-motion/vector-animation-libraries.md) — Provides a specialized engine for animating SVG paths, viewboxes, and coordinate systems to create fluid motion.
- [Dynamic SVG Manipulation](https://awesome-repositories.com/f/graphics-multimedia/dynamic-svg-manipulation.md) — Programmatically alters SVG attributes and element hierarchies in real time to respond to user input or data.
- [Dynamic Vector Graphics](https://awesome-repositories.com/f/graphics-multimedia/graphics-and-media/dynamic-vector-graphics.md) — Facilitates the programmatic creation and modification of dynamic vector graphics in the web browser.
- [Programmatic Generators](https://awesome-repositories.com/f/graphics-multimedia/graphics-engines-rendering/rendering/engines/canvas-vector-graphics/svg-based-vector-rendering/programmatic-generators.md) — Acts as a framework for programmatically generating complex vector drawings and masks via JavaScript.
- [Coordinate Calculation Engines](https://awesome-repositories.com/f/graphics-multimedia/coordinate-calculation-engines.md) — Implements a geometry engine to calculate spatial relationships and trigonometric values for positioning vector elements.
- [Element Organizers](https://awesome-repositories.com/f/graphics-multimedia/element-organizers.md) — Manages the SVG document structure by appending, prepending, and retrieving child elements. ([source](https://github.com/adobe-webplatform/Snap.svg/blob/master/history.md))
- [Affine Transformation Matrices](https://awesome-repositories.com/f/graphics-multimedia/graphics-engines-rendering/rendering/coordinate-viewport-transformations/affine-transformation-matrices.md) — Applies affine transformation matrices to vector graphics for scalable rotating, scaling, and skewing.
- [SVG Data Visualization](https://awesome-repositories.com/f/graphics-multimedia/svg-data-visualization.md) — Provides geometric calculations and coordinate mapping to represent data visually within SVG containers.

### User Interface & Experience

- [Animation Properties](https://awesome-repositories.com/f/user-interface-experience/animation-and-motion-systems/configuration-utility-helpers/animation-properties.md) — Transitions visual attributes like viewboxes and polygon points over time to create complex vector motion. ([source](https://github.com/adobe-webplatform/Snap.svg/blob/master/history.md))
- [Interval Timers](https://awesome-repositories.com/f/user-interface-experience/animation-and-motion-systems/configuration-utility-helpers/animation-properties/interval-timers.md) — Uses interval-based timers to create smooth transitions and motion by updating visual attributes over time.
- [Vector Masks and Patterns](https://awesome-repositories.com/f/user-interface-experience/animation-and-motion-systems/image-masking/vector-masks-and-patterns.md) — Enables the definition of reusable masking areas and fill patterns to be applied to graphic shapes. ([source](https://github.com/adobe-webplatform/Snap.svg/blob/master/history.md))

### Scientific & Mathematical Computing

- [Vector Geometry Calculations](https://awesome-repositories.com/f/scientific-mathematical-computing/vector-geometry-calculations.md) — Computes distances, lengths, and closest points using trigonometric functions and coordinate math for vector elements. ([source](https://github.com/adobe-webplatform/Snap.svg/blob/master/history.md))

### Web Development

- [DOM Element Manipulators](https://awesome-repositories.com/f/web-development/dom-element-manipulators.md) — Wraps native SVG DOM elements in custom JavaScript objects to provide a simplified API for manipulation.