How to convert all svg items to raster

I observed that during the generation of my documents the size of SVG content is growing exponentially.

My goal is to generate reports with multiple pages by using SVG for charting, can I know if there is an existing module of a small part of code that is doing the conversion?

Hi there, welcome!

I’m not sure i understand everything.

you really can’t get into something smaller than svg (in terms of weight), so i guess your problem is that the svg is overcrowding the html code. Is that what you’re experiencing?

Do you have some example code to share?

Dear Julien,

Thanks a lot, I’m using highcharts, d3 and some other technologies for my mapping, charting and so on… and when I generate a 20 pages I got a 70 Mb file in pdf, specially when there is multiple svg lines like with d3 map, highcharts sankey chart. I saw that there is possibility to change all svg in png with js.

My goal is to integrate the code transforming svg in png to reduce the size of my document. I was asking of there is something already available with pagedjs.

Ah i see, I would be happy to see some examples later on .-)

Even if you have a really small image, i’m not sure that you’ll win a lot going with with png or jpg. Unless you want to go with low res, but with sankey Chart, it would be a shame.

Do you have illustration in those svg? (png, jpg, anything that’s not vector?)

I would try to use a svg optimization tool (https://github.com/jakearchibald/svgomg) first, and see how it goes.

Then, because we never know, and image format may help, i would try https://www.npmjs.com/package/svg-png-converter would work in the browser.

The last solution is to look at pdf optimisation, but i’m pretty sure it’s gonna be useless here.

Tell me how it goes!

This is an idea of what I’m doing already.

Many thanks for your inputs, I will test them and revert with some results.

Pdf optimization is not working at all, it even increasing the size of my file.

1 Like