Overlaying png onto SVG using Sharp?

Question

I've got a set of png files, that are 4500x5400.

What I am trying to do is the following:

Draw a circle that is 485x485 at 300dpi
Overlay the png inside the circle, so that its resized (scaled)

I've been messing around all night but I'm not getting very far:

I've got the code for my circle:

  '<svg height="485" width="485"><circle cx="242.5" cy="242.5" r="242.5" fill="#3a4458"/></svg>'

and then some resize code that resizes my png, and masks it.

sharp(`${toConvert}/${file}`)
  .trim()
  .resize(485, 485)
  .embed()
  .overlayWith('overlay.png', { cutout: true } )
  .toFile(`./converted/${file}-pop.png`)
  .catch(err => {
    console.log(err)
  })

Does anyone know how I can combine the 2 so I can get a coloured circle with my png in it?

For reference, Sharp is an image processing library: https://github.com/lovell/sharp

And what exactly is "sharp"? You added a tag, but you forgot to check if that was the tag you needed: it is very clearly not. Can you put some links in your question so that people can look up what you're referring to? Having said that, you have an SVG, just make some scaled down versions yourself, and point to those in your SVG file(s) with a circular clipping mask applied. Why even use that sharp library at all? — Mike 'Pomax' Kamermans
Ah, my mistake. Its an image processing library! github.com/lovell/sharp — K20GH

erhanasikoglu erhanasikoglu · Accepted Answer · 2018-04-15T11:03:22

This is from my project that has a circle cover pages,

First creating a circle SVG with the help of SVG.js you can use background property to get the colored circle.

const window = require('svgdom');


const SVG = require('svg.js')(window);

const document = window.document;


const ShapeUtil = {

    drawCircle: function (width, height) {
        return new Promise(function (resolve, reject) {
            var circleDraw = SVG(document.documentElement).size(width, height);

            circleDraw.clear();
            circleDraw.viewbox(0, 0, width, height);
            circleDraw.circle(width).cx(Math.abs(width / 2)).cy(Math.abs(width / 2));
            resolve(circleDraw.svg());
        });

    } 

};

Then overlay created SVG dom to cropped image with Sharp.io :

 ShapeUtil.drawCircle( width,  height)
                        .then(function (resultSVG) {
                            sharp(croppedImage)
                                .overlayWith(new Buffer(resultSVG), {cutout: true})
                                .png().toBuffer();
                        }

Overlaying png onto SVG using Sharp?

1 Answers