Link to home
Start Free TrialLog in
Avatar of huangs3
huangs3Flag for Canada

asked on

Javascript: How to flatten large SVG into bitmap image that does not impact performance when the SVG becomes larger?

Hi Experts,

I am working on a web application that some times generates very long SVG in JavaScript, and I needs to display the corresponding graphic in a web page for people to print.
Because the SVG is very big, I encountered different difficulties in these approachs:
1. directly write the SVG on the webpage for display: very slow for IE 10 to preview print on the page.
2. write the SVG to Canvas, slow when I try to move/resize the window
3. use URL.createObjectURL() function to create Object URL and add to Image.src: URL.createObjectURL() is still an experimental method, such that it should not be used in production
4. create an image with data URI generated from SVG: still slow when move/resize the image

Is there any way to convert the SVG to bitmap image embed in the web page? If it can be done, then the performance should be independent from the SVG size, as long as the image size doesn't change. Do you know how to do that?

Thank you!
Avatar of Dave Baldwin
Dave Baldwin
Flag of United States of America image

The simplest way to convert an SVG image to a pixel image is to simply do a screen capture.  Then crop it and use the captured version as a JPG or PNG.  I've done that a number of times for different reasons.
Avatar of huangs3
Flag of Canada image

Link to home
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of huangs3


this is the solution for my question.