Paint and SVG definitions

Paint is semantic data

V2 keeps fill, stroke, opacity, paint order and markers separate. A paint value may be a color, none, currentColor, context-fill, context-stroke or a structured paint object.

{
  "style": {
    "fill": { "type": "reference", "id": "brand-gradient" },
    "fillOpacity": 1,
    "stroke": "#FFFFFF",
    "strokeWidth": 3,
    "paintOrder": ["fill", "stroke", "markers"]
  },
  "paintServers": [
    {
      "id": "brand-gradient",
      "paint": {
        "type": "linear-gradient",
        "angle": 90,
        "stops": [
          { "offset": 0, "color": "#3AEDAE" },
          { "offset": 1, "color": "#2563EB", "stopOpacity": 0.8 }
        ]
      }
    }
  ]
}

Gradients, patterns and references

Linear, radial and conic gradients preserve SVG coordinates, units, spread method, transforms and stops. Patterns preserve their content nodes and viewBox. Named paint servers live at the root and are referenced by id. Unknown ids and reference cycles are rejected.

Stroke and markers

Stroke width, opacity, cap, join, miter limit, dash and vectorEffect map directly to SVG semantics. Marker start, mid and end point to root marker definitions.