0

We use a visualization library that draws charts using SVG visuals, based on business data, and have a requirement to convert that chart into an image which can either be copied to clipboard or downloaded to the user's local file system.

I have tried the approach mentioned in this post and this works when the dimensions of the chart are below the maximum dimensions of a canvas, as specified here. However, our charts can get really big (for some clients, they can easily be +100,000px in width) and as expected, this approach fails.

I've seen some posts on here suggest taking a server-side approach to create the image as it's too big for this to be possible on the browser so I have tried a few of these approaches as well but ultimately failed. We use .NET Core 6 for our API and have tried the below Nuget packages:

  • Svg: This fails due to this issue.
  • Aspose.SVG: This runs for 20+ mins but ultimately fails to convert the entire graph properly. It splits the original chart into 4 smaller images but these 4 images combined contain only a very small part of the graph.

Is there any approach which can take such a big SVG visual and convert it to an image in a reasonable amount of time? Ideally, we would like to generate only one image for user experience purposes and we're okay if it cannot be copied to clipboard as long as it's downloadable.

If however the only approach is to split the visual into smaller chunks, is there any way to combine these smaller images together, without any loss in data or overlap in visuals, so the user ultimately downloads only one file?

Shantan
  • 11
  • 4
  • What file size do you expect for a 100,000 pixel wide PNG file? My friendly neighborhood AI estimates that to run into the hundreds of megabytes. Uncompressed, with standard 24 bit color depth, and assuming the image is 1,000 pixels high, that would be 2.4 GB. Seems like a little much to ask from the browser in terms of memory requirements. – Robby Cornelissen Mar 16 '23 at 08:35
  • Maybe look into spliting images in pages by width? like 100 images with 1000px width instead of one 100000px width – Nikolay Mar 16 '23 at 08:46
  • Provided all diagram graphic elements are vector based (so scalable) - could you downscale the the svg export/output (similar to a scale to fit print option) in your library? – herrstrietzel Mar 16 '23 at 18:26

0 Answers0