SVG in HTML Questions

Hi,

 At the SVG working group meeting two weeks ago I rather incoherently
expressed frustration in trying to create an SVG button for use in an
HTML page. Now that I've had some time to investigate things further I
would like to more clearly present the difficulties I have faced.

        My motivation is to be able to add a tutorial to my Inkscape
book that shows how SVG can be used on a web page (more than just
including a simple image). I want to start with a simple button and then
add functionality to it in a series of steps. I've prepared a web page
with the results of my experiments with this goal in mind.

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

Questions:

1. I have a simple button I wish to reuse multiple times to reference
   external web pages. How can I provide a PNG backup for browsers that
   don't support SVG? The following does not work:

   <a href="http://www.w3.org/Graphics/SVG/">
     <object type="image/svg+xml" data="buttonA.svg">
       <img src="buttonA.png" alt="A sample button."/>
     </object>
   </a>
  
   From what I understand, using an SVG this way creates a "nested
   browsing context" so that a button click on the SVG never reaches
   the <a> tag in the HTML.

2. How can I style an externally referenced SVG from HTML? I want
   to do something like:

   <img src="buttonB.svg" alt="xxx" style="color: orange"/>

   Using inlined SVG, styling can be made to work:

   svg.Orange {
          color: orange;
   }
   ...
   <svg class="Orange" ... >
    <use xlink:href="buttonB.svg#Root"/>
   </svg>

   SVG 1.1F2, section 11.2 says that "currentColor" is suppose to
   allow styling of SVG from HTML. How does this actually work?
   Speaking of "color" and "currentColor", can these be used
   to work around the "matching arrowhead to path" color problem
   (I'll send another email about that)?


Bonus questions:


1. How can I give external SVG buttons different text from HTML? Do I
   need to resort to JavaScript?

2. Inside an SVG file, how can I reuse a button via <use> as different
   browsers return different values for event.target (Firefox:
   SVGUseElement, others: SVGElementInstance)?


                        Tav

Received on Wednesday, 9 February 2011 13:12:04 UTC