CODEWITHSUNDEEP
mobilejava-mesvg
Mohamed Magdy
Mohamed Magdy

Reputation: 551

SVG graphics auto scaling in J2me

i am developing my first application using SVG graphics , what about auto scaling of SVG background image to match the device screen width and height ? is that possible or shall I have multiple files for the different display resolutions

Upvotes: 1

Views: 545

Answers (1)

jbeard4
jbeard4

Reputation: 12811

I'm not sure about J2ME specifically, but this is typically accomplished by setting the viewBox attribute on the root SVG element, and setting the width and height to 100%. See here for an example:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1"
        viewBox="0 0 1500 1000" preserveAspectRatio="none"
        xmlns="http://www.w3.org/2000/svg"
        width="100%" height="100%">
        <desc>Example ViewBox - uses the viewBox
        attribute to automatically create an initial user coordinate
        system which causes the graphic to scale to fit into the
        viewport no matter what size the viewport is.</desc>
        <!-- This rectangle goes from (0,0) to (1500,1000) in user space.
        Because of the viewBox attribute above,
        the rectangle will end up filling the entire area
        reserved for the SVG content. -->
        <rect x="0" y="0" width="1500" height="1000"
        fill="yellow" stroke="blue" stroke-width="12"  />
        <!-- A large, red triangle -->
        <path fill="red"  d="M 750,100 L 250,900 L 1250,900 z"/>
        <!-- A text string that spans most of the viewport -->
        <text x="100" y="600" font-size="200" font-family="Verdana" >
        Stretch to fit
        </text>
</svg>

Live demo here: http://stuff.echo-flow.com/stackoverflow/viewbox.svg

For information on preserving the aspect ratio of the image, see the specification here: http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute

Upvotes: 1

Related Questions