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.
An SVG in CSS Filter Experiment
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.
Using an SVG as a better PNGThe first problem I ran into is how to provide a PNG fallback for browsers that don’t support SVG. I wanted to simply replace a PNG button by an SVG button inside an <a> tag. The normal way to provide a PNG fallback is to use the <object> tag:
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/"> <object type="image/svg+xml" data="buttonA.svg"> <img src="buttonA.png" alt="A sample button."/> </object> </a>
<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.idinside the script in the SVG file would let you know which button was pushed. This
idcan 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
currentColorattribute/style parameter so one would think that one could specify the
colorin 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.colorand 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:
The button text is OFF. Style from <object> 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.
<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>
- Inline SVG: Requires XHTML or HTML5, neither which are supported by IE prior to IE9. In addition, as all my figures are in separate files, it makes no sense to inline them.
- <img> tag: Doesn’t support interactive SVG. No fallback method.
- <iframe> tag: On its way out in HTML4 and XHTML, but resurrected in HTML5. Intended in HTML5 to sandbox content from other sources. Again no fallback method.
- <embed> tag: Never in any HTML or XHTML standard but widely supported. As a matter of practicality, included in HTML5. Intended for content that needs a plug-in (this was the method used by ASV). Again no fallback method.
- <object> tag: In both HTML and XHTML standards. If the content referenced in the tag cannot be displayed, the content between the opening and closing <object> tags is exposed providing a simple fallback method. This is our obvious choice for including SVG content.
|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 %|