SVG field guide

Understand the SVG you are editing, not just the picture.

Fourteen focused guides connect SVG source to what appears on the canvas. Two browser-local calculators handle coordinate conversion and cubic curve geometry when the answer needs exact numbers.

Interactive SVG tools

Calculate coordinates and curve geometry

viewBox and coordinates

Convert SVG units and viewport pixels

Apply viewBox scale, meet, slice, alignment, and stretching in both conversion directions.

Curve geometry

Calculate a cubic Bezier curve

Find the point, tangent, angle, approximate length, and SVG path data from four curve points.

Geometry and paths

Build and reshape vector geometry

Reference

Read every SVG path command

Decode M, L, H, V, C, S, Q, T, A, and Z, including relative coordinates and arc flags.

Coordinates

Understand the SVG viewBox

Learn how four values control coordinates, responsive scaling, alignment, whitespace, zoom, and cropping.

Workflow

Edit SVG paths point by point

Read path commands, move anchors and control points, and verify the result in source.

Curves

Understand cubic Bézier curves

Learn how C and S commands use control points to produce smooth, predictable curves.

Conversion

Convert SVG shapes to paths

Know when conversion helps and what happens to rects, circles, ellipses, and polygons.

Placement

Translate, scale, and rotate

Predict transform order, choose a pivot, use nested groups, and understand matrix output.

Paint and presentation

Control how SVG looks and fits

Outlines

Master SVG strokes

Compare linecaps and joins, build dash patterns, control miter spikes, and keep strokes stable while scaling.

Color

Build reusable SVG gradients

Use linear and radial gradients with deliberate stops, units, spread methods, transforms, and IDs.

Effects

Build SVG filter effects

Chain blur, offset, colour, composite, and merge primitives without clipping or losing the source.

Visibility

Choose clipping or masking

Use hard boundaries, soft fades, correct coordinate units, and regions that do not crop effects.

Layout

Make SVG responsive

Combine viewBox, intrinsic ratio, CSS sizing, embedding choices, and preserveAspectRatio.

Quality and publishing

Ship files that stay useful

Inclusive design

Make SVG accessible

Choose text alternatives, title diagrams, label controls, preserve focus, and respect reduced motion.

Performance

Optimize SVG for the web

Reduce unnecessary markup while keeping the visual result, references, and accessibility intact.

Troubleshooting

Debug an invisible SVG

Isolate layout, viewBox, paint, geometry, transforms, references, clips, masks, and filters in the right order.

Learn by changing a real file

Each guide uses standard markup that you can paste into SVG Vector Lab. Keep the source and canvas visible together. Change one value at a time, identify the visual consequence, then undo and try the next value.

If you are new to SVG, begin with viewBox and coordinate scaling, continue with the path command reference, and finish with the point-by-point editing workflow. If you already have a broken file, start with the systematic debugging checklist.

The editor processes SVG in your browser. You can inspect, modify, and export without creating an account or uploading artwork to an application server.