6 Paint and Color🔗ℹ

This group resolves SVG/CSS paint and color values — everything from a fill/stroke attribute’s string down to a color% object or a reference to a paint server (gradient or pattern) to look up elsewhere.

The central function is parse-paint, which recognizes every common CSS color syntax (#rgb, #rrggbb, rgb()/rgba(), hsl()/hsla(), named colors, currentcolor) plus SVG’s url(#id) paint-server references — returning either a color% directly, or a paint-ref struct for callers to resolve against a document’s id table (svg-doc-id-table) themselves, since parse-paint has no access to one on its own.

• #f, for "none" or when s is itself #f;

• a color%, for #rgb, #rrggbb, rgb(...)/rgba(...), hsl(...)/hsla(...), a named CSS color, or "currentcolor" (which resolves to current-color, or black if current-color is #f);

• a paint-ref, for a "url(#id) fallback" reference — resolving the reference itself (looking id up and building a gradient or pattern brush from it) is the caller’s job, since parse-paint has no document context to resolve it against. fallback, if the url(...) has a trailing color/keyword after it, is itself already fully parsed (i.e. a color%, #f, or another paint-ref, never a raw string).

Named colors use Racket’s own X11-derived color database, except for 16 CSS1/HTML4 keyword names confirmed to differ from what CSS/SVG actually specify for the same name (most famously "purple", but also "green", "gray", "maroon", and "navy") — those 16 are overridden to their correct CSS values; every other name (including the full CSS Color 4 extended palette) passes through to the color database as-is.

url (...) is recognized whether its argument is unquoted ("url(#id)") or quoted ("url('#id')"/"url(\"#id\")"), and only leading/trailing whitespace around the reference as a whole is stripped — whitespace inside the fragment id itself ("url(' # x ')") is preserved verbatim as part of the id, which will then simply fail to match any real id and fall through to the fallback, since " x" (with a leading space) is a different id from "x".

(parse-paint "#ff0000")               ; (is-a? color%), red

(parse-paint "rgba(0, 0, 0, 0.5)")    ; (is-a? color%), 50%-alpha black

(parse-paint "none")                  ; #f

(parse-paint "url(#grad) blue")       ; (paint-ref "grad" (is-a? color%))

Four colors resolved by parse-paint — a hex code, an rgba (...) with alpha, a named color, and hsl (...):

(paint-ref-id (parse-paint "url(#g) red"))       ; "g"

(paint-ref-fallback (parse-paint "url(#g) red")) ; (is-a? color%), red

(resolve-gradient-stops

'(linearGradient ()

(stop ((offset "0") (stop-color "red")))

(stop ((offset "1") (stop-color "blue") (stop-opacity "0.5")))))

; (list (cons 0.0 (is-a? color%)) (cons 1.0 (is-a? color%)))

The three stops above, rendered as an actual gradient bar (gold at 0, orange-red at 0.5, purple at 60%-opacity at 1):

The same curved shape from earlier, with its bounding box outlined: