exupero / saveSvgAsPng

Save SVGs as PNGs from the browser.
MIT License
1.09k stars 362 forks source link

use to generate PNG on server? (solved: using sharp.js instead) #235

Closed mahesh2000 closed 4 years ago

mahesh2000 commented 4 years ago

hi, i'm generating an SVG file using node on a server and i need to convert it to a PNG on the server and send as a URI by email. is there a way to use saveSvgAsPng to do that? i'm trying svg2png but it runs on top of phantomjs which doesn't always work well. thanks!

GalaxySH commented 4 years ago

Same here, trying to use with node but can't figure out how.

mahesh2000 commented 4 years ago

i wound up using sharp. it's faster, has no such dependencies. it's kinda finicky about you getting your SVG properly formatted, including the xmlns and xmlns:xlink. if i remember correctly, the sample svg below can be used to test sharp, in case your other examples fail. it took a bit of time for us to get this to happen. we needed a graph and an embedded image in our svg.

<svg width="200" height="230" xmlns="http://www.w3.org/2000/svg" 
            xmlns:xlink="http://www.w3.org/1999/xlink">
        <path fill="white" stroke="steelblue" stroke-width="1.5" d="M0,0 L0,229 L199,229 L199,1 L0,0Z"></path><g transform="translate(5,5)"><image x="0" y="0" width="100" height="9" xlink:href=
    "data:image/jpeg;base64,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"
    />
    <g fill="none" font-size="10" font-family="sans-serif" text-anchor="middle" transform="translate(0, 25) scale(4.761904761904762,0.8) translate(0, 10)"><path fill="none" stroke="steelblue" stroke-width="1" d="M0,152L1,152 L2,126 L3,109 L4,97 L5,89 L6,84 L7,80 L8,76 L9,73 L10,71 L11,71 L12,71 L13,68 L14,67 L15,69 L16,121 L17,141 L18,157 L19,168 L20,177 L21,185 L22,193 L23,198 L24,202 L25,206 L26,209 L27,211 L28,213 L29,214 L30,216 L31,216 L32,216 L33,216 L34,216 L35,216 L36,216 L37,216 L38,216 L39,216 L40,216 M0,0Z"></path></g></g></svg>