Forem: Orlin Vakarelov

Transform System with the new Snap.svg (Basics - part 3)

Orlin Vakarelov — Fri, 19 Dec 2025 23:34:12 +0000

This is the third tutorial in our Snap.svg series. In the previous parts we learned how to build hierarchical SVG structures and style them beautifully. Now we'll position those shapes precisely with the enhanced transform system.

In this tutorial we'll learn to:

use direct transform methods like translate(), scale(), and rotate() instead of string syntax,
understand relative vs absolute transformations with the prev_trans parameter,
access the current transformation state with getLocalMatrix(),
build and compose complex transformations step-by-step with addTransform(),
animate transformations smoothly with animateTransform() and translateAnimate(),

The underlying theme is that Snap.svg's direct transform methods make positioning and animating shapes far more intuitive than traditional string-based transforms.

Some Cool Demos: Some fun with the new Snap.SVG

1. Why Direct Transform Methods Matter

Standard SVG uses string-based transforms:

// Old way: string syntax
element.attr({ transform: "translate(100,50) rotate(45)" });

This approach has limitations:

Hard to read: What's the rotation center?
Hard to modify: How do you change just the translation?
Hard to animate: String parsing for every frame

Snap.svg's enhanced transform system provides direct methods that are chainable, readable, and easy to compose:

// New way: direct methods
element
  .translate(100, 50)
  .rotate(45, centerX, centerY);

Marketing Note: These direct transform methods are a major enhancement over standard Snap.svg, making transforms as intuitive as method chaining.

2. Basic Translation: Moving Elements

The translate(x, y) method moves elements along the X and Y axes.

<div id="container">
  <svg id="mySvg" width="500" height="300" style="border: 1px solid #ccc;"></svg>
</div>

<script src="https://iaesth.ca/dist/snap.svg_ia.min.js"></script>
<script src="basic-translate.js"></script>

Example: Moving Rectangles

// basic-translate.js
var s = Snap("#mySvg");
var group = s.g();

// Rectangle 1: No translation (origin position)
group
  .rect(0, 0, 80, 60)
  .attr({
    fill: "#3498db",
    stroke: "#2c3e50",
    strokeWidth: 2
  });

// Rectangle 2: Translate right 100px
group
  .rect(0, 0, 80, 60)
  .attr({
    fill: "#e74c3c",
    stroke: "#c0392b",
    strokeWidth: 2
  })
  .translate(100, 0);  // Move 100px right, 0px down

// Rectangle 3: Translate right 200px, down 50px
group
  .rect(0, 0, 80, 60)
  .attr({
    fill: "#2ecc71",
    stroke: "#27ae60",
    strokeWidth: 2
  })
  .translate(200, 50);  // Move 200px right, 50px down

// Rectangle 4: Multiple translations (they compose!)
group
  .rect(0, 0, 80, 60)
  .attr({
    fill: "#f39c12",
    stroke: "#e67e22",
    strokeWidth: 2
  })
  .translate(100, 0)   // First move right 100px
  .translate(200, 100); // Then move right 200px more, down 100px
                        // Final position: (300, 100)

Output: Four rectangles at different positions, with the fourth showing how translations compose (add together).

Key Insight: By default, translate() is relative - it adds to the existing transformation. This is why the fourth rectangle ends up at (300, 100), not (200, 100).

3. Understanding `prev_trans`: Relative vs Absolute

All transformation methods accept an optional prev_trans parameter that controls how the new transform composes with existing ones:

Omitted (default): Uses current element's local matrix (relative transformation)
true or "id": Uses identity matrix (absolute transformation from origin)
Snap.matrix(): Uses specified matrix as base

// prev_trans-demo.js
var s = Snap("#mySvg");
var group = s.g();

// Rectangle 1: Multiple relative translations
var rect1 = group
  .rect(0, 0, 60, 60)
  .attr({ fill: "#3498db" })
  .translate(50, 50)    // Move to (50, 50)
  .translate(100, 0);   // Move 100 more right → final: (150, 50)

// Label for rect1
group.text(150, 130, "Relative")
  .attr({ textAnchor: "middle", fill: "#2c3e50" });

// Rectangle 2: Absolute translation (ignores previous)
var rect2 = group
  .rect(0, 0, 60, 60)
  .attr({ fill: "#e74c3c" })
  .translate(50, 50)           // Move to (50, 50)
  .translate(100, 0, true);    // ABSOLUTE to (100, 0)
                                // prev_trans = true resets matrix

// Label for rect2
group.text(100, 80, "Absolute")
  .attr({ textAnchor: "middle", fill: "#c0392b" });

// Rectangle 3: Custom base matrix
var customMatrix = Snap.matrix().translate(300, 150);
var rect3 = group
  .rect(0, 0, 60, 60)
  .attr({ fill: "#2ecc71" })
  .translate(50, 50, customMatrix);  // Apply translation to custom matrix
                                     // Final: (350, 200)

// Label for rect3 (moved lower so it doesn't overlap)
group.text(350, 270, "Custom Base")
  .attr({ textAnchor: "middle", fill: "#27ae60" });

Output: Three rectangles demonstrating different prev_trans behaviors.

4. Rotation: Spinning Around a Center

The rotate(angle, cx, cy) method rotates elements. The angle is in degrees, and you can specify a center point.

Example: Rotating Rectangles

// basic-rotate.js
var s = Snap("#mySvg");
var group = s.g();

// Rectangle 1: No rotation
var rect1 = group
  .rect(50, 50, 100, 60)
  .attr({
    fill: "#3498db",
    stroke: "#2c3e50",
    strokeWidth: 2
  });

// Center point marker
group.circle(100, 80, 4).attr({ fill: "#c0392b" });

// Rectangle 2: Rotate 30° around its center
var rect2 = group
  .rect(200, 50, 100, 60)
  .attr({
    fill: "#e74c3c",
    stroke: "#c0392b",
    strokeWidth: 2
  })
  .rotate(30, 250, 80);  // 30° around (250, 80) - the rect center

// Center point marker
group.circle(250, 80, 4).attr({ fill: "#c0392b" });

// Rectangle 3: Rotate 45° around top-left corner
var rect3 = group
  .rect(350, 50, 100, 60)
  .attr({
    fill: "#2ecc71",
    stroke: "#27ae60",
    strokeWidth: 2
  })
  .rotate(45, 350, 50);  // 45° around top-left corner (350, 50)

// Corner point marker
group.circle(350, 50, 4).attr({ fill: "#c0392b" });

// Rectangle 4: Multiple rotations compose
var rect4 = group
  .rect(150, 180, 100, 60)
  .attr({
    fill: "#f39c12",
    stroke: "#e67e22",
    strokeWidth: 2
  })
  .rotate(15, 200, 210)   // First rotate 15°
  .rotate(30, 200, 210);  // Then rotate 30° more
                          // Total: 45° rotation

// Center point marker
group.circle(200, 210, 4).attr({ fill: "#c0392b" });

Output: Four rectangles showing different rotation behaviors, with red dots marking rotation centers.

5. Scaling: Changing Size and Reflection

The scale(sx, sy, cx, cy) method scales elements. Use negative values for reflection (mirroring).

Example: Scaling and Reflecting

// basic-scale.js
var s = Snap("#mySvg");
var group = s.g();

// Original rectangle (reference)
group
  .rect(50, 50, 80, 60)
  .attr({
    fill: "none",
    stroke: "#95a5a6",
    strokeWidth: 1,
    strokeDasharray: "5,3"
  });

// Rectangle 1: Scale up 1.5x uniformly
group
  .rect(50, 50, 80, 60)
  .attr({
    fill: "#3498db",
    opacity: 0.7
  })
  .scale(1.5, 1.5, 50, 50);  // Scale from top-left corner

// Rectangle 2: Scale horizontally only
group
  .rect(200, 50, 80, 60)
  .attr({
    fill: "#e74c3c",
    opacity: 0.7
  })
  .scale(2, 1, 200, 80);  // 2x width, 1x height, from left center

// Rectangle 3: Reflect horizontally (negative scale) - moved below red to avoid overlap
group
  .rect(350, 130, 80, 60)
  .attr({
    fill: "#2ecc71",
    opacity: 0.7
  })
  .scale(-1, 1, 390, 160);  // Flip horizontally around new center

// Add text to show reflection
group.text(390, 165, "ABC")
  .attr({
    fontSize: 24,
    textAnchor: "middle",
    fill: "#fff",
    fontFamily: "Arial, sans-serif"
  })
  .scale(-1, 1, 390, 165);

// Rectangle 4: Reflect vertically
group
  .rect(150, 180, 80, 60)
  .attr({
    fill: "#f39c12",
    opacity: 0.7
  })
  .scale(1, -1, 190, 210);  // Flip vertically around center

Output: Four rectangles showing uniform scaling, horizontal scaling, horizontal reflection, and vertical reflection.

