3

I am building a web application intended to be loaded on the Wii Internet Channel, which is essentially Opera 9.3.

It has support for SVG, but they don't seem to scale. The graphics always render at their "optimal" sizes, no matter what the width and height are set to.

If I set the height/width with CSS, the space the image element takes up in the page changes, but the SVG graphic still renders behind everything (with no positioning or z-index set).

If I set the height/width via tag attributes, the image is simply cropped to fit those dimensions.

Is there an alternative method for scaling SVG, that might be supported on the Wii Internet Channel?

Edit: It seems to be SVG dependent. For example, this SVG can scale to whatever I set:

<img src="http://www.w3.org/Graphics/SVG/Test/20061213/svggen/fonts-elem-01-t.svg" width="200" />

Whereas this SVG seems to be fixed:

<img src="http://upload.wikimedia.org/wikipedia/commons/6/6b/Bitmap_VS_SVG.svg" width="200" />

Any thoughts on the differences between these two?

Brad
  • 159,648
  • 54
  • 349
  • 530

1 Answers1

0

I figured it out! It has to do with the initial SVG tag within the SVG file, and its parameters.

Initially, the SVG that wasn't scaling had this for the SVG tag:

 <svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="1063" height="638">

You'll have to scroll to the right, but you'll note that there is no viewBox attribute. If I add a viewBox attribute, specifying the full optimal size of the SVG (as specified by width and height attributes), the Wii will scale it correctly!

 <svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="1063" height="638" viewBox="0 0 1063 638">
Brad
  • 159,648
  • 54
  • 349
  • 530