Snap.svg - JavaScript SVG Library

0.5.1 · abandoned · verified Sun Apr 19

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.

Common errors

```
Snap is not defined
```
cause 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
```
cause 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
```
cause 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'
```
cause 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.

Warnings

breaking The 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.
gotcha Snap.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.
gotcha Integrating 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.
gotcha Lack 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.
gotcha Potential 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.

Install

npm install snapsvg npm
yarn add snapsvg yarn
pnpm add snapsvg pnpm

Imports

Snap (Global)
wrong:
```
import Snap from 'snapsvg';
```
correct:
```

<script src="path/to/snap.svg-min.js"></script>
<script>
    const s = Snap('#my-svg');
</script>
```
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)
wrong:
```
const Snap = require('snapsvg');
```
correct:
```
const Snap = require('imports-loader?this=>window,fix=>module.exports=0!snapsvg/dist/snap.svg.js');
```
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)
wrong:
```
import { mina } from 'snapsvg';
```
correct:
```

<script>
    circle.animate({ ... }, 2000, mina.easeinout);
</script>
```
The `mina` easing functions are also exposed globally by Snap.svg, typically used directly in animation calls.

Quickstart

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>

view raw JSON →