I'm trying to switch the graphics in our application from rasterized PNG's to vector graphics using the Scalable 2D Vector Graphics API for J2ME (JSR-226).
I can load and render an SVG-image file just fine, but when rendering in high quality (RENDERING_QUALITY_HIGH), a dark colored border appears around the shapes. This is especially apparent with light colors. The problem does not appear when the rendering quality is set to low, but then the shapes are also no longer anti-aliased, so this is not an acceptable solution. Somehow the dark border seems to be related to the antialiasing method used.
I've uploaded a screenshot showing the result of rendering a white circle on a white background here:
This is the source of the SVG used:
Any thoughts on how to get rid of those ugly black borders?
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 14.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 43363) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Tiny//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd">
<svg version="1.1" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px" width="240px" height="240px" viewBox="0 0 240 240" xml:space="preserve">
<circle fill="#FFFFFF" cx="120" cy="120.001" r="75"/>
* Increasing the transparency of the ScalableGraphics instance also reduces the opacity of the artifacts
* The artifacts seem unrelated to the color of the rendered shapes as well as the background.
* Scrolling the screen alters the artifacts, so they seem to be relative to the screen, not the image.
I'm testing on a Nokia 6212c (physical device and emulator) and I'm using j2me polish for the UI (have not yet tested if this is relevant).