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!
huangs3Asked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Dave BaldwinFixer of ProblemsCommented:
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.
huangs3Author Commented:
Hi Dave, screen capture is a manual way to get a single image from a given SVG, but the context of the question is to let the application automatically generate it and embed in web page.

The javascript solution is found:
1. use CANVG library to draw SVG on HTML canvas element
   https://github.com/gabelerner/canvg
2. use HTMLCanvasElement.toDataURL() method to get the data URL that presents the bitmap
3. assign the data URL to a HTML image element such that it is displayed on the web page.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
huangs3Author Commented:
this is the solution for my question.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Languages and Standards

From novice to tech pro — start learning today.