Cosc 5/4730

SVG and Scalable 2D Vector Graphics API (JSR

226)

What is Scalable Vector Graphics?• Scalable Vector Graphics (SVG) is an XML grammar for rich, dynamic

2D graphics. It offers a wide array of applications and advantages beyond those of other 2D formats, such as PDF or PostScript.

• SVG graphics can be scripted, which means that a graphic and its features can be modified in response to user interface events. For example, you can change the color of a circle when the mouse cursor moves over that circle. SVG can also handle hyperlinking and declarative animation.

• JSR 226 is the svg implementation for JavaME– JavaDoc's http://tlbs.us/dev/api/jsr-226/

• SVG 1.1 xml reference (lists most attributes)– http://www.zvon.org/xxl/svgReference/Output/index.html

Example<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Tiny//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="200" viewBox="0 0 300 200">

<rect x="90" y="50" rx="30" ry="30" width="120" height="100" fill="#FEB32B" stroke="#FF6600" stroke-width="10" /></svg>

Example (2)• The actual SVG content starts with the <svg> element tag.

– The tag defines the namespaces it uses and then specifies three attributes width, height and viewBox, which define the viewable area of the SVG file.

• This SVG file defines only one graphical element, which is a rectangle. – The rectangle is specified simply by a <rect> element tag. – The element tag contains various attributes that define the

properties of the rectangle, such as its location (x, y), the radius for its rounded corners(rx, ry), its dimensions (width, height), the color to fill the rectangle with (fill), the color for the rectangle border (stroke) and the width of the border (stroke-width).

Colors

• Colors can be specified in several ways– Three digit hex — #rgb #fff (white) 4096 colors– Six digit hex — #rrggbb 16777216 colors– integer function rgb(rrr,ggg,bbb) – Float functional rgb(R%, G%, B%) rgb (12%, 34%, 29%)

– color keyword:• Note must belower case

Shapes

• SVG graphics can contain basic shapes: rectangles, circles, ellipses, lines, polygons, and polyline

• Rectangles you saw in the example

• Example over the couple of slides.

circle and ellipse

<circle cx="138.0" cy="245" r="60" fill="aqua" stroke="blue" stroke-width="2" /><ellipse cx="141" cy="249" rx="60" ry="40" fill="silver" stroke="black" stroke-width="10" />

Line and ployline<line x1="50" y1="150" x2="250" y2="50" stroke="blue" stroke-width="10" />

<polyline points="50,50 50,150 100,150, 100,50, 150,50 150,150 200,150 200,50 250,50

250,150" stroke="black" fill="white" stroke-width="10" />

• with fill="green"

Polygon

• specify a set of points<polygon points="150,50 250,150

50,150" fill="olive" stroke="green" stroke-width="3" />

path shape• This is a very simple

example, but path elements can describe arbitrarily complex shapes.

<path d="M50,50 l200,0 c0,100

0,100 -100,100 Z" width="120" height="100"

fill="red" stroke="black"stroke-width="5" />

text• You can include simple or very sophisticated text in

SVG documents.<text font-size="8" font-family="sans-serif" font-weight="bold" fill="black" transform="translate(15,0) scale(1)" y="-10 0 10 20 30 30 30 40 50 60 70 80 90 100 110 100 90 80"> SVG has fancy text</text>

<text font-size="8" font-family="sans-serif" font-weight="bold" fill="red" transform="scale(2) rotate(45)" x="75" y="0"> Isn't this cool! </text>

Painters model• objects are draw in order

listed.<rect x="90" y="50" width="120" height="100" fill="aqua" stroke="blue" stroke-width="2" /> <circle cx="150" cy="100"

r="60" fill="red" stroke="maroon" stroke-width="2" />

Grouping.

• <g id=“name”>• …• </g>• Allows you to group

elements together to create something more interesting

• More interesting– animate

<g id="runner" ><ellipse id=“head" fill="none" stroke="#ff0000" stroke-width="1" cx="1" cy="-38" rx="11" ry="9.5"/><polyline id="line1“ fill="none" stroke="#ff0000“ stroke-width="1" points="1,-29 1,7 "/>…</g>

Creating the SVG file

• Either create the svg file on your own• Use one of the many applications out there.– example: Illustrator, CorelDraw

• Open Source app– inkscape: http://www.inkscape.org/

Once you have the xml file.

• Use the packages javax.microedition.m2g.* and org.w3c.dom.* and org.w3c.dom.svg*

• You can load, display, and manipulate the xml.– including adding more xml.

package org.w3c.dom

• Accessing the xml • interfaces– document• interface that represents the whole xml document

