Re: SVG in HTML Questions

Tavmjong Bah:
> 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.

Right.  Events won’t bubble up out of the SVG document into the HTML
document.  SVG as an image would work to trigger the link, but wouldn’t
let you provide a PNG fallback:

  <a href="http://www.w3.org/Graphics/SVG/">
    <img src="buttonA.svg">
  </a>

although you *could* catch the error event that should be fired at the
<img> and then change its src to be the PNG:

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

Seems a bit hacky, though!

It might be easier to use a JavaScript library to help with fallback,
like Modernizr:

  <script src="modernizr.js"></script>
  <style>
    html.svg .png-fallback { display: none }
    html.no-svg .svg-image { display: none }
  </style>
  <a href="http://www.w3.org/Graphics/SVG/">
    <img class="svg-image" src="buttonA.svg">
    <img class="png-fallback" src="buttonA.png">
  </a>

> 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"/>

Currently, you can’t.  The SVG document created for the image rendering
does not inherit styles from the referencing HTML document.

>    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?

Well, this would work if you have inline SVG.  Then, the color property
would be inherited into the SVG content, and you could use currentColor
to reference the color property’s current value in fill or stroke.

>    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)?

No, because the inheritance of properties comes from the <marker>
element’s parent, rather than the element that is referencing the
marker.

(But yes: markers need an overhaul to fix this problem.)

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

Currently, yes.  Doug’s Parameters spec would support this, and has this
button-with-different-text as a specific use case.

> 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)?

For those implementations that do have SVGElementInstances, do they
bubble the event up to the <use> element?  If so, then just put event
listeners on the <use>.  If not, then you might be good if you can look
at the correspondingUseElement property.  Otherwise, I guess the
information you want isn’t there…

-- 
Cameron McCormack ≝ http://mcc.id.au/

Received on Wednesday, 16 February 2011 04:27:28 UTC