I am using createjs.Bitmap to add an SVG to the stage. This is in Adobe Animate HTML5 Canvas which uses the Create.js/Easel.js frameworks. The project is using a responsive layout.
The problem is the SVG does not scale relative to the stage and other canvas objects around it. The SVG was created from Adobe Illustrator and it's size in Illustrator is 151.5px wide X 163.7px high.
var root = this;
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.stage.addChild(patientImage);
'Normal' view on large monitor showing the SVG (person's face). The surrounding elements are canvas objects...
and after reducing the browser size by dragging (not zoom...).
Also tried:
patientImage = new createjs.Bitmap(patientImagePath).set({scaleX: 0.16, scaleY: 0.16});
Makes no difference.
The odd thing is that the SVG code shows:
viewBox="0 0 151.5 163.7"
which is shows the correct width and height of the SVG, but if I don't apply any scale to the SVG on load in JS, it gets loaded in an enormous size, (virtually occupies the whole monitor...).
When I change the format to PNG (same dimensions), the PNG loads with createjs.Bitmap without any scaling at its original size, which is perfect. No issues and the PNG scales in relation to the other Canvas objects when the browser size is changed. Why is SVG different?
I want to use SVG, not PNG. It seems the SVG just gets scaled up significantly on load by create.js without reference to its original size in the SVG's viewbox...
So how do I get the SVG to load at it's original size??
See also my logged issue on GitHub on this for create.js
Without attaching or linking your SVG file it's hard to guess (beside one comment above).
I'll assume Adobe Illustrator (I don't have it anymore) saves SVG with viewBox attribute AND height and width attributes. What happens if you remove these two attributes and rely on browser (and create.js) automatic resizing of SVG?
If you are not aware of different SVG aspectRatio parameter values take a look on the specification:
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio