Last updated
SVG Editing Fundamentals
SVG editing involves manipulating XML elements and their attributes to change shapes,
colors, positions, and paths. Unlike raster image editors, SVG editors work with
mathematical descriptions of shapes — moving a circle means changing its cx
and cy attributes, not moving pixels.
Selecting and Transforming Elements
JavaScript
// Select SVG element by ID
const circle = document.getElementById('myCircle');
// Move element
circle.setAttribute('cx', 100);
circle.setAttribute('cy', 150);
// Resize
circle.setAttribute('r', 30);
// Change color
circle.setAttribute('fill', '#3498DB');
circle.setAttribute('stroke', '#2980B9');
circle.setAttribute('stroke-width', '2');
// Apply transform
circle.setAttribute('transform', 'rotate(45, 100, 100) scale(1.5)');
// Get bounding box
const bbox = circle.getBBox();
console.log(bbox.x, bbox.y, bbox.width, bbox.height);SVG Transform Functions
| Transform | Syntax | Effect |
|---|---|---|
| translate | translate(tx, ty) | Move by tx, ty |
| scale | scale(sx, sy) | Scale by factor |
| rotate | rotate(angle, cx, cy) | Rotate around point |
| skewX | skewX(angle) | Skew along X axis |
| skewY | skewY(angle) | Skew along Y axis |
| matrix | matrix(a,b,c,d,e,f) | Full affine transform |