6. Combining Transformations: Order Matters

Transformations are applied in sequence, and order matters. translate().rotate() produces different results than rotate().translate().

Example: Transform Order

// transform-order.js
var s = Snap("#mySvg");
var group = s.g();

// Reference: Small circle at origin
group.circle(250, 150, 5).attr({ fill: "#c0392b" });

// Path 1: Translate THEN Rotate
// The rect moves right, then rotates around the origin
var rect1 = group
  .rect(-30, -20, 60, 40)
  .attr({
    fill: "#3498db",
    opacity: 0.7,
    stroke: "#2c3e50",
    strokeWidth: 2
  })
  .translate(250, 150)   // Move to (250, 150)
  .translate(80, 0)      // Move 80px right
  .rotate(45, 250, 150); // Rotate 45° around origin point

// Label
group.text(330, 115, "Translate → Rotate")
  .attr({ fontSize: 12, fill: "#2c3e50" });

// Path 2: Rotate THEN Translate
// The rect rotates first, then moves along the rotated axis
var rect2 = group
  .rect(-30, -20, 60, 40)
  .attr({
    fill: "#e74c3c",
    opacity: 0.7,
    stroke: "#c0392b",
    strokeWidth: 2
  })
  .translate(250, 150)   // Move to (250, 150)
  .rotate(45, 250, 150)  // Rotate 45° around origin point
  .translate(80, 0);     // Move 80px along rotated X axis

// Label (moved lower/right to avoid overlap)
group.text(305, 235, "Rotate → Translate")
  .attr({ fontSize: 12, fill: "#c0392b" });

// Arrow showing the difference
group.line(330, 150, 285, 195)
  .attr({
    stroke: "#7f8c8d",
    strokeWidth: 1,
    strokeDasharray: "3,3",
    markerEnd: "url(#arrowhead)"
  });

// Define arrowhead marker
var defs = s.select("defs") || s.el("defs");
defs.append(
  s.path("M 0 0 L 10 5 L 0 10 z")
    .attr({ id: "arrowhead", fill: "#7f8c8d" })
);

Output: Two rectangles at different positions, demonstrating how transformation order affects the final result.

Key Principle: Each transform method applies relative to the coordinate system established by previous transforms.

7. Reading Current Transforms with `getLocalMatrix()`

The getLocalMatrix() method returns the element's current transformation matrix, allowing you to read and build upon existing transforms.

Example: Inspecting and Building Transforms

// get-local-matrix.js
var s = Snap("#mySvg");
var group = s.g();

// Create a transformed rectangle
var rect = group
  .rect(100, 100, 80, 60)
  .attr({
    fill: "#3498db",
    stroke: "#2c3e50",
    strokeWidth: 2
  })
  .translate(150, 50)
  .rotate(30, 190, 130);

// Get the current transformation matrix
var matrix = rect.getLocalMatrix();

// Display matrix values
var infoText = group.text(20, 18, 
  "Current Matrix: " + matrix.toTransformString())
  .attr({
    fontSize: 14,
    fontFamily: "monospace",
    fill: "#2c3e50"
  });

// Create another rectangle using the same matrix
var rect2 = group
  .rect(100, 100, 80, 60)
  .attr({
    fill: "#e74c3c",
    opacity: 0.5,
    stroke: "#c0392b",
    strokeWidth: 2
  })
  .transform(matrix);  // Apply the exact same transform

// Label
group.text(190, 220, "Same transform applied")
  .attr({
    fontSize: 12,
    textAnchor: "middle",
    fill: "#7f8c8d"
  });

// Button to add more rotation
var button = group
  .rect(350, 20, 120, 40)
  .attr({
    fill: "#2ecc71",
    rx: 5,
    ry: 5,
    cursor: "pointer"
  });

group.text(410, 45, "Rotate More")
  .attr({
    textAnchor: "middle",
    fill: "#fff",
    fontSize: 14,
    pointerEvents: "none"
  });

button.click(function() {
  // Get current matrix and add 15° rotation
  var currentMatrix = rect.getLocalMatrix();
  rect.rotate(15, 190, 130);

  // Update info text
  var newMatrix = rect.getLocalMatrix();
  infoText.attr({
    text: "Current Matrix: " + newMatrix.toTransformString()
  });
});

Output: Two overlapping rectangles with identical transforms, plus a button to add rotation and see the matrix update.

Key Methods:

getLocalMatrix(): Returns the element's current transformation matrix
matrix.toTransformString(): Converts matrix to readable string
transform(matrix): Applies a matrix directly

8. Building Matrices with `addTransform()`

The addTransform(matrix) method lets you add a transformation matrix to an element's existing transform, giving you full control over matrix composition.

Example: Composing Matrices Programmatically

// add-transform.js
var s = Snap("#mySvg");
var group = s.g();

// Create a shape with initial transform
var triangle = group
  .polygon([0, -30, 25, 15, -25, 15])
  .attr({
    fill: "#3498db",
    stroke: "#2c3e50",
    strokeWidth: 2
  })
  .translate(250, 150);

// Create transformation matrices
var scaleMatrix = Snap.matrix().scale(1.5, 1.5, 250, 150);
var rotateMatrix = Snap.matrix().rotate(45, 250, 150);
var translateMatrix = Snap.matrix().translate(50, 0);

// UI buttons to add transforms
var btnY = 20;
var createButton = function(label, x, callback) {
  var btn = group
    .rect(x, btnY, 100, 35)
    .attr({
      fill: "#2ecc71",
      rx: 5,
      cursor: "pointer"
    });

  group.text(x + 50, btnY + 22, label)
    .attr({
      textAnchor: "middle",
      fill: "#fff",
      fontSize: 12,
      pointerEvents: "none"
    });

  btn.click(callback);
};

createButton("+ Scale", 20, function() {
  triangle.addTransform(scaleMatrix);
});

createButton("+ Rotate", 130, function() {
  triangle.addTransform(rotateMatrix);
});

createButton("+ Translate", 240, function() {
  triangle.addTransform(translateMatrix);
});

createButton("Reset", 350, function() {
  triangle.transform(Snap.matrix().translate(250, 150));
});

// Instructions
group.text(250, 280, "Click buttons to compose transforms")
  .attr({
    textAnchor: "middle",
    fontSize: 14,
    fill: "#7f8c8d"
  });

Output: An interactive demo where you can build complex transforms by adding matrices incrementally.

Key Insight: addTransform() is the programmatic way to build transforms. It's especially useful when:

Calculating transforms based on data
Building physics simulations
Creating procedural animations

9. Animated Transforms

The animateTransform() and translateAnimate() methods enable smooth animated transitions between transformations.

Example: Spinning Windmill

// animated-windmill.js
var s = Snap("#mySvg");
var group = s.g();

console.log("Windmill")

// Windmill base (pole)
var pole = group
        .rect(245, 200, 10, 100)
        .attr({
          fill: "#7f8c8d",
          stroke: "#2c3e50",
          strokeWidth: 2
        });

// Windmill top (housing)
var housing = group
        .polygon([250, 190, 230, 210, 270, 210])
        .attr({
          fill: "#34495e",
          stroke: "#2c3e50",
          strokeWidth: 2
        });

// Center hub
var hub = group
        .circle(250, 150, 12)
        .attr({
          fill: "#c0392b",
          stroke: "#2c3e50",
          strokeWidth: 2
        });

// Blade function
var createBlade = function (angle) {
  let blade_group = group
          .g()
          .attr({id: "blade" + angle});
  blade_group
          .path("M 0,-10 L 5,-10 L 8,-60 L 4,-80 L -4,-80 L -8,-60 L -5,-10 Z")
          .attr({
            fill: "#ecf0f1",
            stroke: "#2c3e50",
            strokeWidth: 2
          })
          .translate(250, 150)
          .rotate(angle, 250, 150);
  return blade_group;
};

// Create 4 blades at 90° intervals
var blades = [
  createBlade(0),
  createBlade(90),
  createBlade(180),
  createBlade(270)
];

// Animate continuous rotation
var rotationSpeed = 3000; // 3 seconds per rotation

// Use animateTransform with a MATRIX-EASING generator.
// The easing function receives (startMatrix, endMatrix) and must
// return a function t -> matrix at time t in [0,1].
// We spin around the hub (250,150) by mapping t to a rotation matrix.
function spinEasingFactory(startMatrix /*, endMatrix */) {
  var cx = 250, cy = 150;
  var fullTurn = 360; // degrees per cycle
  return function (t) {
    // Return startMatrix rotated by fullTurn * t around (cx, cy)
    let rotate = startMatrix.clone().rotate(fullTurn * t, cx, cy);
    return rotate;

  };
}