– element• mostly overriding by using org.w3c.dom.svg

– node• mostly overriding by using org.w3c.dom.svg

package org.w3c.dom.svg• SVT Tiny 1.1 DOM API defined in this specification is subset of W3C SVG Tiny 1.2

uDOM. – SVGAnimationElement This interface represents an Animation element, which contains

methods to control the timing of animations.– SVGElement This interface represents an SVG element in the document tree. – SVGLocatableElement This interface represents an SVGLocatableElement. – SVGMatrix This interface represents an "SVGMatrix" datatype, identified by an affine

transform. – SVGPath This interface represents an "SVGPath" datatype used to define the path geometry. – SVGPoint This interface represents an "SVGPoint" datatype, identifiend by its x and y

components. – SVGRect This interface represents an "SVGRect" datatype, consisting of a minimum X,

minimum Y, width and height values. – SVGRGBColor This interface represents an "SVGRGBColor" datatype made up of red, green,

and blue components. – SVGSVGElement This interface represents <svg> element in (SVG) document tree.

javax.microedition.m2g• ScalableGraphics This is the fundamental class for 2D

rendering. • ScalableImage This class models images in vector format,

such as the Scalable Vector Graphics (SVG) image format. • SVGAnimator The SVGAnimator class handles automatic

rendering of updates and animations in an SVGImage to a target user interface (UI) component.

• SVGImage This class represents an SVG image conforming to the W3C SVG Tiny 1.1 Profile.– subclassed of ScalableImage

Displaying SVG image

• First load the svg file into an SVGImage– Open our input stream of the svg file we want to load.InputStream inputStream = getClass().getResourceAsStream(url); – Load our svg image from the input stream.svgimage (SVGImage) SVGImage.createImage( inputStream, null);

• Now we need to get into a Field, so we can add to the screen.

Displaying SVG image

• Get the ui field from the animator.String FIELD_PACKAGE = "net.rim.device.api.ui.Field";svganimator = SVGAnimator.createAnimator( svgimage, FIELD_PACKAGE);

• Create an interactive svg animator which hosts our ui field.svgfield = (net.rim.device.api.ui.Field) svganimator.getTargetComponent();

• Add the field to the screen.add (svgfield);

svg Example• Assuming this is the svg file<?xml version="1.0" encoding="utf-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Tiny//EN"

"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd">

<svg width="300" height="200" viewBox="0 0 300 200" preserveAspectRatio="xMidYMid meet"

xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink"version="1.1" baseProfile="tiny">

<rect id="Rect" x="90" y="50" width="120" height="100" fill="aqua" stroke="blue" stroke-width="2" />

<circle id="0Circle" cx="150" cy="100" r="60" fill="red" stroke="maroon" fill-opacity = "1.0" stroke-width="2" /></svg>

Changing the xml

• You can change an attribute (trait) of an element. First we need to get that element in an SVGElement and then change it.– The simplest way is to get the element by ID tag.– For the circle it's id is 0circleSVGElement e = (SVGElement)

svgImage.getDocument().getElementById( "0Circle");• Get the getDocument() returns the entire document, but

we only need one element, by ID, which is put into an SVGElement.

Changing the xml (2)

• SVGElement provides a number of "get" and "set" methods to change the xml

• Example, we want to add 1 to the radius of the circlefloat x = e.getFloatTrait("r");• "r" is the attribute for radius of the circle.

String str = e.getTrait("r"); • We can also get the info as a string, but not useful in

this case.

Changing the xml (3)

• set work simliar– setTrait("trait", String) or – setFloatTrait("trait", float);

• To change the radius of our 0circle by onee.setFloatTrait("r", 1.0+e.getFloatTrait("r"));

The next repaint() would then redraw with the new size.

Adding new objects.

• with the same svgImage we loaded, we can add new objects.

• This time we need the svg part of the xml document, so we can add a new element to it.

SVGSVGElement root = (SVGSVGElement) svgImage.getDocument().getDocumentElement();

• If we want to add the olive triangle, we need to create the elementSVGElement tri = (SVGElement)

(svgImage.getDocument().createElementNS( "http://www.w3.org/2000/svg", "polygon" ));

Adding new objects (2)

• get the olive color to useSVGRGBColor olive = root.createSVGRGBColor( 128,

128, 0 );• And set all the traitstri.setRGBColorTrait( "fill", olive );tri.setTrait( "points", "150,50 250,150 50,150" );tri.setTrait("id","triangle");• to appended to the end (now drawn on top)root.appendChild(tri );

Adding new objects (3)

• To insert it at the beginning or in the middle, we need a reference to the element we are inserting it before.– Let's insert at the first element, ie before Rect

