Directory

← Back

SvgComponent

Use SVG with Vaadin today without losing IE support.

Author

Rating

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);

Compatibility

(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

  • Better IE9 support via its native SVG rendering.
  • updated svgweb library to the latest release. Previously a customized version was used to overcome an iframe issue, latest svgweb release includes this fix.
Released
2011-05-13
Maturity
BETA
License
Apache License 2.0

Compatibility

Framework
Vaadin 6.0+
Browser
Internet Explorer
Internet Explorer
Internet Explorer
Firefox
Opera
Safari
Google Chrome
Internet Explorer
Online