var run = true;
var animateBlade = function (blade) {
  var start = blade.getLocalMatrix();
  // Target can be start (360° brings us back). We pass easing_direct_matrix=true
  // so our easing function drives the matrices each frame.
  blade.animateTransform(
          start,                // target matrix (same as start for seamless loop)
          rotationSpeed,
          spinEasingFactory,    // matrix-easing generator
          function () {         // on complete, immediately loop
            if (run) animateBlade(blade);
          },
          true                  // easing_direct_matrix: interpret easing as matrix generator
  );
};

// Start animation for all blades
blades.forEach(function (blade) {
  animateBlade(blade);
});

// Stop the animation at the end
hub.mouseenter(() => {
  run = false
})

// Restart Animation
hub.mouseleave(() => {
  if (!run) blades.forEach(function (blade) {
    run = true;
    animateBlade(blade);
  });
})

// Sun in background
group.circle(80, 80, 30)
        .attr({
          fill: "#f39c12",
          opacity: 0.8
        });

// Ground
group.rect(0, 280, 500, 40)
        .attr({
          fill: "#27ae60"
        });

Output: An animated windmill with four rotating blades using animateTransform() for smooth continuous rotation.

Animation Methods:

animateTransform(matrix, duration, easing, callback): Animate to target matrix
translateAnimate(duration, x, y, prev_trans): Shortcut for animated translation
For rotations and complex motions, pass a matrix-easing generator as the easing argument and set the 5th parameter to true (easing_direct_matrix). The generator receives (startMatrix, endMatrix) and returns a function t => matrix.
- Example: el.animateTransform(start, 3000, spinEasingFactory, onDone, true)
- This avoids linear interpolation of matrix coefficients (which can shear) and handles 360° loops cleanly (since 360° = identity).

10. The `reflect()` Helper Method

The reflect() method provides a convenient way to mirror elements along an axis.

Example: Reflections and Symmetry

// reflect-demo.js
var s = Snap("#mySvg");
var group = s.g();

// Original shape (triangle pointing right)
var originalTriangle = group
  .polygon([0, 0, 40, 20, 0, 40])
  .attr({
    fill: "#3498db",
    stroke: "#2c3e50",
    strokeWidth: 2
  })
  .translate(100, 100);

// Label
group.text(120, 95, "Original")
  .attr({ fontSize: 12, fill: "#2c3e50", textAnchor: "middle" });

// Reflect horizontally
var reflectX = group
  .polygon([0, 0, 40, 20, 0, 40])
  .attr({
    fill: "#e74c3c",
    stroke: "#c0392b",
    strokeWidth: 2
  })
  .translate(250, 100)
  .reflect("x", 270, 120);  // Reflect around vertical axis at x=270

// Label
group.text(270, 95, "reflect('x')")
  .attr({ fontSize: 12, fill: "#c0392b", textAnchor: "middle" });

// Reflect vertically
var reflectY = group
  .polygon([0, 0, 40, 20, 0, 40])
  .attr({
    fill: "#2ecc71",
    stroke: "#27ae60",
    strokeWidth: 2
  })
  .translate(100, 200)
  .reflect("y", 120, 220);  // Reflect around horizontal axis at y=220

// Label
group.text(120, 195, "reflect('y')")
  .attr({ fontSize: 12, fill: "#27ae60", textAnchor: "middle" });

// Reflect at 45° angle
var reflect45 = group
  .polygon([0, 0, 40, 20, 0, 40])
  .attr({
    fill: "#f39c12",
    stroke: "#e67e22",
    strokeWidth: 2
  })
  .translate(370, 100)
  .reflect(45, 390, 120);  // Reflect around 45° axis

// Label
group.text(390, 95, "reflect(45°)")
  .attr({ fontSize: 12, fill: "#e67e22", textAnchor: "middle" });

// Draw reflection axes
group.line(270, 80, 270, 160)
  .attr({ stroke: "#95a5a6", strokeWidth: 1, strokeDasharray: "5,3" });

group.line(80, 220, 160, 220)
  .attr({ stroke: "#95a5a6", strokeWidth: 1, strokeDasharray: "5,3" });

Output: Four triangles showing original and three reflection types.

reflect() Parameters:

reflect("x") or reflect("vertical"): Mirror across vertical axis
reflect("y") or reflect("horizontal"): Mirror across horizontal axis
reflect(angle): Mirror across axis at specified angle (degrees)
reflect(lineElement): Mirror across a line element

11. Best Practices Summary

When to use direct transform methods:

Default choice: Use translate(), rotate(), scale() for all positioning
Readable code: Method chaining is self-documenting
Easy modification: Change specific transforms without reparsing strings
Animation-ready: Works seamlessly with animateTransform()

When to use `prev_trans` parameter:

Relative transforms (default): Compose with existing transform
Absolute positioning: Use prev_trans = true to reset matrix
Custom bases: Use prev_trans = Snap.matrix() for specific starting point

When to use `getLocalMatrix()`:

Read current state: Inspect existing transforms
Clone transforms: Apply same transform to multiple elements
Build upon transforms: Get matrix, modify it, apply with addTransform()

When to use `addTransform()`:

Programmatic transforms: Calculate matrices from data
Physics engines: Apply forces as matrix operations
Complex compositions: Build transforms step-by-step

Key points:

Transform order matters: translate().rotate() ≠ rotate().translate()
Transforms compose: Multiple method calls add together
Center points: Specify (cx, cy) for rotation and scale centers
Reflection: Use reflect() for mirroring or negative scale values
Animation: Use animateTransform() for smooth transitions

12. What's Next

In this tutorial we learned:

Direct transform methods: translate(), rotate(), scale(), reflect()
Understanding prev_trans for relative vs absolute transforms
Reading transforms with getLocalMatrix()
Building transforms with addTransform()
Animating transforms with animateTransform() and translateAnimate()
Transform composition and ordering

In the next tutorial (Loading and Managing External SVG) we'll learn how to:

Load external SVG files with Snap.load()
Query elements with select() and selectAll()
Manage IDs and references with getId() and setIdFollowRefs()
Navigate hierarchy with closest() and selectParent()
Track references with getReferringToMe()

The foundation of structure (Tutorial 1), styling (Tutorial 2), and transforms (Tutorial 3) gives us complete control over SVG creation. Next we'll learn to load and reuse existing SVG assets.

Styling and Attributes with the new Snap.svg (Basics - part 2)

Orlin Vakarelov — Mon, 15 Dec 2025 19:52:28 +0000

This is the second tutorial in our Snap.svg series. In the first part we learned how to build hierarchical SVG structures with g(), g_a(), and Snap.FORCE_AFTER. Now we want to make those shapes look good by learning how to:

set visual attributes like fill, stroke, opacity, etc. using attr(),
apply inline styles directly to the style property with setStyle(),
understand the style precedence hierarchy (inline style > CSS > attribute),
manage CSS classes with addClass(), removeClass(), toggleClass(),
automatically generate and retrieve element IDs with getId(),
build an interactive color palette that responds to user clicks.

The underlying theme is that Snap.svg gives you fine-grained control over how attributes and styles are applied, with clear methods for each approach.

Forked + extended Snap.svg: https://github.com/vakarelov/Snap.svg
Access to the library: https://iaesth.ca/dist/snap.svg_ia.min.js

Nest:Transform System

Building SVGs with the new Snap.svg

Some Cool Demos: Some fun with the new Snap.SVG

1. Understanding the Style Precedence Hierarchy

Before we dive into code, it's important to understand how browsers determine which styles to apply when multiple sources define the same property. The precedence order is:

Inline style attribute (highest priority)
CSS rules (from <style> tags or external stylesheets)
SVG presentation attributes (like fill="red")

This means:

If you set fill via setStyle() (inline style), it will override any CSS rules or attributes
If you set fill via CSS, it will override attribute values
Attribute values are the baseline and have lowest priority

Snap.svg respects this hierarchy and provides methods to target each level explicitly.

2. Basic Attribute Styling with `attr()`

The attr() method is both a getter and a setter for attributes. It intelligently decides whether to set values as presentation attributes or route them to the style property. These have the lowest precedence but are the most common way to style SVG elements.

<div id="container">
  <svg id="mySvg" width="400" height="300" style="border: 1px solid #ccc;"></svg>
</div>

<script src="https://iaesth.ca/dist/snap.svg_ia.min.js"></script>
<script src="basic-attr.js"></script>

Example: Colored Rectangles with Attributes

// basic-attr.js
var s = Snap("#mySvg");

// Create a group to hold our shapes
var group = s.g().attr({ id: "attrGroup" });

// Rectangle 1: Basic fill and stroke via attr() - object syntax
group
  .rect(20, 20, 80, 60)
  .attr({
    fill: "#3498db",        // blue fill
    stroke: "#2c3e50",      // dark border
    strokeWidth: 2
  });

