[svgwg] Clarify whether `var()` (custom properties) are allowed in SVG presentation attributes, and how they are parsed/resolved (#1031)

goldenboy777 has just created a new issue for https://github.com/w3c/svgwg:

== Clarify whether `var()` (custom properties) are allowed in SVG presentation attributes, and how they are parsed/resolved ==
SVG2 currently defines that presentation attributes are not parsed as CSS declarations and instead use **parse grammar** (CSS Syntax) for the property’s value. This parsing model appears to **prevent var() substitution**, because var() is resolved only during cascade/computed-value time, something that doesn’t happen when values are parsed as isolated attribute grammars.

### Problem statement

- In style attributes, e.g. style="width: var(--wi)", the value is parsed as CSS declarations, participates in the cascade, and var() is resolved.
- In presentation attributes, e.g. width="var(--wi)", the value is parsed only via parse-grammar for the property value (e.g., \<length> or \<length-percentage>). There is no cascade-backed substitution step, so var() cannot be resolved and is typically rejected or falls back.

Firefox and WebKit seems to support var() for presentation attributes whereas Chromium does not for length attributes like radius, width, height etc..

This issue requests a **spec clarification or change** to either:

1. Explicitly _allow_ var() in presentation attributes and define a pipeline that integrates these attribute values into cascade so custom property substitution can occur; **or**
2. Explicitly _disallow_ var() in presentation attributes, with rationale and examples, so engines and tests can align.

### Relevant spec text
**SVG2 – Presentation Attributes**
<https://www.w3.org/TR/SVG2/styling.html#PresentationAttributes>
Presentation attributes are mapped to properties. However, unlike style attributes, they are not parsed as declarations.

**SVG2 – Presentation attribute CSS value**
<https://www.w3.org/TR/SVG2/types.html#presentation-attribute-css-value>
This section normatively invokes CSS Syntax’ “parse grammar” for the property’s value grammar.

**CSS Syntax – Parse grammar**
<https://drafts.csswg.org/css-syntax/#parse-grammar>
Parsing against a grammar does not include cascade or custom property substitution and typically cannot resolve var() on its own.

**Implication**: Since var() resolution is a cascade-time operation, the current “parse grammar” path for presentation attributes seems to effectively disallow var() (even if that may not have been the intention).

### Few examples
1. Below example renders in Firefox and Safari but not in Chromium.
```html
<!DOCTYPE html>
<style>
  :root { --wi: 100px; }
</style>
<svg width="200" height="200">
  <rect width="var(--wi)" height="100px" fill="green"/>
</svg>
```

2. Below example renders in all browsers similarly
```html
<!DOCTYPE html>
<style>
  :root { --wi: 100px; }
</style>
<svg width="200" height="200">
  <rect style="width: var(--wi); height: 100px; fill: green"/>
</svg>
```



Please view or discuss this issue at https://github.com/w3c/svgwg/issues/1031 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Tuesday, 18 November 2025 08:10:13 UTC