JB SVG

Treat SVG as a small document with geometry, styles, semantics, and behavior. Produce readable source that renders cleanly at every intended size.

Workflow

1. Inspect the surrounding code and determine how the SVG will be used: standalone file, inline HTML, framework component, CSS background, or <img> source. Match the project's syntax and styling conventions.
2. Establish the visual bounds and choose a simple coordinate system. Use 0 0 24 24 for conventional icons when it fits; use dimensions that make the actual geometry easy to reason about for other artwork.
3. Build the large shapes first. Prefer semantic primitives such as <circle>, <rect>, <line>, <polyline>, and <polygon>. Use <path> when the shape requires it.
4. Add styling, reusable definitions, accessibility, and optional motion according to the rules below.
5. Render the result. Inspect it at its smallest and largest intended sizes, then validate the markup. Finish only when the bounds, proportions, clipping, strokes, colors, and accessible name are correct in context.

Geometry and scaling