good component for SVG resizing ?


I have used svgComponent to render SVG images in my application. However, I couldnt resize the svg images to desired size. If I try to set the size in svgComponent, the image is bounded with scroll bars, not getting resized.

Can anyone suggest me an add-on for resizing ?

Cheers !


If you have relative size for your SvgComponent your SVG should scale fine if you have proper viewbox and 100% size for the svg element. See e.g. this example with SVG capable browser (although it is not actually using SvgComponent):

If you want some kind of zoom and pan controls, you could either create those controls directly to your SVG file or develop the SVG component further so that it contains controls that modify essential properties dynamically. If you choose to implement the latter, I’d be happy add the same feature to the SvgComponent add-on. I think I heard somebody ordered this kind of feature via our services, but I guess the feature was never donated back



Thanks for your response.

What do you mean by “100% size for the svg element.” ??

I am adding the svgComponent inside a grid as follows image = assetView.getThumbnailInBuffer(assetID);
SvgComponent svgImage = new SvgComponent();
svgImage.setSvg(new String(image.toByteArray()));

grid.addComponent(svgImage, i%mColumns, curRow);
grid.setComponentAlignment(svgImage, Alignment.TOP_CENTER);

Is there something else I need to do ? The actual result is that the original image is rendered without resizing. (with supporting scrollbars to scroll Horizontally and vertically )


You are correctly setting the size for the Vaadin component, but that just defines the area into which your SVG will be added. With SVG element I mean the DOM node named svg in you SVG file.

Here is an example how your SVG file could start and also you can see the “100%” size definition. Here the viewBox is 980x400, but it is always scaled to fit the available area.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.0//EN'
<svg preserveAspectRatio="xMidYMid" style="width:100%;height:100%;" viewBox="0 0 980 400" xmlns="" xmlns:xlink=""


How I integrate SVG drawer in vaadin 7?