Typescript mix of the @klues and @Nitsan BenHanoch anwswers to converts an svg string into a data:image/png;base64 string keeping the aspect ratio
/** * Converts an svg string into a data:image/png;base64 string keeping the aspect ratio */function svgStringToBase64Png( svg: string, width: number = 1500,): Promise<string | null> { const svgUrl = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}` return new Promise<string | null>((resolve) => { const img = document.createElement('img') img.onload = function () { document.body.appendChild(img) const canvas = document.createElement('canvas') const ratio = img.clientWidth / img.clientHeight || 1 document.body.removeChild(img) canvas.width = width canvas.height = width / ratio const ctx = canvas.getContext('2d') ctx?.drawImage(img, 0, 0, canvas.width, canvas.height) try { const data = canvas.toDataURL('image/png') resolve(data) } catch (e) { resolve(null) } } img.onerror = function () { resolve(null) } img.src = svgUrl })}