[svgwg] Issue: Parameters and Switch command to allow parametric SVGs marked as Proposal

dstorey has just labeled an issue for https://github.com/w3c/svgwg as "Proposal":

== Parameters and Switch command to allow parametric SVGs ==
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:

``` xml
<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 <switch> command to support parameters.  

Currently the <switch> 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 <switch> element to show different vector flags or labels according to the language of the user.
Here is a SVG <switch> element example:

``` xml
<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 <g> elements inside the <switch>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:

``` xml
<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 <g> elements inside the <switch>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)`

``` xml
<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:

``` xml
<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:

``` xml
<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.


See https://github.com/w3c/svgwg/issues/128

Received on Friday, 11 May 2018 05:23:37 UTC