// Rectangle 2: Using attr() with key-value syntax (alternative way)
var rect2 = group.rect(120, 20, 80, 60);
rect2.attr("fill", "#e74c3c");           // Set fill
rect2.attr("opacity", 0.7);              // Set opacity
rect2.attr("stroke", "#c0392b");
rect2.attr("strokeWidth", 3);
rect2.attr("strokeDasharray", "5,3");    // dashed: 5px dash, 3px gap


// Rectangle 3: No fill, thick rounded stroke
group
  .rect(220, 20, 80, 60)
  .attr({
    fill: "none",
    stroke: "#2ecc71",
    strokeWidth: 4,
    strokeLinecap: "round",  // rounded ends
    strokeLinejoin: "round"  // rounded corners
  });

// Rectangle 4: Gradient-ready (we'll use a color for now)
group
  .rect(320, 20, 80, 60)
  .attr({
    fill: "#f39c12",
    stroke: "#e67e22",
    strokeWidth: 2,
    rx: 10,                  // rounded corners
    ry: 10
  });

Output: Four rectangles in a row, each with different fill, stroke, and opacity settings applied as attributes.

`attr()` as Getter and Setter

The attr() method has two forms:

// Setter: attr(key, value) or attr({key: value, ...})
element.attr("fill", "red");              // Set single attribute
element.attr({ fill: "red", opacity: 0.5 }); // Set multiple attributes

// Getter: attr(key)
var currentFill = element.attr("fill");   // Get attribute value
var currentOpacity = element.attr("opacity");

Using `attr_force()` for Pure Presentation Attributes

The attr() method is smart - it may automatically route some properties to the style attribute for better CSS interaction. If you need to force a value to be a presentation attribute (not in the style), use attr_force():

// Smart attr() - may route to style or attribute
element.attr("fill", "blue");

// Force as presentation attribute
element.attr_force("fill", "blue");  // Guarantees attribute, not style

// This is useful when you explicitly want:
// <rect fill="blue" /> 
// instead of:
// <rect style="fill: blue" />

When to use attr_force():

When you specifically need a presentation attribute (e.g., for SVG manipulation)
When you want CSS to easily override (attributes have lowest precedence)
When working with SVG editors or tools that expect presentation attributes

Common Attributes

Fill: fill - color, gradient, pattern, or "none"
Stroke: stroke, strokeWidth, strokeDasharray, strokeLinecap, strokeLinejoin
Opacity: opacity (0 to 1), fillOpacity, strokeOpacity
Geometry: Element-specific like x, y, width, height, rx, ry, r, cx, cy

3. Inline Styles with `setStyle()` - Flexible Input

The setStyle() method sets properties directly on the element's style attribute, giving them highest priority in the cascade. What makes setStyle() powerful is its flexibility - it accepts multiple input formats.

Multiple Ways to Use `setStyle()`

// inline-style.js
var s = Snap("#mySvg");
var group = s.g().attr({ id: "styleGroup" });

// Create circles for demonstration
var circle1 = group.circle(60, 140, 30);
var circle2 = group.circle(160, 140, 30);
var circle3 = group.circle(260, 140, 30);
var circle4 = group.circle(360, 140, 30);

// Method 1: Object with multiple properties
circle1.setStyle({
  fill: "red",
  stroke: "#c0392b",
  strokeWidth: 3,
  opacity: 0.8
});

// Method 2: Single property with key-value syntax
circle2.setStyle("fill", "green");
circle2.setStyle("strokeWidth", "2");
circle2.setStyle("stroke", "#27ae60");

// Method 3: CSS string (like inline style attribute)
circle3.setStyle("fill: blue; stroke: navy; stroke-width: 2;");

// Method 4: Mixed - single property can also use object
circle4.setStyle({ fill: "orange" });
circle4.setStyle("stroke", "darkorange");

// All circles have inline styles that override any CSS or attributes

Understanding the Flexibility

// All these are equivalent and set inline styles:

// Style 1: Object notation (most common)
element.setStyle({
  fill: "purple",
  strokeWidth: 4,
  opacity: 0.5
});

// Style 2: Property-value pairs (useful for single properties)
element.setStyle("fill", "purple");
element.setStyle("strokeWidth", 4);
element.setStyle("opacity", 0.5);

// Style 3: CSS string (useful when copying from CSS)
element.setStyle("fill: purple; stroke-width: 4; opacity: 0.5");

// Note: CSS properties use hyphens (stroke-width), 
// but object properties use camelCase (strokeWidth)

Demonstrating Style Override

Let's see how inline styles from setStyle() override attributes:

// Start with attribute styling
var circle = s.circle(200, 100, 40);
circle.attr("fill", "lightblue");  // Attribute: lightblue

// Override with inline style (highest priority)
circle.setStyle("fill", "darkred");  // Now displays darkred

// The attribute is still there, but style takes precedence
// Reading attr() will still show "lightblue"
// But the rendered color is darkred due to inline style

Result:

Circle 1: red with stroke (object notation)
Circle 2: green with stroke (property-value pairs)
Circle 3: blue with navy stroke (CSS string)
Circle 4: orange (mixed approach)

Why setStyle() flexibility matters:

Object notation: Best for multiple properties at once
Key-value pairs: Best for single dynamic property updates
CSS strings: Useful when copying styles from CSS or other sources
All formats result in inline style attribute with highest precedence

4. CSS Classes with Enhanced Class Management

CSS classes provide reusable styling that sits between inline styles and attributes in precedence. Snap.svg makes class management powerful and flexible:

