I am currently utilizing SVG-Edit to craft a rather large SVG image file. However, I've noticed that the memory usage appears to be excessive, leading me to question if this is normal or if there are optimizations that I may have overlooked.
Below is a breakdown showcasing the memory changes at each stage, observed using Firefox 10's about:memory page:
Stages:
- Before: Prior to loading SVG-Edit
- Ready : After SVG-Edit is loaded
- Loading 35 images totaling 16.6MB *
- Generating preview of the file *
- Closing the preview *
- Closing the tab and initiating FF memory cleanup via about:memory page
* Note that these stages involve my custom function, not SVG-Edit's
The increase in memory usage between the Ready and Load Images stages is quite significant, almost reaching 300 MB for loading just 16 MB of images! Although I utilize ObjectURL to load the images, it doesn't seem to be the sole cause. The spike during preview generation - where the ObjectURL array is transformed into data:uri - while expected due to embedding all images, still seems excessive. It's common for resulting SVGs to exceed 50MB in size due to this requirement.
Important to mention that SVG-Edit operates on DOM, not Canvas.
I welcome any guidance in identifying the root cause behind the escalating memory consumption.
Here's a simplified outline of the image loading process (triggered by the input change() event):
- Set Image.src to objectURL
- Assign Image.onload event to create SVGImage element with corresponding src, width, and height attributes derived from Image. Also execute revokeObjectURL()
- Store SVGImage in global object array { imageID, <image> element, file handle }
- Append SVGImages to SVG