snapsvg

library0.5.1jsnpmunverified

Snap.svg is a JavaScript library specifically designed for dynamic creation, manipulation, and animation of Scalable Vector Graphics (SVG) directly within the browser's DOM. It offers an intuitive, jQuery-like API for interacting with SVG elements, providing a powerful alternative to libraries that might render to canvas or abstract SVG too heavily. Its latest stable release, version 0.5.1, was published approximately seven years ago, indicating the project is effectively abandoned. There have been no significant updates, commits, or responses to issues in many years, making it unsuitable for new development requiring active maintenance, modern JavaScript module support, or contemporary security practices. Its key differentiator was its direct, low-level access and manipulation of native SVG DOM elements, facilitating complex interactive SVG graphics and animations without requiring a canvas.

web-framework

npm install snapsvg

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · SNAPSVG

snapsvg

web-frameworkjavascriptv0.5.1

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

Snap (Global)

✓  <script src="path/to/snap.svg-min.js"></script> <script> const s = Snap('#my-svg'); </script>

✗ import Snap from 'snapsvg';

Snap.svg is primarily designed to be loaded as a global script in the browser, exposing the 'Snap' object globally. It does not natively support ES Modules.

Snap (Webpack/CommonJS)

✓ const Snap = require('imports-loader?this=>window,fix=>module.exports=0!snapsvg/dist/snap.svg.js');

✗ const Snap = require('snapsvg');

When using bundlers like Webpack, `snapsvg` requires `imports-loader` to correctly expose `Snap` to the global `window` object, as it was not written as a traditional CommonJS module.

mina (Global easing function)

✓  <script> circle.animate({ ... }, 2000, mina.easeinout); </script>

✗ import { mina } from 'snapsvg';

The `mina` easing functions are also exposed globally by Snap.svg, typically used directly in animation calls.

This quickstart demonstrates how to load Snap.svg via a CDN and use its API to draw and animate basic SVG shapes (circle, rectangle, text) within an existing SVG element in an HTML document.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Snap.svg Quickstart</title> <style> body { margin: 0; display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #f0f0f0; } svg { border: 1px solid #ccc; background-color: white; } </style> </head> <body> <svg id="my-svg" width="300" height="200"></svg> <script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.5.1/snap.svg-min.js"></script> <script> document.addEventListener('DOMContentLoaded', () => { // Create an SVG object using Snap.svg by referencing its ID const s = Snap('#my-svg'); // Draw a circle const circle = s.circle(50, 50, 40); circle.attr({ fill: "#bada55", stroke: "#000", strokeWidth: 5 }); // Draw a rectangle const rect = s.rect(100, 20, 150, 80); rect.attr({ fill: "#007bff", stroke: "#000", strokeWidth: 3, rx: 10, ry: 10 }); // Animate the circle circle.animate({ r: 60, cx: 250, cy: 150, fill: "#ff007b" }, 2000, mina.easeinout, () => { console.log('Circle animation complete!'); }); // Create a text element const text = s.text(150, 180, "Hello Snap!"); text.attr({ fontSize: 24, fontFamily: "Arial, sans-serif", fill: "#333", textAnchor: "middle" }); }); </script> </body> </html>

Debug

Known issues

breakingThe Snap.svg project has been effectively abandoned for over seven years, with no recent commits, updates, or maintenance activity. This means no new features, bug fixes, or security patches will be released.

fix

For new projects, consider actively maintained SVG libraries such as GreenSock (GSAP), D3.js, or Paper.js. For existing legacy projects, understand the inherent risks of using unmaintained code.

affects: >=0.5.1

gotchaSnap.svg does not natively support ES Modules (ESM) and was designed for a global script loading environment. Attempting to `import` it directly will fail or require complex bundler configurations.

fix

Load `snap.svg-min.js` via a `<script>` tag in HTML. For bundlers like Webpack, use `imports-loader?this=>window,fix=>module.exports=0!snapsvg/dist/snap.svg.js` to ensure proper global exposure.

affects: >=0.5.0

gotchaIntegrating Snap.svg with modern JavaScript bundlers (e.g., Webpack, Rollup, Vite) is non-trivial and often requires specific loaders and configurations to correctly expose `Snap` to the global scope, as it relies on `window` being available.

fix

Refer to the `imports-loader` configuration provided in the official README for Webpack. For other bundlers or simpler setups, direct global script loading via a `<script>` tag is the most reliable approach.

affects: >=0.5.0

gotchaLack of TypeScript definitions. As an abandoned library, there are no official or actively maintained TypeScript type declarations for Snap.svg, leading to poor developer experience and type safety issues in TypeScript projects.

fix

Manual declaration files (`.d.ts`) would need to be created, or `@ts-ignore` used extensively. This further complicates integrating it into modern TypeScript applications, reducing type safety benefits.

affects: >=0.5.0

gotchaPotential for compatibility issues with newer browser versions or JavaScript language features due to lack of maintenance. The library might not work as expected or break with future browser updates.

fix

Thorough testing across target browsers is essential. Be prepared to implement workarounds or migrate to a different library if critical incompatibilities arise, as no official fixes are expected.

affects: >=0.5.0

Errors

Common errors & fixes

Snap is not defined

The `Snap` object was not exposed to the global scope or correctly imported/required before use.

fix

Ensure `snap.svg-min.js` is loaded via a `<script>` tag in your HTML before your script, or that your bundler configuration correctly sets up `Snap` globally (e.g., using `imports-loader` for Webpack).

TypeError: require is not a function

Attempting to use `require()` in a browser environment without a CommonJS bundler configured, or in a modern ESM context where `require` is not available.

fix

In a browser-only context, load `snap.svg-min.js` directly with a `<script>` tag. If using a bundler, ensure it's configured to handle CommonJS modules or global scripts properly (e.g., the `imports-loader` approach for Webpack).

Uncaught TypeError: s.circle is not a function

The variable `s` (or whatever you assigned `Snap()`) is not a valid Snap.svg element or context, likely because `Snap('#my-svg')` failed to find the SVG element or `Snap` itself wasn't properly initialized.

fix

Verify that `Snap` is defined globally, and that the selector passed to `Snap()` (e.g., `'#my-svg'`) correctly targets an existing `<svg>` element in the DOM. Ensure the DOM is fully loaded before calling `Snap()`.

Module not found: Error: Can't resolve 'snapsvg'

The bundler cannot resolve `snapsvg` as a standard module. `snapsvg` was not built for direct module import in the modern sense.

fix

For Webpack, use the specific `imports-loader` configuration: `require('imports-loader?this=>window,fix=>module.exports=0!snapsvg/dist/snap.svg.js')`. For other bundlers or simpler setups, load via a `<script>` tag.

Upgrade

Version history

0.5.1latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

7 hits · last 30 days

node

Resources

githubhttps://github.com/adobe-webplatform/Snap.svg ↗

packagehttps://www.npmjs.com/package/snapsvg ↗

homepagehttp://snapsvg.io ↗