<style>
  /* CSS rules for our classes */
  .highlighted {
    fill: #f1c40f !important;
    stroke: #f39c12 !important;
    stroke-width: 4;
  }

  .dimmed {
    opacity: 0.3;
  }

  .fancy-stroke {
    stroke: #9b59b6;
    stroke-width: 3;
    stroke-dasharray: 10,5;
  }

  .state-active { fill: #2ecc71; }
  .state-warning { fill: #f39c12; }
  .state-error { fill: #e74c3c; }

  .theme-dark { stroke: #2c3e50; }
  .theme-light { stroke: #ecf0f1; }
</style>

Basic Class Operations

// css-classes.js
var s = Snap("#mySvg");
var group = s.g().attr({ id: "classGroup" });

// Create rectangles
var rect1 = group.rect(20, 220, 70, 50).attr({ fill: "#95a5a6" });
var rect2 = group.rect(110, 220, 70, 50).attr({ fill: "#95a5a6" });
var rect3 = group.rect(200, 220, 70, 50).attr({ fill: "#95a5a6" });
var rect4 = group.rect(290, 220, 70, 50).attr({ fill: "#95a5a6" });

// Apply single class
rect2.addClass("highlighted");              // yellow with thick stroke

// Apply multiple classes (space-separated string)
rect3.addClass("dimmed fancy-stroke");      // semi-transparent with dashed stroke

// Apply multiple classes (array) - Enhanced feature!
rect4.addClass(["highlighted", "fancy-stroke"]); // array syntax


// Toggle a class on click
rect1.click(function() {
  this.toggleClass("highlighted");
});

Advanced: Working with Arrays

Both addClass() and removeClass() accept arrays for batch operations:

var shape = s.circle(200, 100, 40);

// Add multiple classes at once using array
shape.addClass(["state-active", "theme-dark", "animated"]);

// Remove multiple classes using array
shape.removeClass(["animated", "theme-dark"]);

// Result: shape only has "state-active" class

Advanced: Prefix-Based Class Removal

The removeClass() method has a powerful prefix parameter that removes all classes starting with a given prefix:

var element = s.rect(50, 50, 100, 100);

// Add multiple state classes
element.addClass(["state-active", "state-warning", "theme-dark", "theme-light"]);

// Remove all classes starting with "state-" using prefix=true
element.removeClass("state-", true);  // Removes state-active and state-warning

// Result: element only has theme-dark and theme-light

// You can also remove all "theme-" classes
element.removeClass("theme-", true);  // Now no classes remain

Use case for prefix removal: When you have mutually exclusive class groups (like state-* or theme-*), you can clear all variants at once before applying a new one.

Advanced: Pattern Matching with `matchClass()`

The matchClass() method finds classes matching a regular expression:

var element = s.circle(150, 150, 50);
element.addClass(["user-admin", "user-editor", "status-online", "theme-blue"]);

// Find all classes starting with "user-"
var userClasses = element.matchClass(/^user-/);
// Returns: ["user-admin", "user-editor"]

// Find all classes ending with "-online"
var statusClasses = element.matchClass(/-online$/);
// Returns: ["status-online"]

// Find all classes containing "theme"
var themeClasses = element.matchClass(/theme/);
// Returns: ["theme-blue"]

Convenience Method: `classesStartWith()`

For the common pattern of finding classes by prefix, there's a helper:

var element = s.rect(10, 10, 80, 80);
element.addClass(["btn-primary", "btn-large", "icon-check", "theme-dark"]);

// Get all classes starting with "btn-"
var buttonClasses = element.classesStartWith("btn-");
// Returns: ["btn-primary", "btn-large"]

// Equivalent to: element.matchClass(/^btn-/)

Advanced: `hasClass()` with Multiple Classes

The hasClass() method can check multiple classes with conjunctive (AND/OR) logic:

var element = s.ellipse(200, 200, 60, 40);
element.addClass(["active", "visible", "enabled"]);

// Check if ANY of the classes exist (OR logic, default)
var hasAny = element.hasClass(["active", "hidden"], false);
// Returns: true (has "active")

// Check if ALL classes exist (AND logic, conjunctive=true)
var hasAll = element.hasClass(["active", "visible"], true);
// Returns: true (has both)

var hasAllIncludingMissing = element.hasClass(["active", "hidden"], true);
// Returns: false (missing "hidden")

Complete Example: State Management

Here's a practical example using all the class features:

// state-management.js
var s = Snap("#mySvg");

// State management system - circle that changes based on state
var statusIndicator = s.circle(100, 75, 40).attr({ fill: "#95a5a6" });

// Create clickable state buttons
var buttonData = [
  { x: 200, state: "active", label: "Active", color: "#27ae60" },
  { x: 300, state: "warning", label: "Warning", color: "#f39c12" },
  { x: 400, state: "error", label: "Error", color: "#e74c3c" },
  { x: 500, state: "inactive", label: "Inactive", color: "#95a5a6" }
];

function setState(element, newState, color) {
  // Remove all previous state classes using prefix
  element.removeClass("state-", true);

  // Add the new state class
  element.addClass("state-" + newState);

  // Update visual appearance
  element.attr({ fill: color });

  // Update info text
  infoText.attr({ text: "Click buttons to change state. Current: " + newState });
}

// Create buttons
buttonData.forEach(function(btn) {
  var rect = s.rect(btn.x, 50, 80, 30, 5).attr({
    fill: "#3498db",
    stroke: "#2980b9",
    strokeWidth: 2,
    cursor: "pointer"
  });

  var label = s.text(btn.x + 40, 70, btn.label).attr({
    fontSize: 12,
    fill: "white",
    textAnchor: "middle",
    pointerEvents: "none"
  });

  // Add click handler
  rect.click(function() {
    setState(statusIndicator, btn.state, btn.color);
  });
});

// Info text
var infoText = s.text(20, 130, "Click buttons to change state. Current: inactive").attr({ 
  fontSize: 14, 
  fill: "#333"
});

// Set initial state
setState(statusIndicator, "inactive", "#95a5a6");

Interactive Demo:

Click buttons to change the state indicator color
Uses removeClass("state-", true) to remove all state classes by prefix
Uses addClass() to set new state
State changes update both the class and visual appearance

Note: CSS with !important can override inline styles, but generally inline styles have highest priority.

Summary of Enhanced Class Methods

addClass(value): value can be string or array
removeClass(value, prefix): value can be string or array; prefix=true removes by prefix
hasClass(value, conjunctive): value can be string or array; conjunctive=true requires all
toggleClass(value, flag): add/remove based on presence or flag
matchClass(regex): find classes matching regex pattern
classesStartWith(prefix): shorthand for common prefix matching

5. Element IDs with `getId()`

Every Snap element has an internal ID, but it's not always set as a DOM attribute. The getId() method ensures the element has an id attribute set, auto-generating one if needed:

// element-ids.js
var s = Snap("#mySvg");

var circle = s.circle(350, 50, 25).attr({ fill: "#e74c3c" });

// Get the ID (will auto-generate if not set)
var id = circle.getId();
// Returns something like: "Snapsvg_123"

// Now we can reference it
var found = document.getElementById(id);  // finds the element

// Set a custom ID
circle.attr({ id: "myCustomCircle" });
var newId = circle.getId();  // Returns: "myCustomCircle"

Why this matters: Some operations require elements to have DOM id attributes (like gradients, clips, masks). getId() ensures an ID exists without you having to manage it manually.

6. Style Precedence in Action

Let's see all three levels (attribute, CSS, inline style) working together:

<style>
  .css-fill {
    fill: orange;
  }
</style>

// precedence-demo.js
var s = Snap("#mySvg");
var group = s.g().attr({ id: "precedenceDemo", transform: "translate(0, 150)" });

// Create three circles to demonstrate precedence
var circles = [];
for (var i = 0; i < 3; i++) {
  circles[i] = group.circle(80 + i * 120, 80, 35);
}

// Circle 1: Attribute only (lowest priority)
circles[0].attr({
  fill: "lightblue",
  stroke: "#2980b9",
  strokeWidth: 2
});

// Circle 2: Attribute + CSS class (CSS wins)
circles[1].attr({
  fill: "lightblue"  // This will be overridden by CSS
});
circles[1].addClass("css-fill");

// Circle 3: Attribute + CSS + inline style (inline style wins)
circles[2].attr({
  fill: "lightblue"  // Lowest priority
});
circles[2].addClass("css-fill");  // Middle priority
circles[2].setStyle("fill", "purple");  // Highest priority - this wins!

// Add labels
group.text(45, 130, "Attribute").attr({ fontSize: 11, fill: "#333" });
group.text(155, 130, "CSS").attr({ fontSize: 11, fill: "#333" });
group.text(250, 130, "Inline Style").attr({ fontSize: 11, fill: "#333" });

Result:

Circle 1: lightblue (from attribute)
Circle 2: orange (CSS overrides attribute)
Circle 3: purple (inline style overrides both)

This clearly demonstrates the precedence hierarchy!

7. Interactive Color Palette

Now let's combine everything we've learned into an interactive demo where clicking rectangles changes colors using different styling methods:

// color-palette.js
var s = Snap("#mySvg");

// Create a clean canvas
s.clear();

var palette = s.g().attr({ id: "colorPalette" });

// Color options
var colors = [
  { name: "Attribute", fill: "#3498db", method: "attr" },
  { name: "Inline Style", fill: "#e74c3c", method: "style" },
  { name: "CSS Class", fill: "#2ecc71", method: "class" }
];

// Selected color indicator
var selectedColor = colors[0];

// Create color swatches
colors.forEach(function(color, i) {
  var swatch = palette
    .rect(20 + i * 130, 20, 100, 60)
    .attr({
      fill: color.fill,
      stroke: "#333",
      strokeWidth: 2,
      cursor: "pointer"
    });

  swatch.data("colorInfo", color);

  // Add click handler
  swatch.click(function() {
    // Remove highlight from all swatches
    palette.selectAll("rect").forEach(function(rect) {
      rect.attr({ strokeWidth: 2 });
    });

    // Highlight selected
    this.attr({ strokeWidth: 5 });
    selectedColor = this.data("colorInfo");
  });

  // Add label
  palette
    .text(20 + i * 130 + 50, 95, color.name)
    .attr({
      fontSize: 12,
      textAnchor: "middle",
      fill: "#333"
    });
});

// Create target shapes that will be colored
var targetGroup = s.g().attr({ id: "targets", transform: "translate(0, 130)" });

var shapes = [
  targetGroup.circle(70, 60, 30), 
  targetGroup.rect(120, 30, 60, 60),
  targetGroup.ellipse(250, 60, 40, 30), 
  targetGroup.polygon([[350,30], [390,50], [380,90], [320,90], [310,50]])
];

shapes.forEach(function(shape) {
  shape.attr({
    fill: "#bdc3c7",
    stroke: "#7f8c8d",
    strokeWidth: 2,
    cursor: "pointer"
  });

  // Click to apply selected color using selected method
  shape.click(function() {
    var color = selectedColor.fill;

    if (selectedColor.method === "attr") {
      // Method 1: Set as attribute (can be overridden by CSS/inline)
      this.attr({ fill: color });

    } else if (selectedColor.method === "style") {
      // Method 2: Set as inline style (highest priority)
      this.setStyle("fill", color);

    } else if (selectedColor.method === "class") {
      // Method 3: Use CSS class
      // First remove any previous color classes
      this.removeClass("color-blue color-red color-green");

      // Add appropriate class
      if (color === "#3498db") {
        this.addClass("color-blue");
      } else if (color === "#e74c3c") {
        this.addClass("color-red");
      } else if (color === "#2ecc71") {
        this.addClass("color-green");
      }
    }
  });
});

// Add instruction text
s.text(200, 240, "Click a color method above, then click shapes to apply")
  .attr({
    fontSize: 12,
    textAnchor: "middle",
    fill: "#666"
  });

// Highlight first swatch by default
palette.select("rect").attr({ strokeWidth: 5 });

<style>
  .color-blue { fill: #3498db; }
  .color-red { fill: #e74c3c; }
  .color-green { fill: #2ecc71; }
</style>

How it works:

Click a color swatch at the top to select a coloring method
Click any shape below to apply the color using the selected method
Try different methods on the same shape to see precedence in action

8. Best Practices Summary

When to use `attr()`:

Default styling for elements
Geometry properties (x, y, width, height, etc.)
When you want CSS to be able to override (lowest precedence)

When to use `setStyle()`:

When you need guaranteed priority over CSS
Dynamic styling that must override everything
When working with properties that must be inline

When to use CSS classes:

Reusable themes and styles
State-based styling (hover, active, etc.)
When you want semantic styling (.highlighted, .disabled, etc.)

Key points:

Precedence: Inline style > CSS > Attribute
attr() is smart: It may route some properties to style automatically
getId(): Ensures elements have DOM IDs when needed
Classes: Use addClass(), removeClass(), toggleClass(), hasClass()

9. What's Next

In this tutorial we learned:

Setting visual attributes with attr()
Applying inline styles with setStyle()
Understanding style precedence (inline > CSS > attribute)
Managing CSS classes with addClass() and friends
Working with element IDs using getId()
Building an interactive color palette

In the next tutorial (Transform System Deep Dive) we'll learn how to:

Position elements with direct transform methods (translate(), scale(), rotate())
Build and compose transformation matrices
Animate transforms smoothly
Work with local and global coordinate systems

The foundation of structure (Tutorial 1) and styling (Tutorial 2) will let us create visually interesting graphics. Adding transforms will give us full spatial control.

Building SVGs with the new Snap.svg (Basics - part 1)

Orlin Vakarelov — Tue, 09 Dec 2025 03:40:39 +0000

This is the first in a series of tutorials on how to use Snap.svg to build SVG graphics programmatically. In this initial part we keep the technical ambitions modest: we want to understand how to

create a simple SVG on a page,
build groups and shapes with g() and chaining,
add another group after a group with g_a(), and
insert a shape after a group using Snap.FORCE_AFTER.

Once we have this basic control over structure, we will close with a more elaborate example: a relatively large and visually interesting SVG built from one nested, multi-line chain of Snap calls.

The underlying theme is that you can treat Snap.svg not only as a drawing API, but as a compact syntax for specifying hierarchical SVG structure.

Forked + extended Snap.svg: https://github.com/vakarelov/Snap.svg
Access to the library: https://iaesth.ca/dist/snap.svg_ia.min.js

Next: Styling and Attributes

Previous: Some fun with the new Snap.SVG

1. HTML: starting from an empty `<svg>`

We begin with the minimal HTML needed for our example: a container and an empty <svg> element that Snap will populate.

<div id="container">
  <svg id="mySvg" width="320" height="180" style="border: 1px solid #ccc;"></svg>
</div>

<script src="https://iaesth.ca/dist/snap.svg_ia.min.js"></script>
<script src="main.js"></script>

The <svg> starts empty. All groups and shapes will be created by the JavaScript in main.js.

2. One inner group via `g().attr().rect().line()...`

The first structural step is to create a single inner group inside the SVG. Everything else will live under this group, rather than being attached directly to the root <svg>. This will matter later when we start adding more groups and using g_a().

// Wrap the <svg id="mySvg"> element with Snap.
var s = Snap("#mySvg");

// Create an inner group to hold the rest of the scene.
// (We call g() on 's' only once here.)
var rootGroup = s
  .g()
  .attr({
    id: "rootGroup"
  });

Now we build a first logical group inside rootGroup, and we populate it with a rectangle and a line. Every call is anchored on rootGroup, so that the resulting elements sit inside it.

// First inner group inside rootGroup.
var group1 = rootGroup
  .g()
  .attr({
    id: "group1"
  });

// A rectangle inside group1.
group1
  .rect(20, 20, 100, 50) // x, y, width, height
  .attr({
    fill: "steelblue"
  });

// A line inside group1.
group1
  .line(20, 80, 200, 80) // x1, y1, x2, y2
  .attr({
    stroke: "black",
    strokeWidth: 2
  });

If we translate this back into plain SVG, we get essentially:

<svg id="mySvg">
  <g id="rootGroup">
    <g id="group1">
      <rect x="20" y="20" width="100" height="50" fill="steelblue" />
      <line x1="20" y1="80" x2="200" y2="80" stroke="black" stroke-width="2" />
    </g>
  </g>
</svg>

So far the hierarchy is simple:

rootGroup (inner wrapper group)
- group1
- one rect
- one line

3. Adding another group after `group1` with `g_a()`

Now we want to place another group after group1 as a sibling, but still inside rootGroup. Conceptually, the result should be:

<g id="rootGroup">
  <g id="group1">...</g>
  <g id="group2">...</g>
</g>

This is exactly the role of .g_a() in our setup: it is meaningful only when we already have an inner group structure to attach to. We do not call g_a() on the raw SVG; we call it on the inner grouping layer.

// Second group as a sibling of group1, inside rootGroup.
var group2 = rootGroup
  .g_a()
  .attr({
    id: "group2",
    transform: "translate(140, 0)" // move it to the right
  });

// A rectangle inside group2.
group2
  .rect(20, 20, 100, 50)
  .attr({
    fill: "tomato"
  });

// A line inside group2.
group2
  .line(20, 80, 200, 80)
  .attr({
    stroke: "gray",
    strokeWidth: 2
  });

The structural effect is:

<svg id="mySvg">
  <g id="rootGroup">
    <g id="group1">
      <!-- rect, line -->
    </g>
    <g id="group2" transform="translate(140, 0)">
      <!-- rect, line -->
    </g>
  </g>
</svg>

So g_a() functions as “another group after the previous group under the same parent”.

4. Adding a shape after the groups with `Snap.FORCE_AFTER`

So far, we can:

add shapes inside a group (via group1.rect(...), group2.line(...), etc.), and
add more groups after one another (via rootGroup.g_a()).

But hierarchies are not limited to groups. We may want a shape (for example, a rectangle) that is a sibling of those groups, rather than a child of one of them. Here we use Snap.FORCE_AFTER.

Any element constructor (e.g. rect, circle, path) can be instructed to insert its new node after the previous child of the same parent by passing Snap.FORCE_AFTER as the first argument:

// A rectangle AFTER group2, still a child of rootGroup.
rootGroup
  .rect(Snap.FORCE_AFTER, 10, 120, 100, 30)
  .attr({
    fill: "lightgreen",
    stroke: "black",
    strokeWidth: 1
  });

Conceptually:

<g id="rootGroup">
  <g id="group1">...</g>
  <g id="group2">...</g>
  <rect x="10" y="120" width="100" height="30" fill="lightgreen" ... />
</g>

The same pattern applies to other constructors:

rootGroup
  .circle(Snap.FORCE_AFTER, 260, 140, 15)
  .attr({ fill: "gold" });

rootGroup
  .text(Snap.FORCE_AFTER, 130, 150, "After groups")
  .attr({ fontSize: 12 });

In each case, the parent (which can be accessed with .parent()) remains rootGroup, but the new element is created after whatever the last child was.

5. A larger, nested-chain example

The previous sections were deliberately simple. The real payoff of this style shows up when you let yourself write one nested, multi-line chain that mirrors the grouping structure of a more complex scene.

What follows is an intentionally verbose example. The goal is not to be clever; the goal is to see the hierarchy directly in the code by aligning indentation with the group nesting. Think of it as a sketch of a small landscape:

a sky and ground
a sun with rays
some clouds
a house with a roof, door, and windows
a couple of trees
a path leading to the house

We write it as one chained expression, and we visually align it according to group depth.

// Wrap the <svg id="mySvg"> element with Snap.
var s = Snap("#mySvg");
var scene =
  s.g().attr({
    id: "sceneRoot"
  })
    // Background: sky and ground
    .rect(0, 0, 320, 120).attr({
      fill: "#87ceeb" // sky
    })
    .rect(0, 120, 320, 60).attr({
      fill: "#228B22" // ground
    })

    // Sun group
    .g().attr({
      id: "sunGroup",
      transform: "translate(260, 30)"
    })
      .circle(0, 0, 14).attr({
        fill: "#FFD700",
        stroke: "#FFA500",
        strokeWidth: 2
      })
      .line(-24, 0, -14, 0).attr({ stroke: "#FFD700", strokeWidth: 2 })
      .line(14, 0, 24, 0).attr({ stroke: "#FFD700", strokeWidth: 2 })
      .line(0, -24, 0, -14).attr({ stroke: "#FFD700", strokeWidth: 2 })
      .line(0, 14, 0, 24).attr({ stroke: "#FFD700", strokeWidth: 2 })
      .line(-18, -18, -10, -10).attr({ stroke: "#FFD700", strokeWidth: 2 })
      .line(10, -10, 18, -18).attr({ stroke: "#FFD700", strokeWidth: 2 })
      .line(-18, 18, -10, 10).attr({ stroke: "#FFD700", strokeWidth: 2 })
      .line(10, 10, 18, 18).attr({ stroke: "#FFD700", strokeWidth: 2 })
    // refer to the parent (sunGroup) to add the next sibling
    .parent() //sunGroup
    // Clouds group (sibling of sunGroup)
    .g_a().attr({
      id: "cloudsGroup"
    })
      .g().attr({
        id: "cloud1",
        transform: "translate(70, 20)"
      })
        .ellipse(0, 0, 18, 10).attr({ fill: "white" })
        .ellipse(10, -5, 14, 9).attr({ fill: "white" })
        .ellipse(-10, -5, 14, 9).attr({ fill: "white" })
      .parent() //cloudsGroup
      .g_a().attr({
        id: "cloud2",
        transform: "translate(130, 30)"
      })
        .ellipse(0, 0, 16, 9).attr({ fill: "white" })
        .ellipse(9, -4, 12, 8).attr({ fill: "white" })
        .ellipse(-9, -4, 12, 8).attr({ fill: "white" })
      .parent() //cloud2
    .parent() //cloudsGroup

    // Path group (sibling of treesGroup)
    .g_a().attr({
      id: "pathGroup",
      transform: "translate(75, 115)"
    })
      .path("M -5,0 Q 0,10 5,20 T 15,40").attr({
        fill: "none",
        stroke: "#d2b48c",
        strokeWidth: 10,
        strokeLinecap: "round"
      })
    .parent() //pathGroup
    // House group (sibling of pathGroup)
    .g_a().attr({
      id: "houseGroup",
      transform: "translate(70, 80)"
    })
      .rect(-30, 0, 60, 40).attr({
        fill: "#ffe4c4",
        stroke: "#8b4513",
        strokeWidth: 2
      })
      .polygon("-34,0 0,-26 34,0").attr({
        fill: "#8b0000",
        stroke: "#5a0000",
        strokeWidth: 2
      })
      .rect(-8, 18, 16, 22).attr({
        fill: "#deb887",
        stroke: "#8b4513",
        strokeWidth: 1.5
      })
      .rect(-22, 10, 12, 10).attr({
        fill: "#add8e6",
        stroke: "#00008b",
        strokeWidth: 1
      })
      .rect(10, 10, 12, 10).attr({
        fill: "#add8e6",
        stroke: "#00008b",
        strokeWidth: 1
      })

    .parent() //houseGroup
    // Trees group (sibling of houseGroup)
    .g_a().attr({
      id: "treesGroup",
      transform: "translate(220, 90)"
    })
      .g().attr({ id: "tree1", transform: "translate(-20, 0)" })
        .rect(-3, 10, 6, 20).attr({
          fill: "#8b4513"
        })
        .circle(0, 4, 10).attr({
          fill: "#2e8b57"
        })
      .parent() //tree1
      .g_a().attr({ id: "tree2", transform: "translate(10, -4)" })
        .rect(-3, 12, 6, 22).attr({
          fill: "#8b4513"
        })
        .circle(0, 5, 11).attr({
          fill: "#2e8b57"
        });

A few observations about this pattern:

The left margin of each method call tells you which group it belongs to. Deeper indentation corresponds to deeper nesting.
Each g() introduces a new grouping context; each g_a() introduces another group at the same depth, i.e., a sibling.
The result is a scene with more than 25 elements (backgrounds, sun, rays, multiple clouds, house details, trees, and a path), but the code is still readable as structure rather than a flat list of operations.

Nothing forces you to use exactly this layout; the point is that Snap’s API, extended with g_a() and Snap.FORCE_AFTER, allows you to treat JavaScript as a hierarchy notation for SVG, rather than an unstructured sequence of drawing calls.

7. What comes next

In this first tutorial we:

created an SVG and an inner group,
built simple shapes inside a group with g() and attr,
added a sibling group with g_a(),
inserted a shape after existing groups with Snap.FORCE_AFTER, and
sketched a larger scene using one nested, multi-line chain to make the grouping structure explicit.

In the next parts of this series we can push further:

Styles
Transforms
Loading external SVG
and more

The underlying strategy will remain the same: use Snap’s grouping and ordering primitives to keep the structure of your SVG visible in the shape of your code.

Reintroducing Snap.svg: A Shape‑First Alternative to D3.js in 2025 (With Geometry, 3D, and TypeScript)

Orlin Vakarelov — Sat, 06 Dec 2025 21:48:59 +0000

First a quick remark about scope. This is not a full manual for Snap.svg, nor is it a comprehensive comparison with the wider visualization ecosystem. My aim here is narrower and, I hope, more useful: to reintroduce a “classic” SVG library that many people wrote off as abandoned, and to explain why I think it is still a compelling alternative to D3.js for interactive SVG in 2025.

The short version:

The original Snap.svg repo at Adobe has been effectively frozen for years.
Over the last decade I’ve been extending a fork of Snap.svg with geometry utilities, interaction primitives, UI‑building helpers, and TypeScript types, while keeping the original API intact.
On top of that, there is now a growing toolkit for non‑linear warps, 3D‑ish transforms, and Bezier‑based 3D projections.

This post is the first in a series that will unpack those pieces and show how to use them in practice.

A brief history: Snap.svg and why it mattered

Snap.svg was originally created by Dmitry Baranovskiy (of Raphaël fame) and hosted at Adobe as part of their web platform work:

Official Adobe repo: https://github.com/adobe-webplatform/Snap.svg/

The core design assumption of Snap.svg was simple but powerful: if the browser already gives you SVG as a first‑class scene graph (paths, groups, transforms, events, etc.), then the JavaScript library should help you work with that directly, not replace it with its own retained‑mode canvas abstraction.

Concretely, this gave you:

A thin wrapper around native SVG elements Snap returns a “paper”; you create shapes, group them, style them, and animate them directly as SVG.
A coherent API for transforms and groupings You work with groups, transforms, and bounding boxes in a uniform way.
A minimal mental model You are still working with SVG; Snap just makes that pleasant.

That combination made Snap.svg a good fit for icons, dashboards, micro‑interactions, and “SVG as UI” long before “SVG UI” was fashionable.

The official repository, however, has been stagnant for years. No modern builds, no TypeScript, and—crucially—no evolution of the geometry layer. The core ideas are still sound; the ecosystem around them just stopped moving.

Why Snap.svg (rather than D3.js) in 2025?

The obvious question is why you would reach for Snap.svg when D3.js (and a crowd of successors) exists.

Very roughly:

D3 is data‑first. It shines when you have a non‑trivial data model, need a flexible layout pipeline, and want to bind everything to selections.
Snap.svg is shape‑first. It shines when you already know the shapes you want (icons, widgets, diagrams, controls) and you want to manipulate them as SVG primitives with a rich geometry API.

If what you need is:

A draggable diagram editor
Interactive icons, badges, and widgets
Geometry‑heavy UIs (flow fields, Voronoi overlays, hulls, 3D‑ish curves)
SVG‑based UI components that you want to ship as part of a design system

…then the friction of going through D3’s data join model can be more of a distraction than a benefit. At that point, a library that says “give me an <svg>, I will give you a useful geometry/animation/interaction layer” is often closer to what you want.

That is exactly the design stance of this fork.

The fork: geometry, interaction, UI, and typing on top of Snap.svg

The extended fork lives here:

Forked + extended Snap.svg: https://github.com/vakarelov/Snap.svg

The central constraint is conservative: the original Snap.svg API remains intact. On top of that, the fork adds:

Bezier / PolyBezier tooling
- Higher‑level Bezier helpers (including 3D‑ish curves) and utilities for constructing and editing curves.
Polygon operations
- Convex and concave hulls, SAT‑style overlap checks, and helpers for morphology‑like operations on polygonal regions.
Robust BBox and geometry helpers
- Bounding‑box extensions that behave well under transforms, plus richer geometry primitives exposed on elements and the paper.
Element and Paper extensions
- Higher‑level drawing and layout helpers (for example, grid construction and generalized transforms).
Interaction & GUI primitives
- “Smart drag” behavior, constrained motion, localized warp fields, and Bezier control‑point editing, all expressed in terms of SVG primitives.
Color palettes and UI utilities
- Practical helpers for building in‑SVG UI: grids, overlays, control panels, labels, etc.
Comprehensive TypeScript types
- A proper type layer for the Snap API and the new geometry/interaction extensions, which makes working in modern tooling substantially more tractable.

The point is not to turn Snap into something else; it is to make the “shape‑first” approach viable for the kinds of problems front‑end developers actually face now.

Towards 3D and non‑linear transforms

So far I have spoken mostly in the abstract: geometry, interaction, “UI helpers”. To make this more concrete, it is useful to look at the new non‑linear transform and 3D‑ish tools, because they stress‑test everything else.

Non‑linear transform gallery

The non‑linear demo page wires Snap into a set of animated “fields” that bend a grid in time:

Some presets sweep a sine wave along a diagonal axis.
Others behave like a cantilever, with the grid “hinging” around a line.
There are radial ripples, bulges, and compound warps combining several effects.

You can see them here:

Non‑linear transforms: https://htmlpreview.github.io/?https://github.com/vakarelov/Snap.svg/master/demos/non-linear/index.html

Conceptually, each demo defines a time‑dependent transform over the SVG plane and asks Snap to apply it to every point of a grid. Many of these fields internally use 3D transforms (rotations in depth, perspective projection) and then project back to 2D, which is why they feel “3D‑ish” even though they are rendered in plain SVG.

The point is not that every UI will use such warps; it is that the extension layer can describe genuine fields over the SVG plane, rather than only global affine transforms.

Localized warps and “warp fields”

The warp demo takes the same machinery but makes it local and interactive:

A circular “warp field” is drawn on the stage.
A smaller “probe” grid can be dragged around inside that field.
Depending on the preset (twist/pinch, bulge, ripple, 3D sine depth), a localized warp is applied only where the probe intersects the field.

You can try it here:

Warp fields (localized non‑linear warps): https://htmlpreview.github.io/?https://github.com/vakarelov/Snap.svg/master/demos/warp/warp_demo.html

This is the sort of interaction Snap.svg is particularly suited for: SVG is your scene graph, and the library gives you a programmable metric on that graph. Warp fields are defined declaratively; dragging and bounding‑box helpers do the bookkeeping.

3D Bezier projection demo

Non‑linear warps are one axis of extension; the other is explicit 3D curves and projections. The Bezier projection demo illustrates this:

You control a 3D Bezier curve via sliders for the Z‑coordinates and direct manipulation of control points in multiple orthographic views.
The same curve is shown simultaneously in:
- XY, XZ, and YZ orthographic projections
- A perspective camera view
- A custom “isometric‑like” projection

The demo is here:

3D Bezier projections: https://htmlpreview.github.io/?https://github.com/vakarelov/Snap.svg/master//demos/bezier/bezier_projection_demo.html

Internally, the curve is represented by an extended Bezier object that supports 3D control points and several projection methods. You can also animate the camera around the curve, orbiting in the XZ plane while maintaining a fixed target.

This is a step towards a full SVG‑based 3D engine for Snap.svg: the geometry layer has to be coherent enough that 3D curves, projections, and camera motion feel like natural extensions of existing 2D concepts (paths, bounding boxes, transforms), not like an unrelated subsystem bolted on the side.

Other demos you can click through right now

If you prefer to start from behavior rather than abstractions, the easiest way into the fork is to explore the demos. They are all built directly on the extended Snap API (no hidden frameworks).

Easing functions in mina.js

Many additional easing functions plus a small “easing construction engine”, with a visual explorer wired to mina (Snap’s animation engine), to help you build temporal curves that match the spatial smoothness of the new geometry tools.

https://htmlpreview.github.io/?https://github.com/vakarelov/Snap.svg/master/demos/easings/index.html
Point‑utils: Voronoi

Demonstrates the point‑geometry utilities by computing a Voronoi diagram over point sets and rendering the cells as interactive SVG polygons.

https://htmlpreview.github.io/?https://github.com/vakarelov/Snap.svg/master/demos/point-utils/voronoi/index.html
Point‑utils: Proximity

A companion demo for proximity and neighborhood queries on point sets, again rendered directly in SVG.

https://htmlpreview.github.io/?https://github.com/vakarelov/Snap.svg/master/demos/point-utils/proximity/index.html

Each of these is deliberately written as “just” Snap code: no bundler is required to understand the core ideas, and (once you build the fork) you can view the sources alongside the running demos.

Getting started with the fork

The GitHub repository of the extended Snap.svg lives here:

https://github.com/vakarelov/Snap.svg

A quick path to experimentation is:

Clone the repo.
Build the distribution bundle.
Include the built file in a static HTML page, in the same spirit as the original Snap.svg library.
Attach Snap to an existing <svg> and start drawing/manipulating shapes using the extended APIs (geometry helpers, warps, Bezier tools, point utilities, etc.), borrowing patterns from the demo sources.

If you are already using Snap.svg from the original Adobe repo, the existing API should continue to work; the new pieces are additive.

What comes next in this series

This post has been mostly conceptual: where Snap.svg comes from, why I think it still deserves attention, and how the fork extends it towards a richer geometry and 3D story.

In the next posts I plan to:

Walk through the geometry primitives in more detail (Bezier/PolyBezier, polygon operations, hulls, SAT overlap).
Show how to build interactive widgets with the drag helpers, BBox utilities, and warp fields.
Dive deeper into the 3D Bezier and camera model, and eventually into the full SVG‑based 3D engine that is being built on top of these pieces.

Questions or gaps? Open an issue in the GitHub repo or ping in the relevant PR—I'm happy to add examples or fill in missing documentation as we go.

This is, in that sense, a reintroduction rather than a eulogy: Snap.svg is not a frozen artifact of the early 2010s, but a living tool that still has quite a bit of headroom for modern interactive SVG work.

Forem: Orlin Vakarelov

Transform System with the new Snap.svg (Basics - part 3)

Previous:

1. Why Direct Transform Methods Matter

2. Basic Translation: Moving Elements

Example: Moving Rectangles

3. Understanding prev_trans: Relative vs Absolute

4. Rotation: Spinning Around a Center

Example: Rotating Rectangles

5. Scaling: Changing Size and Reflection

Example: Scaling and Reflecting

6. Combining Transformations: Order Matters

Example: Transform Order

7. Reading Current Transforms with getLocalMatrix()

Example: Inspecting and Building Transforms

8. Building Matrices with addTransform()

Example: Composing Matrices Programmatically

9. Animated Transforms

Example: Spinning Windmill

10. The reflect() Helper Method

Example: Reflections and Symmetry

11. Best Practices Summary

When to use direct transform methods:

When to use prev_trans parameter:

When to use getLocalMatrix():

When to use addTransform():

Key points:

12. What's Next

Styling and Attributes with the new Snap.svg (Basics - part 2)

Nest:Transform System

Previous:

1. Understanding the Style Precedence Hierarchy

2. Basic Attribute Styling with attr()

Example: Colored Rectangles with Attributes

attr() as Getter and Setter

Using attr_force() for Pure Presentation Attributes

Common Attributes

3. Inline Styles with setStyle() - Flexible Input

Multiple Ways to Use setStyle()

Understanding the Flexibility

Demonstrating Style Override

4. CSS Classes with Enhanced Class Management

Basic Class Operations

Advanced: Working with Arrays

Advanced: Prefix-Based Class Removal

Advanced: Pattern Matching with matchClass()

Convenience Method: classesStartWith()

Advanced: hasClass() with Multiple Classes

Complete Example: State Management

Summary of Enhanced Class Methods

5. Element IDs with getId()

6. Style Precedence in Action

7. Interactive Color Palette

8. Best Practices Summary

When to use attr():

When to use setStyle():

When to use CSS classes:

Key points:

9. What's Next

Building SVGs with the new Snap.svg (Basics - part 1)

Next: Styling and Attributes

Previous: Some fun with the new Snap.SVG

1. HTML: starting from an empty <svg>

2. One inner group via g().attr().rect().line()...

3. Adding another group after group1 with g_a()

4. Adding a shape after the groups with Snap.FORCE_AFTER

5. A larger, nested-chain example

7. What comes next

Reintroducing Snap.svg: A Shape‑First Alternative to D3.js in 2025 (With Geometry, 3D, and TypeScript)

A brief history: Snap.svg and why it mattered

Why Snap.svg (rather than D3.js) in 2025?

The fork: geometry, interaction, UI, and typing on top of Snap.svg

Towards 3D and non‑linear transforms

Non‑linear transform gallery

Localized warps and “warp fields”

3D Bezier projection demo

Other demos you can click through right now

Getting started with the fork

What comes next in this series

3. Understanding `prev_trans`: Relative vs Absolute

7. Reading Current Transforms with `getLocalMatrix()`

8. Building Matrices with `addTransform()`

10. The `reflect()` Helper Method

When to use `prev_trans` parameter:

When to use `getLocalMatrix()`:

When to use `addTransform()`:

2. Basic Attribute Styling with `attr()`

`attr()` as Getter and Setter

Using `attr_force()` for Pure Presentation Attributes

3. Inline Styles with `setStyle()` - Flexible Input

Multiple Ways to Use `setStyle()`

Advanced: Pattern Matching with `matchClass()`

Convenience Method: `classesStartWith()`

Advanced: `hasClass()` with Multiple Classes

5. Element IDs with `getId()`

When to use `attr()`:

When to use `setStyle()`:

1. HTML: starting from an empty `<svg>`

2. One inner group via `g().attr().rect().line()...`

3. Adding another group after `group1` with `g_a()`

4. Adding a shape after the groups with `Snap.FORCE_AFTER`