Directory

SvgComponent

Use SVG with Vaadin today without losing IE support.

SvgComponent helps to use of SVG in Vaadin. Plain Embedded supports SVG as well, but SvgComponent has some enhancements like simple client-server communication and IE support.

The SVG can be provided as Resource via Embedded.setSource(Resource). The SvgComponent also has helper methods setSvg(String) and setSvg(InputStream).

To support Internet Explorer, SvgComponent uses svgweb library built by Bradd Neuberg. Svgweb uses javascript and flash to provide SVG support with close to 100% browser coverage The linked project page for more information. Note that for other browsers svgweb is not used.

IE9 uses solely its built-in SVG rendering like other modern browsers.

NOTE, the svgweb fallback requires mime type mapping for .htc file. This is easily achieved eg. in java servers by adding following snippet to your web.xml

 <mime-mapping>
     <extension>htc</extensionglt;
     <mime-type>text/x-component</mime-type>
 </mime-mapping>

The component also provides a simple messaging mechanism from SVG to the wrapping SvgComponent. See SvgMessageListener.

Sample code

		SvgComponent svg = new SvgComponent();
		svg.setSvg(getClass().getResourceAsStream("pull.svg"));
		mainWindow.addComponent(svg);

Links

• A simple online Demo
• Source Code
• Svgweb homepage

Compatibility