Is there any api available to convert an SVG file to an Image(PNG, JPEG, etc.) ?

1,602 views
Skip to first unread message

Venugopal V

unread,
Jun 24, 2011, 3:57:46 AM6/24/11
to lib-g...@googlegroups.com
Hi Lukas,

Is it possible to convert an SVG to an image ?
Are there any existing apis/services or can we tweak existing library to generate images out of svg ?

Thanks,
Venu.

Chen Weihua

unread,
Jun 24, 2011, 4:00:17 AM6/24/11
to lib-g...@googlegroups.com
Hi Venu,

you can use batik (http://xmlgraphics.apache.org/batik/) to convert SVG to (any) other formats at the server side. 

Weihua
--
Weihua Chen, PhD
Bork group, EMBL Heidelberg
Meyerhofstrasse 1
69117 Heidelberg
Germany

Lukas Laag

unread,
Jun 24, 2011, 4:18:25 AM6/24/11
to lib-g...@googlegroups.com
Hi Venu,

I think this is possible, at least on modern browsers (FF4+, Chrome,
Opera), if you use the fact that <img> can use SVG as their sources on
these browsers.

There are no built-in APIs for this in lib-gwt-svg yet, but if you
combine OMSVGElement.getMarkup() (which gives you a serialized XML
version of your SVG element), data urls, and img, this works (at least
on FF where I have tested it).

This is what it would look like:

public class ExportToImage implements EntryPoint {
public void run() {
OMSVGDocument document = OMSVGParser.currentDocument();
OMSVGSVGElement svg = document.createSVGSVGElement();
svg.getStyle().setWidth(300, Unit.PX);
svg.getStyle().setHeight(300, Unit.PX);
OMSVGCircleElement circle = document.createSVGCircleElement(150,150,120);
circle.getStyle().setSVGProperty("fill", SVGConstants.CSS_YELLOW_VALUE);
circle.getStyle().setSVGProperty("stroke", SVGConstants.CSS_BLACK_VALUE);
svg.appendChild(circle);
String url = "data:image/svg+xml;base64," + base64encode(svg.getMarkup());
Image img = new Image(url);
RootPanel.get().add(new SVGImage(svg));
RootPanel.get().add(img);
}
private static native String base64encode(String str) /*-{
return $wnd.btoa(str);
}-*/;

@Override
public void onModuleLoad() {
run();
}
}

Cheers

Lukas


On Fri, Jun 24, 2011 at 9:57 AM, Venugopal V <wenu...@gmail.com> wrote:

Venugopal V

unread,
Jun 24, 2011, 4:28:11 AM6/24/11
to lib-g...@googlegroups.com
Thanks Weihua! Batik seems to be viable server side options.

Regards,
Venu.

Venugopal V

unread,
Jun 24, 2011, 4:32:12 AM6/24/11
to lib-g...@googlegroups.com
Thank a lot Lukas! Let me try this option and see if it works on Chrome as well.

Regards,
Venu.
Reply all
Reply to author
Forward
0 new messages