search

CreateJS / EaselJS

The Easel Javascript library provides a full, hierarchical display list, a core interaction model, and helper classes to make working with the HTML5 Canvas element much easier.
http://createjs.com/
MIT License
8.11k stars 1.97k forks source link

Bitmap class - new createjs.Bitmap - SVG not loading at viewbox size #1070

Open prbrowne opened 2 years ago

prbrowne commented 2 years ago

Using the Bitmap class, new createjs.Bitmap, with SVG, the SVG is loaded at some enormous size, without reference to the SVG's viewbox for dimensions.

This doesn't happen with other images formats like PNG, which load at the original size.

Scaling the SVG is not an option for responsive sites.

SVG should load at the set width and height as per the viewbox in the SVG code. All I want is SVG to load at its original size without using scaling.

https://stackoverflow.com/questions/71790667/create-js-easel-js-createjs-bitmap-getting-svg-to-load-at-original-size

danzen commented 1 year ago

@prbrowne sorry for the delayed response here. I don't know any more than what Lanny replied in the StackOverflow link but I do know that in ZIM we implemented two ways to handle SVG - one is a function that converts the SVG to an image and works pretty well flawlessly as far as we can tell. The other is to convert SVG to ZIM shapes and that has the advantage of making them editable. https://zimjs.com/svg/

If you look at the ZIM code for SVGToBitmap https://zimjs.com/code.php?view=83.27&title=svgToBitmap&line=74632 you can see the code that we used. You may be able to adapt it. Or consider using ZIM. Cheers.