How to control SVG resizing / scaling?

Have a SVG whose header looks like:


<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 style="width: 100%; height: 100%;" viewBox="0 0 50 50" enable-background="new 0 0 50 50" xml:space="preserve">

And the relevant part of my Java code looks like:


HorizontalLayout panel = new HorizontalLayout();

Embedded svgEmbedded = new Embedded(null, new ThemeResource(resourcePath));

panel.addComponent(svgEmbedded);
panel.setComponentAlignment(svgEmbedded, Alignment.MIDDLE_CENTER);

panel.setWidth("100%");
panel.setStyleName("someStyle");
panel.setHeight("200px");

I want the SVG to scale to the size of its cell in the Horizontal Layout. But this doesn’t happen. It seems to stay fixed at 50 x 50 pixels.

The 200px height of the layout is arbitrary. I can later change it to like 20px and I want the SVG to scale appropriately.

How can I make this happen?