SVG field guide
Understand the SVG you are editing, not just the picture.
Fifteen 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
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
Color and CSS
Change SVG colors with CSS
Use fill, stroke and currentColor, fix overrides, and choose between inline SVG, images and masks.
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.
Understand filled holes
SVG fill-rule: evenodd, nonzero and holes: compare fill rules with an editable compound-path example.
Reuse vector components
SVG symbol and use: reuse artwork without copying paths: a complete two-instance example with sizing and export checks.
Draw diagram arrows
SVG arrowheads with marker: alignment, size and direction: a complete example with anchor, direction and export checks.
Keep text portable
Why SVG text changes font after export: check fonts, sanitisation and the receiving application.