I am using SVG-Edit to create a pretty big SVG image file. The problem is the memory usage seems insane, and I’m wondering if this is normal or there are things I’m missing in the optimization department.
Here is a table showing memory delta at each stages, using Firefox 10 about:memory page:
Stages:
- Before: Before SVG-Edit is loaded
- Ready : SVG-Edit is loaded
- Load 35 images with total size of 16.6MB *
- Preview generated file *
- Closed Preview *
- Closed tab, trigger FF memory cleanup via about:memory page
* My custom function, not SVG-Edit’s
As you can see in the delta of Ready <-> Load Images, the memory usage pretty much increased by 300 MB! To load 16 MB of images! The way I load the images is by creating ObjectURL, so that cannot be the reason why. During the preview is when I transform the ObjectURL array to data:uri, so I understand the huge increase there (still, a bit too much I think). The requirement is to have a single resulting SVG with all images embedded so it’s typical for each SVGs to be 50MB or more in size.
It’s worth a note that SVG-Edit does not use Canvas. It’s DOM-based editor.
I’ll appreciate any help, especially on how I can really pin-down what exactly is taking memory.
Here’s the simplified flow when loading images (input change() event):
- set Image.src to objectURL
- set Image.onload event to create SVGImage element with src, width, height, copied from Image. revokeObjectURL() is also executed
- store SVGImage in global array of object { imageID, <image> element, file handle }
- append SVGImages to SVG
The 16MB is the size of the SVG. The 300MB jump there is for image surfaces, which are pixel data. This will be 4 bytes per pixel of rendered image.
So you could have a tiny SVG image with just a 1000px by 1000px rectangle in it; this could probably be done in under 500 bytes of SVG. But the rendered version would be 4MB of pixel data….