Snap.svg Deployment and Usage Guide

Prerequisites

Node.js (for building and development)
npm (Node Package Manager)
Grunt CLI (for building)
Modern web browser (for running SVG graphics)
Text editor or IDE for development

Installation

Option 1: Using npm (Recommended)

npm install snapsvg

Option 2: Using Bower

bower install snap.svg

Option 3: Manual Download

Minified version: Download from GitHub
Unminified version: Download from GitHub

Option 4: CDN

<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.5.1/snap.svg-min.js"></script>

Configuration

For webpack 2.x and 3.x

Add the following to your webpack configuration:

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 import in your modules:

import Snap from 'snapsvg';

Build & Run

Building from Source

Clone the repository:

git clone https://github.com/adobe-webplatform/Snap.svg.git
cd Snap.svg

Install Grunt CLI globally:

npm install -g grunt-cli

Install dependencies:

npm install

Build the project:

grunt

Build with auto-watch (for development):

grunt watch

Running Tests

Open test file in browser:

open test/test.html

Or run tests via command line:

grunt test

Basic Usage

Include Snap.svg in your HTML:

<script src="snap.svg-min.js"></script>

Create a simple SVG drawing:

<!DOCTYPE html>
<html>
<head>
    <script src="snap.svg-min.js"></script>
</head>
<body>
    <svg id="svg" width="100" height="100"></svg>
    <script>
        var s = Snap("#svg");
        var circle = s.circle(50, 50, 40);
        circle.attr({
            fill: "#bada55",
            stroke: "#000",
            strokeWidth: 5
        });
    </script>
</body>
</html>

Deployment

Snap.svg is a JavaScript library designed to run in web browsers. Deployment involves:

Static Hosting (recommended):
- GitHub Pages - Perfect for documentation and demos
- Netlify - Excellent for static sites with automatic builds
- Vercel - Great for frontend applications
- AWS S3 + CloudFront - For enterprise-level static hosting
Integration with Web Applications:
- Include the minified version in your existing web application
- Use with frameworks like React, Vue, Angular, etc.
CDN Deployment:
- The library is already available on CDNJS
- For custom builds, host your minified version on a CDN

Troubleshooting

Common Issues and Solutions

1. Module Not Found in webpack

Issue: Error: Cannot find module 'snapsvg'
Solution: Ensure you've configured webpack with the imports-loader as shown in the Configuration section.

2. SVG Not Rendering

Issue: SVG elements don't appear in the browser
Solution:

Check that the SVG container exists before Snap attempts to select it
Verify the container has proper dimensions
Ensure Snap.svg is loaded before your script

3. Touch Events Not Working on Mobile

Issue: Mouse events work but touch events don't
Solution: Snap.svg automatically maps mouse events to touch events. Ensure your elements are properly sized for touch interaction.

4. Build Failures

Issue: grunt command fails
Solution:

Ensure Node.js and npm are installed
Run npm install to install all dependencies
Check that Grunt CLI is installed globally

5. License Compliance

Issue: Using Snap.svg in commercial projects
Solution: Snap.svg is licensed under Apache 2.0. Include the license notice in your project documentation as required.

6. Performance Issues with Complex SVGs

Issue: Large SVG files cause browser slowdowns
Solution:

Simplify complex paths where possible
Use SVG symbols and reuse elements
Consider using viewBox for responsive scaling

7. Cross-browser Compatibility

Issue: SVG rendering differs across browsers
Solution: Snap.svg handles most cross-browser issues, but test thoroughly in target browsers. For older browsers, consider polyfills for SVG features.

How to Deploy & Use adobe-webplatform/Snap.svg