Planned Feature: Support for Template Variables

[shubhamjain]

Currently, only the properties of root SVG can be modified (Eg, fill and stroke colors). I am planning to extend that to allow to modify anything, provided the SVG is defined in that way.

The use case is that SVG could be modified on the fly and you won't need to create multiple SVGs for the same thing.

Example, let's say you define a file gradient.svg:

<svg height="150" width="400">
  <defs>
    <linearGradient id="grad2" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" style="stop-color:__to_color__;stop-opacity:1" />
      <stop offset="100%" style="stop-color:__from_color__;stop-opacity:1" />
    </linearGradient>
  </defs>
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad2)" />
</svg>

Under this new feature, you'll be able to modify to and from colors, using this:

<svg data-src="./gradient.svg" [from-color]="rgb(255,0,0)" [to-color]="rgb(255,255,0)"></svg>

the benefit here is that it's brief enough and won't conflict with VueJS.

Thoughts? Is this something people would like to see?