

data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"> <rect x="20" y="20" width="100" height="50" fill="red"/></svg>into the address bar of your browser. This works in Firefox, Opera, and Chrome. I haven’t checked IE.
I’ve begun to experiment with a Firefox feature that allows SVG filters to be applied to HTML elements via CSS. There don’t seem to be many examples out on the web. This example wraps a <div> around some content to which the Inkscape Alpha Engraving B filter has been applied. Try selecting some text.
Work has begun by the W3C FX working group to standardize using SVG filters in CSS.
<a href="http://tavmjong.free.fr/">
<object type="image/svg+xml" data="buttonA.svg">
<img src="buttonA.png" alt="A sample button."/>
</object>
</a>
But this doesn’t work (except in IE9 beta) as the SVG “swallows” the mouse
clicks when the button is pressed. They never bubble up to the <a> tag. This is probably by design for security reasons.
Cameron Cameron McCormack from the SVG working group suggested using an error handler on an <img> tag. This does work (at least in IE8). So the first problem has been solved:
<a href="http://tavmjong.free.fr/" target="_blank">
<img src="buttonA.svg" alt="A sample SVG button."
onerror="this.removeAttribute('onerror');
this.src='buttonA.png'"/>
window.frameElement.id
inside the script in the SVG file would let you know which button was pushed. This id
can then be passed to the script in the HTML file. This works quite well.
This idea also lead to solving another problem: how to style the button from HTML. The SVG standard has a currentColor
attribute/style parameter so one would think that one could specify the color
in the <object>’s style attribute and the SVG file would pick it up. The SVG standard indicates that this is exactly the purpose of currentColor
. Nope. CSS styling doesn’t work across document boundaries. But it is easy to get the color by using window.frameElement.style.color
and then setting the button color in an init() function. One can go further. One can customize the text on the button by using <param>s inside the opening and closing <object> tags. The <param>s can also be grabbed by the SVG init() script. Here are two buttons using the same SVG file:
Style from CSS (inside SVG) and custom text from <param>s:
<object type="image/svg+xml" data="buttonG.svg" id="default">
<param id="TextOn" name="TextOn" value="Green" />
<param id="TextOff" name="TextOff" value="Red" />
</object>
The button text is OFF.
Style from <object> and custom text from <param>s:
<object type="image/svg+xml" data="buttonG.svg" id="pink" style="color:pink">
<param id="TextOn" name="TextOn" value="I am on" />
<param id="TextOff" name="TextOff" value="I am off" />
</object>
The button text is OFF.
Firefox 3.6 | 42.32 % |
Internet Explorer 7.0 | 11.17 % |
Internet Explorer 8.0 | 10.77 % |
Safari 533.4 | 10.77 % |
Safari 533.1 | 6.16 % |
Firefox 3.5 | 4.66 % |
Opera 9.8 | 3.25 % |
Internet Explorer 6.0 | 2.94 % |
Firefox 3.0 | 2.06 % |
Safari 534.3 | 0.86 % |
Safari 531.2 | 0.83 % |