This week's book giveaway is in the Android forum.
We're giving away four copies of Head First Android and have Dawn & David Griffiths on-line!
See this thread for details.
The moose likes Java Micro Edition and the fly likes SVG Components Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login

Win a copy of Head First Android this week in the Android forum!
JavaRanch » Java Forums » Mobile » Java Micro Edition
Bookmark "SVG Components" Watch "SVG Components" New topic

SVG Components

Riamor Von Trapp

Joined: May 04, 2011
Posts: 12

Are the SVG components worth investigating? I see some examples on the Netbeans site, but many are out of date. Same problems applies to other sites.
Do other people here use SVG? If not, is there a better option for making J2ME screens?
Walter Gabrielsen Iii
Ranch Hand

Joined: Apr 09, 2011
Posts: 158
What is out of date?

Netbeans has tools to make it easy to use JSR 226 (Scalable 2D Vector Graphics API for J2ME). Tools to combine graphics and events to make a usable GUI interface.
Riamor Von Trapp

Joined: May 04, 2011
Posts: 12

I meant the examples are out of date, they use older versions of net beans.
Have you any good links for how to use SVG?
For designing the Svg image itself, are there any tools you'd recommend? Or do you just everything from within Netbeans?
Walter Gabrielsen Iii
Ranch Hand

Joined: Apr 09, 2011
Posts: 158
SVG is an XML markup language and is written with tags similar to how you would write xhtml. The full version spec: Scalable Vector Graphics (SVG) 1.1 Specification. I have a resource for examples of SVG full: SVG Basics Tutorials - Scalable Vector Graphics by Hand.

Of course, in Java ME, we are dealing with SVG tiny not full, a smaller feature set, so you also need to know which elements are available in tiny. For the quick overview: 2. Mobile SVG Document Types >> SVG Tiny, part of: Mobile SVG Profiles: SVG Tiny and SVG Basic. There are additional limits for Java ME, such as using coordinate data with just a number without using css units (px, in, mm ...) on elements after the SVG tag.

As for Netbeans, there are two parts : 1. create an SVG file; 2. Work with the Visual MIDlet.

1. To create an SVG file, In the Projects window create a new file "New > Other..."

The Choose Project window will open.
Choose: Categories: Other; File Types: SVG file.

When the SVG file opens in the editor, you can drag-and-drop shapes from the Palette window onto the canvas or choose the Source button and type in your own svg code.

2. You can create the Visual MIDlet (new File) and drag-and-drop the SVG Components into the "Flow" editor. If you don't see the "SVG Components" section in the "Palette" window, then open the Palette manager and see if that option is unchecked.

In order to get the SVG menus to work you'll need to read the Netbeans Help: "Java ME Applications > Adding and Editing SVG Graphics Files."
Riamor Von Trapp

Joined: May 04, 2011
Posts: 12

Thanks Walter. I didn't realise there was a SVG tiny version, thats very helpful to know.
I actually got it going in Netbeans, with a few buttons and labels.
But the options seem limited. I haven't figured out how to change color of any of the components yet. Would I rely on a tool to do this? Or is it just as easy to change the underlying XML?
The site lists the XML in most of the samples - it seems relatively easy to read.

One more question, if I may. Can SVG also be used for animation, or is JavaFX better in that case?

Thanks for your help so far.
Walter Gabrielsen Iii
Ranch Hand

Joined: Apr 09, 2011
Posts: 158
You can change the inside color with the "fill" attribute and the border color with "stroke" attribute. SVG tiny only supports solid color painting (no gradients, filters, patterns).

The color value would be either:
1. hexadecimal, such as "#fb0"/"#ffbb00", or
2. comma separated red-green-blue values either numerical: "rgb(255,255,255)" or percentages: "rgb(15%,100%,100%)".
3. You can also use one of the 16 HTML color names, but not the expanded X11 names though.

As for animation, yes, SVG tiny supports the animation features of SVG full (but not scripting animation), so read about animation in the SVG 1.1 full spec. (Actually, you'll be reading the SVG 1.1 full spec for everything since the Mobile SVG Profiles document only tells you what you can't do in SVG tiny, but we want to know what we can do.)

Animation tag is a bit tricky because it needs to be placed within an element, and it may surprise you (this being XML), but you may need to change an element from a closed element:

to an open element:

And, it's all perfectly legal SVG!
Also, in SVG tiny attributeType will always be "XML", and the value of attributeName is the name of the attribute you're animating, in this case the points="" attribute. I used "values" in this example, but there are other choices for changing values in animation.

NetBeans will warn you with an message if you try to preview SVG that contains stuff that isn't SVG tiny.
Walter Gabrielsen Iii
Ranch Hand

Joined: Apr 09, 2011
Posts: 158
As long as we're on the topic of what can/can't be done with SVG, I want to cover Inkscape. Inkscape is an SVG full editor. It doesn't create SVG tiny files, only SVG full files, but with careful use of its "XML editor" (Edit > XML editor) inkscape can act as a stepping stone, for copy-pasting attributes for shapes and paths, making SVG tiny image creation easier (You'll mainly want Inkscape for creating paths).

Important attributes:

Some things though:

Don't use the CSS "styles" attribute from Inkscape, SVG tiny doesn't support CSS. You need to reformat them as XML attributes, example: "fill:red;" becomes fill="red".

Also no CSS units in SVG tiny: stroke-width="1px" becomes stroke-width="1"

Inkscape's circle tool is actually a path. To create a real circle element use the XML editor > "new Element" button and type "svg:circle" (use prefix "svg:") and use the same method with ellipse and polygon/polyline.

1. Reduce the numeric precision, otherwise Inkscape will overload on huge 8-spaces decimals and there will be rounding bugs, like 1.99999999 instead of 2.

Edit global Inscape preferences >> SVG Output
numeric precision: 3
Minimum exponent: -3

SVG editing:
1. Avoid adding an unwanted "transform" to a new SVG image (thus flinging shapes around and ruining the simple copy-paste we want), try to set the image size first (File > Document properties) before drawing, then open the XML editor (Edit > XML editor), find svg:g Layer1 in the node tree (left side), select, and finally delete the transform attribute.

If you need to change the image size afterwards, put everything into one big group first
1a. (Edit menu > Select All)
1b. (Object menu > Group)
1c. resize image (Document properties)
1d. see above for removing "transform" on Layer1
1e. move group object back into place.
1f. (Object > ungroup)

2. try to use the grid (Document properties) and, from the toolbox, use only
2a. "Draw Bezier curves and straight lines"
2b. "Edit paths by nodes" tools.

3. In your path shapes, try to keep the node count down: avoid the "draw free hand" and "calligraphic brush strokes" tools like the plague, though you can always Simplify (Path menu >> Simplify).
Riamor Von Trapp

Joined: May 04, 2011
Posts: 12

Thanks for the detailed reply!
Consider Paul's rocket mass heater.
subject: SVG Components
jQuery in Action, 3rd edition