{"library":"snapsvg","title":"Snap.svg - JavaScript SVG Library","type":"library","description":"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.","language":"javascript","status":"abandoned","last_verified":"Sun Apr 19","install":{"commands":["npm install snapsvg"],"cli":null},"imports":["<!-- In HTML -->\n<script src=\"path/to/snap.svg-min.js\"></script>\n<script>\n    const s = Snap('#my-svg');\n</script>","const Snap = require('imports-loader?this=>window,fix=>module.exports=0!snapsvg/dist/snap.svg.js');","<!-- After Snap.svg script -->\n<script>\n    circle.animate({ ... }, 2000, mina.easeinout);\n</script>"],"auth":{"required":false,"env_vars":[]},"links":{"homepage":"http://snapsvg.io","github":"https://github.com/adobe-webplatform/Snap.svg","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/snapsvg","openapi_spec":null,"status_page":null,"smithery":null},"quickstart":{"code":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Snap.svg Quickstart</title>\n    <style>\n        body { margin: 0; display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #f0f0f0; }\n        svg { border: 1px solid #ccc; background-color: white; }\n    </style>\n</head>\n<body>\n    <svg id=\"my-svg\" width=\"300\" height=\"200\"></svg>\n\n    <script src=\"https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.5.1/snap.svg-min.js\"></script>\n    <script>\n        document.addEventListener('DOMContentLoaded', () => {\n            // Create an SVG object using Snap.svg by referencing its ID\n            const s = Snap('#my-svg');\n\n            // Draw a circle\n            const circle = s.circle(50, 50, 40);\n            circle.attr({\n                fill: \"#bada55\",\n                stroke: \"#000\",\n                strokeWidth: 5\n            });\n\n            // Draw a rectangle\n            const rect = s.rect(100, 20, 150, 80);\n            rect.attr({\n                fill: \"#007bff\",\n                stroke: \"#000\",\n                strokeWidth: 3,\n                rx: 10,\n                ry: 10\n            });\n\n            // Animate the circle\n            circle.animate({\n                r: 60,\n                cx: 250,\n                cy: 150,\n                fill: \"#ff007b\"\n            }, 2000, mina.easeinout, () => {\n                console.log('Circle animation complete!');\n            });\n\n            // Create a text element\n            const text = s.text(150, 180, \"Hello Snap!\");\n            text.attr({\n                fontSize: 24,\n                fontFamily: \"Arial, sans-serif\",\n                fill: \"#333\",\n                textAnchor: \"middle\"\n            });\n        });\n    </script>\n</body>\n</html>","lang":"javascript","description":"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}