Convert SVG to image JPEG PNG etc in the browser

Question

I want to convert SVG into bitmap images  like JPEG  PNG  etc   through JavaScript

User · Answer

The solution to convert SVG to blob URL and blob URL to png image

_x000D_

const svg=`<svg version="1.1" baseProfile="full" width="300" height="200"_x000D_
xmlns="http://www.w3.org/2000/svg">_x000D_
   <rect width="100%" height="100%" fill="red" />_x000D_
   <circle cx="150" cy="100" r="80" fill="green" />_x000D_
   <text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text></svg>`_x000D_
svgToPng(svg,(imgData)=>{_x000D_
    const pngImage = document.createElement('img');_x000D_
    document.body.appendChild(pngImage);_x000D_
    pngImage.src=imgData;_x000D_
});_x000D_
 function svgToPng(svg, callback) {_x000D_
    const url = getSvgUrl(svg);_x000D_
    svgUrlToPng(url, (imgData) => {_x000D_
        callback(imgData);_x000D_
        URL.revokeObjectURL(url);_x000D_
    });_x000D_
}_x000D_
function getSvgUrl(svg) {_x000D_
    return  URL.createObjectURL(new Blob([svg], { type: 'image/svg+xml' }));_x000D_
}_x000D_
function svgUrlToPng(svgUrl, callback) {_x000D_
    const svgImage = document.createElement('img');_x000D_
    // imgPreview.style.position = 'absolute';_x000D_
    // imgPreview.style.top = '-9999px';_x000D_
    document.body.appendChild(svgImage);_x000D_
    svgImage.onload = function () {_x000D_
        const canvas = document.createElement('canvas');_x000D_
        canvas.width = svgImage.clientWidth;_x000D_
        canvas.height = svgImage.clientHeight;_x000D_
        const canvasCtx = canvas.getContext('2d');_x000D_
        canvasCtx.drawImage(svgImage, 0, 0);_x000D_
        const imgData = canvas.toDataURL('image/png');_x000D_
        callback(imgData);_x000D_
        // document.body.removeChild(imgPreview);_x000D_
    };_x000D_
    svgImage.src = svgUrl;_x000D_
 }

_x000D_

User · Answer

I recently discovered a couple of image tracing libraries for JavaScript that indeed are able to build an acceptable approximation to the bitmap  both size and quality  I m developing this JavaScript library and CLI    https   www npmjs com package svg-png-converter  Which provides unified API for all of them  supporting browser and node  non depending on DOM  and a Command line tool    For converting logos cartoon like images it does excellent job  For photos   realism some tweaking is needed since the output size can grow a lot   It has a playground although right now I m working on a better one  easier to use  since more features has been added   https   cancerberosgx github io demos svg-png-converter playground

User · Answer

This seems to work in most browsers   function copyStylesInline destinationNode  sourceNode       var containerElements     svg   g       for  var cd   0  cd  lt  destinationNode childNodes length  cd             var child   destinationNode childNodes cd          if  containerElements indexOf child tagName     -1                copyStylesInline child  sourceNode childNodes cd                continue                  var style   sourceNode childNodes cd  currentStyle    window getComputedStyle sourceNode childNodes cd           if  style     undefined     style    null  continue         for  var st   0  st  lt  style length  st                 child style setProperty style st   style getPropertyValue style st                      function triggerDownload  imgURI  fileName      var evt   new MouseEvent  click         view  window      bubbles  false      cancelable  true         var a   document createElement  a      a setAttribute  download   fileName     a setAttribute  href   imgURI     a setAttribute  target     blank      a dispatchEvent evt      function downloadSvg svg  fileName      var copy   svg cloneNode true     copyStylesInline copy  svg     var canvas   document createElement  canvas      var bbox   svg getBBox      canvas width   bbox width    canvas height   bbox height    var ctx   canvas getContext  2d      ctx clearRect 0  0  bbox width  bbox height     var data    new XMLSerializer    serializeToString copy     var DOMURL   window URL    window webkitURL    window    var img   new Image      var svgBlob   new Blob  data    type   image svg xml charset utf-8       var url   DOMURL createObjectURL svgBlob     img onload   function          ctx drawImage img  0  0       DOMURL revokeObjectURL url       if  typeof navigator      undefined   amp  amp  navigator msSaveOrOpenBlob                var blob   canvas msToBlob                     navigator msSaveOrOpenBlob blob  fileName              else           var imgURI   canvas              toDataURL  image png                replace  image png    image octet-stream            triggerDownload imgURI  fileName             document removeChild canvas          img src   url

User · Answer

