SVG basics: svg, rect, circle, path, text #127

Overview#

Implement basic SVG rendering support for inline SVG elements in HTML documents.

Requirements#

Parsing#

• Parse SVG elements in the HTML parser (SVG namespace):
  • <svg> container with width, height, viewBox
  • <rect> with x, y, width, height, rx, ry
  • <circle> with cx, cy, r
  • <ellipse> with cx, cy, rx, ry
  • <line> with x1, y1, x2, y2
  • <path> with d attribute (SVG path data)
  • <text> with x, y and text content
  • <g> group element
• Parse SVG path data commands: M, L, H, V, C, S, Q, T, A, Z (and lowercase relative variants)

SVG Presentation Attributes#

• fill: color or none
• stroke: color
• stroke-width: length
• opacity and fill-opacity / stroke-opacity
• transform: translate(), rotate(), scale(), matrix()

Rendering#

• SVG coordinate system: viewBox mapping to viewport
• Rasterize filled shapes (rect, circle, ellipse, path)
• Rasterize strokes
• Path rendering: convert cubic/quadratic beziers to scanlines
• Apply transforms to coordinates before rasterization
• Render SVG text using the text crate's glyph rasterizer
• Generate appropriate paint commands (display list entries) for the GPU/software renderer

Integration#

• Extend HTML parser in crates/html/ to handle SVG namespace elements
• Add SVG node types or attributes to DOM in crates/dom/
• Add SVG layout handling in crates/layout/ (SVG elements create a replaced-element-like box)
• Add SVG paint commands to crates/render/

Acceptance Criteria#

• <svg><rect width="100" height="100" fill="red"/></svg> renders a red square
• <svg><circle cx="50" cy="50" r="40" fill="blue"/></svg> renders a blue circle
• SVG <path> with line and curve commands renders correctly
• <text> renders text at specified position
• viewBox scales SVG content to fit the viewport
• fill, stroke, stroke-width attributes work
• transform attribute applies correctly
• SVG embedded in HTML renders inline with surrounding content
• All existing tests continue to pass
• Unit tests for path data parsing and coordinate transforms