Convert SVG to PNG on Meteor

[patrickcneuhaus]

Hey guys,

I need a smart way of converting SVG to PNG every time a file is uploaded. There will be around ~10 uploads a week, so it’s not a huge thing.

These files will be saved to AWS S3, so the conversion can be performed either in my Meteor server or with AWS Lambda.

Any recommendation on what the best choice could be?
Also: If Lambda, I would be very thankful if you could explain to me how to use it

Thanks!

[alawi]

I’d personally outsource that to Lambda or some other service, and let Meteor server just handle serving of pages, reason being to ensure that CPU don’t spike when there are many uploads and the servers are under heavy traffic.

[deank]

From my experience working with SVGs converting them to PNG, doesn’t maintain quality of the image, you will probably end up with fuzzy images.

So my first question would be, have you done successful conversion?

I have used this package once to convert SVG to PNG.

const { convertFile}  = require('convert-svg-to-png');
 
(async() => {
  const inputFilePath = '/path/to/my-image.svg';
  const outputFilePath = await convertFile(inputFilePath);
 
  console.log(outputFilePath);
  //=> "/path/to/my-image.png"
 // upload to S3 
})();

[patrickcneuhaus]

Hey guys,

Thanks for the replies. Let me briefly explain the purpose of this conversion:

I am creating an SVG image editor for my app.
I want to store the SVG code of uploaded images in my MongoDB and generate a (much smaller) PNG image to store in S3. This way, I can use the (light) PNG images in the gallery and once the user chooses one to edit, the (heavy) SVG code is loaded.

Does it make sense to you? Have any other suggestions? Considering this workflow, how would you approach the conversion?

[paulishca]

I guess Canvas will come in play here. Perhaps something like this: https://mybyways.com/blog/convert-svg-to-png-using-your-browser. As far as I know SVG is vectorial so in theory you should be able to “stretch” it on a canvas as large as necessary to avoid pixelation. I’d use progressive JPG instead of PNG unless you care for the alpha transparency.

I’d be ok with your proposed workflow, do the conversion in the browser, upload to S3 from the browser.
Every time you create a new version, you can delete the old one and update the id of the new one in your mongo. I can provide you with an up to date S3 uploader including metadata for expires and cacheing. On success you get the resulting url (asset Id / name) from S3 and save together with your SVG in Mongo.

[patrickcneuhaus]

That would be awesome!

[captainn]

I’ve done this in the past by outsourcing it to the user’s machine when they save/upload their canvas or SVG work - at that time, you can render the SVG using canvas (or some SVG->PNG npm package like pica or svg-to-png), then use browser APIs to get a PNG (I like pica for this), then upload that to S3 (if you use slingshot it never even touches your meteor server).

[paulishca]

Just a mention, Slingshot hasn’t been updated for 3 years if I am not wrong. I maintain this package here, up to date : https://github.com/activitree/s3up-meta. It does Meteor Server signed / secured uploads and deletions to/from S3. There are definitely other packages out there that do this.

[captainn]

Cool! I’ll check that out. I still use Slingshot because it still works - but it would be nice to use something I know is still being maintained (I forked Slingshot to remove underscore, but no response to my PR).