Ion-icon as background fill available space - css

Question

I have multiple apps where I’m using svgs not just as small icons, but also as background, as interactive buttons or as animations.
The problem that I’m having is that I’m not able to position correctly one svg as a background image. The background image is cut on the bottom of the screen.
I tried different variations of integrating the svg but none were successfull.
I have created a github example project
https://github.com/studentrk/svgPlacement
How can I fill the available space with the svg?
Any help would be appreciated.
<ion-content [fullscreen]="true">
<ion-button (click)="addSvg()">Add svg</ion-button>
<ion-list mode="ios" mode="md">
<ion-radio-group value="mode1" [(ngModel)]="mode">
<ion-list-header>
<ion-label>Change Mode</ion-label>
</ion-list-header>
<ion-item lines="none">
<ion-label>Mode 1</ion-label>
<ion-radio slot="start" value="mode1" mode="md"></ion-radio>
</ion-item>
<ion-item lines="none">
<ion-label>Mode 2</ion-label>
<ion-radio slot="start" value="mode2" mode="md"></ion-radio>
</ion-item>
</ion-radio-group>
</ion-list>
<div id="svgContainer">
<ion-icon id="svgIcon" src="./assets/balloon.svg"></ion-icon>
</div>
</ion-content>
#svgIcon {
height: 100%;
width: 100%;
}
#svgContainer {
height: 100%;
}