element.root.insertBefore(tri,

svgImage.getDocument().getElementById("Rect") );

Removing elements.

• removechild(SVGElement);– But only if the Element does not have an ID.– Otherwise Elements with an ID tag, can not be

removed.• Also, ID tags can not be modified

– or removed.

SVGAnimator

• So far we have a static image.• the SVGAnimator updates the field when the

SVGImage is modified and animation updates happen periodically as well.– Deals with animate attributes automatically.

animate

• There are 4 animate xml that can be used– animate, generalized, can do most everyting. – animateMotion, for movement– animateColor, for changing the colors– animateTransform, which is used to move a

"whole" object around the viewport.

animate example 1

• Change the cx trait <circle id="0Circle" cx="150" cy="100" r="60" fill="red" stroke="maroon" stroke-width="2" ><animate attributeName="cx" from="150" to="175"

dur="5s" repeatCount="indefinite"/> </circle>

animate example 2• Changing the color <rect id="0Rect" x="90" y="50" width="120" height="100" fill="aqua" stroke="blue" fill-opacity = "1.0" stroke-width="2"> <animateColor attributeName="fill"

values="red;green;blue;aqua" dur="5s" repeatCount="indefinite" />

</rect>

animate example 3• More then one animate can be used together <rect id="0Rect" x="90" y="50" width="120" height="100" fill="aqua" stroke="blue" fill-opacity = "1.0" stroke-width="2"> <animateColor attributeName="fill" values="red;green;blue;aqua"

dur="5s" repeatCount="indefinite" /> <animate attributeName="y" from="50" to="75" dur="10s"

repeatCount="indefinite"/> </rect>

animation

• We just need to “start” the animator.svganimator.play();• Since the last examples use indefinite, We may

want to stop itsvganimator.stop();

Interaction

• Using the standard listeners for touch or keys– We can change/interact with the animation.

keyListener public boolean keyChar(char key, int status, int time) {

if (key == 'u' ) { scale (0.10f); return true; } else if (key == 'd') { scale (-0.1f); return true; } else if (key == 'l') { rotate(-10.0f); return true; } else if (key == 'r') { rotate(10.0f); return true; } return false; }

keyListener (2)

private void rotate( final float delta ) { // put ourselves on the animator's thread animator.invokeLater( new Runnable(){ public void run(){ // execute the transformation Document document = svgImage.getDocument(); SVGSVGElement root =(SVGSVGElement) document.getDocumentElement(); root.setCurrentRotate( root.getCurrentRotate() + delta ); } } );} private void scale( final float delta ) { // put ourselves on the animator's thread animator.invokeLater( new Runnable(){ public void run(){ // execute the transformation Document document = svgImage.getDocument(); SVGSVGElement root = (SVGSVGElement) document.getDocumentElement(); root.setCurrentScale( root.getCurrentScale() + delta ); } } );}

Groups in SVG

• When we look at the <g> tag for grouping the animation changes– We still need to play(), but also need to activate a

group as well.• It maybe the way the xml is laid out, I’m not sure.• Svgimage.activate(); //now the runner will animate.

Examples

• svg.zip– Uses the runner.svg file, press play to have it

animate• svg2.zip– Uses the example through this lecture.– plays runs the animation• u and d scale and l and r rotate the image.

• Blackberry svganimator example is very good place to see more svg animation as well.

References• The Runner svg image is from Blackberry’s svganimatordemo.• Javadoc's

– http://tlbs.us/dev/api/jsr-226/– http://theoreticlabs.com/dev/api/jsr-226/

• These two are the same, but hopefully one still responds– http://www.zvon.org/xxl/svgReference/Output/index.html For xml documentation for tinySVG 1.1

• http://www.w3.org/TR/2008/REC-SVGTiny12-20081222/painting.html#Color• http://developers.sun.com/mobility/midp/articles/s2dvg/index.html• http://www.forum.nokia.com/document/Java_Developers_Library_v2/?content=GUID-

57CBAA71-C915-4CB4-9AF5-1E9BF4C613F2.html• http://developers.sun.com/events/techdays/presentations/2007/TD_BOS_JavaME_Patel.pdf• https://meapplicationdevelopers.dev.java.net/uiLabs/RenderSVGImage.html• https://meapplicationdevelopers.dev.java.net/uiLabs/IntroTo226.html• https://meapplicationdevelopers.dev.java.net/uiLabs/IntroToSVG.html• Creating svg from scatch. (no svg file needed)

http://today.java.net/pub/a/today/2007/07/10/scalable-vector-graphics-on-java-me.html

QA&