Re: symbolic SVG *not* as an icon?

[Amy C <mathematical coffee gmail com>]

On 26 July 2012 03:10, Mz <mengzhuo1203 gmail com> wrote:
>
> I think you need to rewrite it:
>
> .my-button {
>     background: url('background.svg');
>     background-size: contain;
>     width:140px; /*(only in pixel)*/
>     height:174px;
> }
>
Thanks - why do you say the width/height are only in pixels? I've
currently set the width/height to 2em which seems to work OK - since
I'm displaying a character over the button I thought sizing in ems
would make sure the button is always appropriately sized with respect
to the text size.

>> The SVG has some white bits in it. What I'd like is to be able to do:
>> .my-button:toggled {
>>     color: blue;
>> }
>
> you need to re-design that svg, or just change to a svg that is blue.
>
What do you mean by redesign it? How do I tell the SVG "this colour
should be whatever the 'colour' attribute says"? (My current
workaround is to have two SVG files, one white and one blue and switch
between them. But if it can be achieved with just one SVG file that
would be better).