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!
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!
Dave Baldwin
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.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
this is the solution for my question.