Parameters and Switch command to allow parametric SVGs

[Emasoft]

In SVG 2 the Parameters module will be introduced, as I can read here: http://www.w3.org/TR/SVGParamPrimer/ http://www.w3.org/TR/SVGParam/ https://tabatkins.github.io/specs/svg-params/

Parameters would be of immense help for building advertising elements with SVG parts. A lot of duplicated code and svg files variations would disappear, leaving one single parametric SVG.

But at the moment the Parameter specification allows to pass only values. For example if I call the SVG with a color parameter "blue" like this:

image.svg#param(--color%20blue)

The value of the color parameter will be used directly as the value of the color var:

<svg>
  <g style="fill: var(--color);">
    <path d="..." />
  </g>
</svg>  

But parameters often come in sets, with many different values for each "configuration". Those values are too many and passing hundreds of values as parameters would be impratical.

A better solution would be to extend the existing command to support parameters.

Currently the element enables you to show different shapes depending on what language the user of the SVG viewer is using. For example you would use the element to show different vector flags or labels according to the language of the user. Here is a SVG element example:

<switch>
    <g systemLanguage="en-UK">
        <text x="10" y="20">UK English</text>
        <g > .. flag elements.. </g>
    </g>
    <g systemLanguage="en">
        <text x="10" y="20">English</text>
        <g > .. flag elements.. </g>
    </g>
    <g systemLanguage="es">
        <text x="10" y="20">Spanish</text>
        <g > .. flag elements.. </g>
    </g>
</switch>    

Depending on the language chosen by the user, one of the elements inside the element will be displayed. The browser will use the first language matching.

What we need is to extend the switch statement to accept parameters values in this way:

<switch>
    <g var(--language)="en-UK">
        <text x="10" y="20">UK English</text>
        <g > .. flag elements.. </g>
    </g>
    <g var(--language)="en">
        <text x="10" y="20">English</text>
        <g > .. flag elements.. </g>
    </g>
    <g var(--language)="es">
        <text x="10" y="20">Spanish</text>
        <g > .. flag elements.. </g>
    </g>
</switch>    

Depending on the language chosen by the user, only one of the elements inside the element will be displayed. For example:

image.svg#param(--language%20en-UK)

Would display the UK flag with the UK English label.

A possible advantage of extending the switch statement to accept parameters, is the fact that parameters can be changed at run time, via javascript. With a single javascript line an SVG can be changed in a different format. For example from javascript you can set dynamically the parameter adformat:

image.svg#param(--adformat%20portrait)

<switch>
    <g var(--adformat)="portrait">
        .. elements and defs..
    </g>
    <g var(--adformat)="landscape">
        .. elements and defs.. 
    </g>
    <g var(--adformat)="top_banner">
         .. elements and defs.. 
    </g>
    <g var(--adformat)="large_leaderboard">
        .. elements and defs.. 
    </g>
    <g var(--adformat)="mobile_leaderboard">
        .. elements and defs.. 
    </g>
    <g var(--adformat)="vertical_banner">
        .. elements and defs.. 
    </g>
   <g var(--adformat)="skyscraper">
        .. elements and defs.. 
    </g>
</switch>    

This would allow to change a whole set of elements and definitions with a single parameter.

Another use for this would be to be able to set many other parameters with a single parameter, like this:

<switch>
    <g var(--adformat)="portrait">
        <var id="--title_height">600</var>
        <var id="--title_width">200</var>
        <var id="--title_x_pos">20</var>
        <var id="--title_y_pos">170</var>        
      .....
    </g>
    <g var(--adformat)="landscape">
        <var id="--title_height">200</var>
        <var id="--title_width">600</var>
        <var id="--title_x_pos">230</var>
        <var id="--title_y_pos">60</var>             
    </g>
   ....
 </switch>   

This would allow to change the parameters of an svg image with a single call from javascript or css.

You can also use this to change the animation played dynamically:

<switch>
    <g var(--animation)="open_box">
        <animateTransform targetElement="box_cover" attributeName="transform" attributeType="XML" type="rotate" from="0" to="90" dur="5s" additive="replace" fill="freeze"/>
      .....
    </g>
    <g var(--animation)="close_box">
        <animateTransform targetElement="box_cover" attributeName="transform" attributeType="XML" type="rotate" from="90" to="0" dur="5s" additive="replace" fill="freeze"/>
    ....
    </g>
 </switch>   

This would make svg parameters really useful, and SVG resources smaller and less redundant.

[AmeliaBR]

This seems like a sensible goal, although the syntax would definitely need some work. I think there are a number of way the <switch> mechanism could be extended to be more useful than it is.

No one's actively working on SVG Parameters right now: we're trying to get the core SVG 2 spec finalized. However, this would be something to consider when that work is started up again.

[Emasoft]

@AmeliaBR Can you help me define a better syntax? What kind of syntax would you use for this feature?

[Llbe]

@Emasoft I think one issue with the syntax is that "var(--animation)" essentially is a value and is not suitable for key/name.

Media queries would probably be a good source here.

[Emasoft]

@Llbe What do you mean? Can you make an example of how media queries can be used as a source?

I was thinking about this other solution using the CASE element:

<defs>
      <ref id="animationType" param="animation" default="open_box">var(--animation);</ref>
</defs>

<switch term="url(#animationType)">
   <case value="open_box">    
     <g>
        <animateTransform targetElement="box_cover" attributeName="transform" attributeType="XML" type="rotate" from="0" to="90" dur="5s" additive="replace" fill="freeze"/>
      .....
     </g>
   </case>
   <case value="close_box">    
     <g>
        <animateTransform targetElement="box_cover" attributeName="transform" attributeType="XML" type="rotate" from="90" to="0" dur="5s" additive="replace" fill="freeze"/>
    ....
     </g>
   </case>
 </switch>   

What do you think? The CASE element was defined for XForms in a similar way, so I think it can be easily defined for SVG as well.

[matheo]

Not functional SVG parameters in 2017, sad :(

[3nids]

what about https://dev.w3.org/SVG/proposals/params/param-RUCs.html ?

[Angelk90]

@Emasoft, @AmeliaBR, @Llbe, @matheo, @3nids: Are there any news?