Re: SVG as Widget Icon

Hi, Jere-

Jere Kapyaho wrote (on 1/30/09 3:31 AM):
> (And if there is any animation, just use the first rendered frame.) 

Declarative animations should be allowed, assuming the UA supports them.

FWIW, SVG doesn't use frames, it uses timeline-based animation.  That's
not to say that it couldn't be rendered as "frames", but that's not the
inherent model.

> If so, the widget engine
> needs to pass an icon size in pixels to the SVG engine -- it could be the
> 'width' and 'height' attributes of the 'icon' element, except that those
> values are not necessarily what the widget engine would use. The icon needs
> to adapt to the engine and its UI, not the other way around.
> Curiously, the spec states in the description of those attributes (section
> 7.9) [1] that they are "only applicable to graphic formats that have no
> intrinsic width or height (e.g., SVG)". But an SVG image may specify a size
> with the width and height attributes in the root element [2]. What is
> supposed to happen if you have 'width' and 'height' in both?

If you specify fixed width and height in the SVG root, then that icon
should be rendered with that fixed size.  Whenever you want to have a
scalable SVG image (I know, sounds redundant), you need to specify the
relative dimensions in the viewBox, with percentage values in the width
and height.  For example, this is a fixed-size SVG:

<svg xmlns=""
     width="50px" height="50px">
  <rect x="1" y="1" width="48" height="48" rx="5" ry="5" fill="red" />
  <circle cx="25" cy="25" r="20" fill="orange" />

and here is the resizable equivalent:

<svg xmlns=""
     width="100%" height="100%" viewBox="0 0 50 50">
  <rect x="1" y="1" width="48" height="48" rx="5" ry="5" fill="red" />
  <circle cx="25" cy="25" r="20" fill="orange" />

If you supply, in the widget manifest, a width and height to the first
one, if it doesn't match those dimensions (let's say it's width="30"
height="20"), then it should only show a portion of the icon (if the
native icon dimensions are smaller), or it should show space around the
unused part of the image.  By contrast, if you pass dimensions to the
second icon, it will scale to match the available space, as defined in
the SVG specification.

I hope that helps.

-Doug Schepers
W3C Team Contact, SVG and WebApps WGs

Received on Friday, 30 January 2009 23:29:49 UTC