W3C home > Mailing lists > Public > www-svg@w3.org > November 2014

[parameters] Outline for recasting SVG Parameters on top of CSS Variables

From: Tab Atkins Jr. <jackalmage@gmail.com>
Date: Fri, 31 Oct 2014 17:16:56 -0700
Message-ID: <CAAWBYDBraUd+xPHisUdMbug7-o9v+37WD=TwU5EXXqLLj-eh8w@mail.gmail.com>
To: www-svg <www-svg@w3.org>
Cc: Doug Schepers <doug@schepers.cc>
Between when Doug first produced SVG Parameters and today, CSS
Variables were proposed, specced, accepted, and implemented.  It would
behoove us to build on top of that existing foundation, both for
implementation simplicity and to reduce the number of independent
concepts authors have to learn about.  You can find the CSS Variables
spec at <http://dev.w3.org/csswg/css-variables/>.

I talked briefly with Doug about this today, and have a sketch of how
this should look, in my opinion:

  <img src="foo.svg?--text=red">

    <meta name="var" content="--text black"></meta>
  <text style="fill: var(--text)">Hello World!</text>

This example assumes the existence of a <meta> element in SVG, but
it's not strictly necessary; I'll explore some alternate syntaxes for
declaring your vars later.

In this example, the SVG document declares which variables it wants to
receive from a URL parameter.  Those custom properties get the passed
value as their initial value.  (Rather than their default initial
value, which is an invalid value.)  In this example, the <meta>
declares that it wants to receive a "--text" variable, and sets the
default value (when it's not passed) to "black". (If no default is
given, the variable is just invalid when not passed, as usual.)

The linking document passes the desired variables as URL params.  The
value of the param is interpreted as a CSS value, and the key
specifies which custom property receives that value.  You can then use
the var() function inside the SVG document as normal.

Currently this is only usable in CSS properties.  If SVG wants them to
be usable in attributes, it can define that all attributes accept
var() as well.  (Note that var() is allowed *anywhere* in a CSS
property value; it can be preceded or followed by arbitrary other
values, including more var() functions.  You also can't tell whether
the resulting value is valid until after substitution. CSS has some
special rules to handle this, since it can no longer reject invalid
properties at parse time, if they include a var().  SVG will have to
adopt similar rules.)

If adding <meta> to SVG isn't acceptable, there are other options.
For example, an attribute on the root element could work:

<svg vars="var(--text, black)">...</svg>

It would accept a space-separated list of var() functions, declaring
the var name and optionally the default value for each var to be

Theoretically, we could avoid this pre-declaring entirely, but I don't
think it's a great idea.  It seems similar to PHP's register_globals
debacle, where you could inject arbitrary variables into a PHP script
with URL params.  It also means there's no way to declare a default
value; you'd have to instead specify a default every time you used the


Received on Saturday, 1 November 2014 00:17:43 UTC

This archive was generated by hypermail 2.4.0 : Friday, 17 January 2020 22:54:57 UTC