IDEA9103 Chap.4 SVG Coordinates and Drawing Order

SVG follows the browser canvas convention with the origin at the top left. Increasing x moves right, while increasing y moves down, so visual geometry must be computed in that orientation.

Subtract and add its radius from the centre coordinates. Compare those four edges with zero, canvas width and canvas height before rendering or changing any visual styles.

SVG paints nodes in source order. Where shapes overlap, a later element appears above an earlier one. Reordering the elements changes layering without changing their coordinates or colours.

For a rectangle, x and y mark the upper-left corner, while right and bottom come from adding width and height. For a circle, subtract and add radius around the centre. Both methods reduce clipping to comparisons between calculated extents and the canvas limits.

Choose SVG for diagrams, interface shapes and generative geometry whose relationships should remain inspectable and scale cleanly. Choose raster media for photographs or pixel-based texture. The decision depends on the visual problem, not on a claim that one representation is always more advanced or more useful.

Name which element should own one shared region, then test source order while leaving geometry unchanged. Temporary contrasting fills or strokes make the intersection visible. If reordering repairs the intended depth, restore the palette and preserve the established coordinates rather than compensating with unnecessary movement.

Write the permitted x and y ranges from the canvas size and the shape's extent. A circle centre must stay at least one radius from every edge, while a rectangle start position must leave room for its width and height. Generate values only inside those derived ranges, then test their endpoints.

Calculate the shape's left, right, top and bottom extents and compare each with the viewBox boundaries. For a circle, subtract and add the radius to its centre coordinates. For a rectangle, add width and height to its starting position. State which inequality fails rather than relying on a screenshot alone. Then move only the offending coordinate or reduce the relevant extent and recompute all four edges.

A corrected set of inequalities demonstrates that the geometry is contained and distinguishes clipping from later paint-order coverage. Keep the original and revised calculations together so a reviewer can see which boundary changed, why the repair is sufficient and whether the adjustment preserved the intended size and relationship to neighbouring shapes.