Re: SVG in HTML Questions

Hi,

 I've updated my button test page (a study of SVG in HTML) again:

 http://tavmjong.free.fr/SVG/BUTTON_TEST/button_test.html

With a suggestion from Cameron and another from Erik, the two most
frustrating aspects of trying to use SVG buttons in HTML have been
solved.

1. Using SVG as a better PNG inside the HTML <a> tag.

 One must use <img> inside an <a> tag to use an SVG button otherwise the
SVG swallows mouse events (except with IE9). But <img> does not have a
fallback mechanism where a PNG can be used if SVG is not supported.
Cameron's suggestion to catch the error works quite nicely with IE8:

 <a href="http://www.w3.org/Graphics/SVG/" target="_blank">
   <img src="buttonA.svg" alt="A sample SVG button."
        onerror="this.removeAttribute('onerror');
   this.src='buttonA.png'"/>
 </a>


2. Reusing an (external) SVG button multiple times in the same HTML
file.

 If one has an SVG button where the state is controlled by a JavaScript
function inside the SVG, in order to use the button multiple times in
the same HTML file one needs to be able to know which copy of the button
has been clicked. Erik's suggestion to use window.frameElement.id to get
the id of the object that references the SVG works quite well. This
technique has the additional benefit, that one can access the "color"
style property in the object via window.frameElement.style.color and
then use JavaScript to set the color of the background so different
buttons can have different colors (since currentColor doesn't work
across document boundaries).

     Tav

PS. Did I mention that SMIL is a resource hog?

Received on Thursday, 24 February 2011 15:56:23 UTC