SVG with URL link inside how to wait?

#1

Hey Guys,

Quick Questions

I have an SVG containing a Url and am trying to use Sharp to convert the SVG to a PNG and download it to a file.

I have the downloading working, but my problem is Sharp does not wait for the URL to be downloaded so that part of the SVG / Image is missing.

Any Ideas how to fix this?

You’ll see attached the result PNG and what it should be in screenshot.

new-file
new-file672×685 1.62 KB

Screen Shot 2022-10-20 at 2.16.44 PM
Screen Shot 2022-10-20 at 2.16.44 PM1274×1058 68.6 KB

SVG file

#2

SOURCE CODE BELOW

const fs = require('fs')
const sharp = require("sharp")
let srcfile = "downloads/file.svg"

const overlayImage = async () => {
const imgSharp = await sharp(srcfile)
imgSharp
.png()
.toFile("downloads/new-file.png")
.then(function(info) {
    console.log(info)
})
.catch(function(err) {
    console.log(err)
})
}
return overlayImage();

SVG CODE BELOW

<?xml version="1.0" encoding="UTF-8" standalone="no" ?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="672" height="685" viewBox="0 0 672 685" xml:space="preserve">

<desc>Created with Fabric.js 4.6.0</desc>

<defs>

</defs>

<g transform="matrix(1 0 0 1 336.5 342.5)" id="gridLine" >

<line style="stroke: rgb(204,204,204); stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 0;" x1="0" y1="-342.5" x2="0" y2="342.5" />

</g>

<g transform="matrix(0.77 0 0 0.77 336 307.11)" id="_kodiak_id_3" >

<image style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;" xlink:href="https://imagedelivery.net/ZFpmFfUMgrq3swZTSeGQxA/9a8690ae-9e3b-4532-d8e1-22bd047d4f00/designer" x="-400" y="-234" width="800" height="468"></image>

</g>

<g transform="matrix(1 0 0 1 190 200)" style="" id="_kodiak_id_4" >

<text xml:space="preserve" font-family="Times New Roman" font-size="40" font-style="normal" font-weight="normal" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1; white-space: pre;" ><tspan x="-72.22" y="12.57" >HAHAH</tspan></text>

</g>

</svg>
#3

When posting code in your posts, please make sure to format it correctly as explained in:

#4

Bump