How to control SVG resizing / scaling?

Have a SVG whose header looks like:

<svg version="1.1" id="Layer_1" xmlns="" xmlns: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.setComponentAlignment(svgEmbedded, Alignment.MIDDLE_CENTER);


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?