There are several ways to convert SVG to PNG using the Canvg library  In my case  I needed to get the PNG blob from inline SVG  The library documentation provides an example  see OffscreenCanvas example   But this method does not work at the moment in Firefox  Yes  you can enable the gfx offscreencanvas enabled option in the settings  But will every user on the site do this     However  there is another way that will work in Firefox too  const el   document getElementById  quot some-svg quot      this is our inline SVG  var canvas   document createElement  canvas      create a canvas for the SVG render canvas width   el clientWidth    set canvas sizes canvas height   el clientHeight   const svg   new XMLSerializer   serializeToString el     convert SVG to string    render SVG inside canvas const ctx   canvas getContext  2d    const v   await Canvg fromString ctx  svg   await v render     let canvasBlob   await new Promise resolve   gt  canvas toBlob resolve     For the last line thanks to this answer

User · Answer

Here a function that works without libraries and returns a Promise         converts a base64 encoded data url SVG image to a PNG image     param originalBase64 data url of svg image     param width target width in pixel of PNG image     return  Promise lt String gt   resolves to png data url of the image     function base64SvgToBase64Png  originalBase64  width        return new Promise resolve   gt            let img   document createElement  img            img onload   function                  document body appendChild img               let canvas   document createElement  quot canvas quot                let ratio    img clientWidth   img clientHeight     1              document body removeChild img               canvas width   width              canvas height   width   ratio              let ctx   canvas getContext  quot 2d quot                ctx drawImage img  0  0  canvas width  canvas height               try                   let data   canvas toDataURL  image png                    resolve data                 catch  e                    resolve null                                    img src   originalBase64             On Firefox there is an issue for SVGs without set width   height  See this working example including a fix for the Firefox issue

User · Answer

jbeard4 solution worked beautifully   I m using Raphael SketchPad to create an SVG   Link to the files in step 1   For a Save button  id of svg is  editor   id of canvas is  canvas         editor save   click function         the canvg call that takes the svg xml and converts it to a canvas canvg  canvas       editor   html         the canvas calls to output a png var canvas   document getElementById  canvas    var img   canvas toDataURL  image png       do what you want with the base64  write to screen  post to server  etc

User · Answer

Here is how you can do it through JavaScript    Use the canvg JavaScript library to render the SVG image using Canvas  https   github com gabelerner canvg Capture a data URI encoded as a JPG  or PNG  from the Canvas  according to these instructions  Capture HTML Canvas as gif jpg png pdf

User · Answer

Svg to png can be converted depending on conditions   If svg is in format SVG  string  paths    create canvas create new Path2D   and set svg as parameter draw path on canvas create image and use canvas toDataURL   as src   example  const canvas   document createElement  canvas    const ctx   canvas getContext  2d    let svgText    M10 10 h 80 v 80 h -80 Z   let p   new Path2D  M10 10 h 80 v 80 h -80 Z    ctx stroke p   let url   canvas toDataURL    const img   new Image    img src   url   Note that Path2D not supported in ie and partially supported in edge  Polyfill solves that  https   github com nilzona path2d-polyfill  Create svg blob and draw on canvas using  drawImage      make canvas element make a svgBlob object from the svg xml make a url object from domUrl createObjectURL svgBlob   create an Image object and assign url to image src draw image into canvas get png data string from canvas  canvas toDataURL     Nice description  https   web archive org web 20200125162931 http   ramblings mcpher com 80 Home excelquirks gassnips svgtopng Note that in ie you will get exception on stage of canvas toDataURL    It is because IE has too high security restriction and treats canvas as readonly after drawing image there  All other browsers restrict only if image is cross origin   Use canvg JavaScript library  It is separate library but has useful functions   Like  ctx drawSvg rawSvg   var dataURL   canvas toDataURL

User · Answer

change svg to match your element  function svg2img        var svg   document querySelector  svg        var xml   new XMLSerializer   serializeToString svg       var svg64   btoa xml     for utf8  btoa unescape encodeURIComponent xml        var b64start    data image svg xml base64        var image64   b64start   svg64      return image64    svg2img

User · Answer

I wrote this ES6 Class which does the Job    class SvgToPngConverter     constructor         this  init   this  init bind this       this  cleanUp   this  cleanUp bind this       this convertFromInput   this convertFromInput bind this           init         this canvas   document createElement  canvas        this imgPreview   document createElement  img        this imgPreview style    position  absolute  top  -9999px        document body appendChild this imgPreview       this canvasCtx   this canvas getContext  2d            cleanUp         document body removeChild this imgPreview          convertFromInput input  callback        this  init        let  this   this      this imgPreview onload   function           const img   new Image           this canvas width    this imgPreview clientWidth         this canvas height    this imgPreview clientHeight        img crossOrigin    anonymous         img src    this imgPreview src        img onload   function              this canvasCtx drawImage img  0  0           let imgData    this canvas toDataURL  image png            if typeof callback     function                callback imgData                     this  cleanUp                         this imgPreview src   input          Here is how you use it  let input    https   restcountries eu data afg svg  new SvgToPngConverter   convertFromInput input  function imgData          You now have your png data in base64  imgData           Do what ever you wish with it here        If you want a vanilla JavaScript version  you could head over to Babel website and transpile the code there

[javascript] Convert SVG to image (JPEG, PNG, etc.) in the browser

Examples related to javascript

Examples related to svg