Recently a customer of ours asked us to update my add-on for the latest Vaadin version, but a lot of things has happened since. It no more makes sense to use the add-on at all. All important browsers now natively support SVG, and there are multiple easy ways to utilize the format in modern web apps. Let's cover some of the possibilities.
1. As a static image file format
Modern browsers nowadays support using the SVG format in IMG tags. So you can use SVG instead of JPG or PNG, whenever a vector graphic format makes more sense than a raster format. And it often does. Many graphics apps also have excellent SVG support these days.
With Vaadin Framework you can just use the Image component or use your SVG as an Icon associated with all Vaadin components. Below you can see a couple of examples, where we load the image simply from the classpath.
Image image = new Image(null, new ClassResource("/pull.svg")); image.setWidth("300px"); Button button = new Button(); button.setIcon(new ClassResource("/vaadin-logo.svg")); button.addStyleNames(ValoTheme.BUTTON_ICON_ONLY, ValoTheme.BUTTON_HUGE);
Also, all modern browsers support using SVG as an image format in CSS rules. So you can also place your SVG file as a background image with CSS, which scales easily for all devices from smartphones to 4K displays.
2. Inline or using the <object> element for more advanced usage
In Vaadin apps, this kind of SVG usage happens most often through component implementations. For example, the Vaadin Charts component uses SVG behind the scenes and has built-in listener hooks for Java developers.
3. Razor sharp rendering format for Java graphics libraries
Java 2D aka java.awt.Graphics2D is the low-level API used by many of the graphics libraries available for Java UIs (AWT, Swing, SWT). Many legacy apps still use this API. Web developers have used the API by generating raster images via the API, but there are also custom implementations of the Graphics2D API which can render the graphics as an SVG presentation, which can then be passed for your web app. With these libraries, you'll get razor sharp scalable output and smaller file sizes (especially with graphics with large dimensions).
As an example of this kind of usage, I created a couple of examples of how you can draw images with a low-level Graphics2D API and using a JUNG graph library. The example has usage examples for three different Graphics2D implementations that support outputting graphics as SVG: Apache Batik, JFreeSVG and VectorGraphics2D.
See all source code examples
The examples I prepared are all available via GitHub. Check them out to see how to utilize the native vector graphic format of the web in your Vaadin apps. If you have used SVG in other ways, please share your experiences!