I have always been a big fan of the SVG format (Scalable Vector Graphics, an XML based standard to represent graphics). I was already building a charting library using SVGs when the only way to display them in a browser was a browser plugin by Adobe. Around seven years ago I also authored an add-on that made it easy to use the SVG format in Vaadin apps. For those browsers that didn't yet support SVG, it fell back to a JavaScript library that rendered the SVG in alternative methods.
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
The downside of using SVG as an image is that this way browsers treat SVG files as static image files. The SVG format supports JavaScript and event listeners, which opens up possibilities for a more advanced usage in dynamic applications. But JavaScript is not executed, and you cannot interoperate with the host page, if you just use SVG inside an <img> element or as a CSS background image. To take full advantage of SVG, you can use inline SVG (basically the <svg> tag right inside your HTML5 code) or <object> element. Inlined SVG is sometimes really handy to add and may be easier if you have a tight integration between the host page and the SVG part. The object element allows easier re-use of the SVG content and you can even move its hosting or generation to a separate server.
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.
But you can also embed SVG directly from your Java code and expose some JavaScript APIs for your SVG files to call back a server side functionality. In the following example, an SVG file is placed using Embedded component (basically an <object> tag behind the scenes) and a server side hook is registered for it:
Embedded svg = new Embedded();
svg.setWidth("400px");
svg.setHeight("400px");
svg.setSource(new ClassResource("/pull.svg"));
// Expose a JS hook that pull.svg file calls when clicked on a certain part
JavaScript.getCurrent().addFunction("myVaadinFunction",
(JsonArray arguments) -> {
Notification.show("Message from SVG:"
+ arguments.getString(0));
});
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!