HTML5 Canvas - load and unload SVG dynamically?

[FlatChat]

How would I load a SVG dynamically onto the stage?  E.g. into a movieclip?  

Then remove it when not required?

The path to the SVG is contained as a column in a MySQL database, which is not a problem in itself, and the SVGs are contained in a folder in the published directory.

[FlatChat]

After looking at the following: 

https://community.adobe.com/t5/animate-discussions/animate-html-canvas-js-and-loading-svg-from-file/...

https://createjs.com/docs/preloadjs/classes/LoadQueue.html

https://stackoverflow.com/questions/25608721/unable-to-preload-and-display-svg-with-createjs 

I did it the easy way with using:

var patientImage = new createjs.Bitmap("images/patient_profiles/5.svg");
stage.addChild(patientImage);

Though I may change my ways later depending on performance, but I don't see any issue with this looking ahead.

[FlatChat]

problem though with proportional scale of the svg to the stage:

var patientImagePath = data['patient_image_path']

patientImage = new createjs.Bitmap(patientImagePath);

patientImage.x = 96;
patientImage.y = 36.05;
patientImage.scaleX = 0.16;
patientImage.scaleY = 0.16;

root.patientDetailsModal.addChild(patientImage);

Looks OK initially (this is the patient image...)

But as I am using responsive settings, the patient image doesn't scale proportionally to the rest of the stage:

How sould this be fixed?

[FlatChat]

Forgot to add that in the second image, I have resized the browser to be smaller...