SVG.js

SVG.js for Drupal integrates the SVG.js library with Drupal, giving site builders and developers a lightweight way to create, manipulate, and animate SVG graphics on any page. It works out of the box and can load SVG.js from a CDN or a local copy, exposing a clean JavaScript API for interactive visuals.

Features

• Zero-config default: Enable the module and start using SVG.js immediately.
• Flexible library source: Auto-detect a local library or fall back to a trusted CDN.
• Rich SVG API: Create shapes, apply transforms, handle events, and animate with method chaining.
• Works anywhere: Use in themes, custom modules, or inline behaviors for dashboards, icons, maps, charts, and micro-interactions.

Post-Installation

No configuration page is required. After enabling the module, the SVG.js library is available globally. You can attach it in a theme or module and write SVG.js code in your JS files. The module will use a local library if present; otherwise it loads from a CDN automatically. :contentReference[oaicite:0]{index=0}

Example: attach the library in a module

// mymodule.module
function mymodule_page_attachments(array &$attachments) {
  $attachments['#attached']['library'][] = 'svgjs/svgjs.js';
}

Example: use in a Drupal behavior

(function (Drupal, once) {
  Drupal.behaviors.exampleSvg = {
    attach: function (context) {
      once('example-svg', '.svg-target', context).forEach(function (el) {
        var draw = SVG().addTo(el).size(300, 300);
        draw.rect(100, 100).fill('#f06').animate(800).move(150, 150);
      });
    }
  };
})(Drupal, once);

Additional Requirements

• Drupal: Drupal 8.8+ (including 9/10/11). :contentReference[oaicite:1]{index=1}
• Library: SVG.js (auto-loaded from CDN by default; optional local install at /libraries/svgjs/, e.g., /libraries/svgjs/dist/svg.min.js). :contentReference[oaicite:2]{index=2}

Recommended modules/libraries

• SVG asset modules (e.g., “SVG image”, “SVG Formatter”): manage/upload SVG files while this module handles client-side manipulation/animation.

Similar projects

Modules that enable SVG files or responsive images focus on rendering uploaded SVGs. This project is different: it exposes the SVG.js runtime API so you can script and animate SVG elements directly in the browser.

Supporting this Module

If you’d like to support development (sponsorships, bug bounties, feature requests), add your Patreon/OpenCollective links here.

Community Documentation

• SVG.js Documentation (guides, API, examples). :contentReference[oaicite:3]{index=3}
• SVG.js on GitHub (issues, releases, plugins). :contentReference[oaicite:4]{index=4}