Converting an SVG Path to a PNG

asasass · October 23, 2017, 8:39pm

Question.

In order to convert an SVG path to a PNG, do you have to first convert the SVG to an .SVG Document? or can you skip that part?

Using this svg path as an example. How would I convert it to a PNG?

Is this possible to do?

 <svg viewBox="0 0 1226 1481">
        <path d="M0 1394V87C0 46.3 13.3 19.8 40 7.5 66.7-4.8 98.7.3 136 23l1034 634c37.3 22.7 56 50.3 56 83s-18.7 60.3-56 83L136 1458c-37.3 22.7-69.3 27.8-96 15.5-26.7-12.3-40-38.8-40-79.5z" fill="red"/></svg>

For example:

Can I save it as a PNG, instead of saving it as an svg. document?

chrisofarabia · October 23, 2017, 10:33pm

What options are you offered when you click “Save Image As”?

coothead · October 23, 2017, 11:10pm

Hi there asasass,

after a bit of searching, I found this method…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>SVG code to .png image</title>

<link rel="stylesheet" href="screen.css" media="screen">

<style media="screen">
body {
    background-color: #f0f0f0;
    font: 1em/150% verdana, arial, helvetica, sans-serif;
    text-align: center;
 }

#container {
    display: inline-block;
    padding: 2em;
    border: 0.062em solid #999;
    border-radius: 1em;
    background-color: #fff;
    box-shadow: inset 0 0 1em rgba( 0, 0, 0, 0.3 ), 
            0.4em 0.4em 0.4em rgba( 0, 0, 0, 0.3 );
 }

h1,h2 {
    font-size: 1em;
 }

svg, canvas {
    display:block;
    margin: 1em 0;
 }

.hide {
    display: none;
 }
</style>

</head>
<body> 

<div id="container">

 <h1>this is the svg image</h1>

 <svg viewBox="0 0 1226 1481"  width="64" height="64">
  <path d="M0 1394V87C0 46.3 13.3 19.8 40 7.5 66.7-4.8 98.7.3 136 23l1034 634c37.3 22.7 56 50.3 56 83s-18.7 60.3-56 83L136 1458c-37.3 22.7-69.3 27.8-96 15.5-26.7-12.3-40-38.8-40-79.5z" fill="red"/>
 </svg>

 <button>svg to png</button>

 <h2 class="hide">this is the png image</h2>

 <canvas width="64" height="64"></canvas>

</div>

<script>
(function(w,d) {
   'use strict';

   var btn = d.querySelector( 'button' );
   var svg = d.querySelector( 'svg' );
   var canvas = d.querySelector( 'canvas' );

   var imageName ='your-image-name';

function triggerDownload ( imgURI ) {
   var evt = new MouseEvent( 'click', {
       view: w,
       bubbles: false,
       cancelable: true
    });

   var a = d.createElement( 'a' );
       a.setAttribute( 'download', imageName + '.png' );
       a.setAttribute( 'href', imgURI );
       a.setAttribute( 'target', 'blank' );
       a.dispatchEvent(evt);
    }

   btn.addEventListener( 'click', function () {

   var ctx = canvas.getContext( '2d' );
   var data = ( new XMLSerializer() ).serializeToString( svg );
   var DOMURL = w.URL || w.webkitURL || w;

   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 );

    var imgURI = canvas
        .toDataURL( 'image/png' )
        .replace( 'image/png', 'image/octet-stream' );

    triggerDownload( imgURI );
  };
    img.src = url;
    d.querySelector( 'h2' ).classList.remove( 'hide' );
 });
}(window, document));
</script>

</body>
</html>

coothead

asasass · October 23, 2017, 11:45pm

Thanks for that.

asasass · October 23, 2017, 11:46pm

Only save as svg.

asasass · November 2, 2017, 6:36pm

I tried doing an image, but it wouldn’t let me do it.

Is there something that will let me download the image in its current state?


  <svg width="170" height="112">

  
      <clippath id="circleView">
        <circle cx="50%" cy="50%" r="85" transform="translate(90 90)" fill="orange"></circle>
      </clippath>

    <image  x="50%" y="50%" transform="translate(-90 -90)" width="180" height="180" xlink:href="https://i.imgur.com/BO6KOvw.jpg" clip-path="url(#circleView)"></image>

  </svg>

or

Coordinates could be used instead.

  <svg width="260" height="194">
    <defs>
      <clippath id="circleView">
        <circle cx="130" cy="97" r="85" fill="orange"></circle>
      </clippath>
    </defs>
    <image x="40" y="7" width="180" height="180" xlink:href="https://i.imgur.com/BO6KOvw.jpg" clip-path="url(#circleView)"> </image>
</svg>

coothead · November 2, 2017, 9:24pm

Hi there asasass,

to the best of my knowledge, the code
will not work with < image />.

coothead

asasass · November 6, 2017, 10:52pm

Base64 to png, can this be done?

<img src='data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5MCIgaGVpZ2h0PSIxMDgiIHZpZXdCb3g9IjAgLTEwIDg1IDEyMCI+CiAgICA8cGF0aCBmaWxsPSJjdXJyZW50Q29sb3IiIHN0eWxlPSJzdHJva2U6ICNlNzdkMTk7IHN0cm9rZS13aWR0aDozcHg7Y29sb3I6YmxhY2s7ICIgZD0iTTgxIDQ0LjZjNSAzIDUgNy44IDAgMTAuOEw5IDk4LjdjLTUgMy05IC43LTktNVY2LjNjMC01LjcgNC04IDktNWw3MiA0My4zeiIvPgogIDwvc3ZnPg=='>

coothead · November 6, 2017, 11:28pm

Yes, of course.

Did you not try it?

If you did you would have got these results…

with <img src=' '> included - size= 0.38KB.
with <img src=' '> omitted - size= 0.37KB.

coothead

asasass · November 6, 2017, 11:33pm

When you click, svg to png nothing happens

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>SVG code to .png image</title>

<link rel="stylesheet" href="screen.css" media="screen">

<style media="screen">
body {
    background-color: #f0f0f0;
    font: 1em/150% verdana, arial, helvetica, sans-serif;
    text-align: center;
 }

#container {
    display: inline-block;
    padding: 2em;
    border: 0.062em solid #999;
    border-radius: 1em;
    background-color: #fff;
    box-shadow: inset 0 0 1em rgba( 0, 0, 0, 0.3 ), 
            0.4em 0.4em 0.4em rgba( 0, 0, 0, 0.3 );
 }

h1,h2 {
    font-size: 1em;
 }

svg, canvas {
    display:block;
    margin: 1em 0;
 }

.hide {
    display: none;
 }
</style>

</head>
<body> 

<div id="container">

 <h1>this is the svg image</h1>

<img src='data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5MCIgaGVpZ2h0PSIxMDgiIHZpZXdCb3g9IjAgLTEwIDg1IDEyMCI+CiAgICA8cGF0aCBmaWxsPSJjdXJyZW50Q29sb3IiIHN0eWxlPSJzdHJva2U6ICNlNzdkMTk7IHN0cm9rZS13aWR0aDozcHg7Y29sb3I6YmxhY2s7ICIgZD0iTTgxIDQ0LjZjNSAzIDUgNy44IDAgMTAuOEw5IDk4LjdjLTUgMy05IC43LTktNVY2LjNjMC01LjcgNC04IDktNWw3MiA0My4zeiIvPgogIDwvc3ZnPg=='>

 <button>svg to png</button>

 <h2 class="hide">this is the png image</h2>

 <canvas width="90" height="108"></canvas>

</div>

<script>
(function(w,d) {
   'use strict';

   var btn = d.querySelector( 'button' );
   var svg = d.querySelector( 'svg' );
   var canvas = d.querySelector( 'canvas' );

   var imageName ='your-image-name';

function triggerDownload ( imgURI ) {
   var evt = new MouseEvent( 'click', {
       view: w,
       bubbles: false,
       cancelable: true
    });

   var a = d.createElement( 'a' );
       a.setAttribute( 'download', imageName + '.png' );
       a.setAttribute( 'href', imgURI );
       a.setAttribute( 'target', 'blank' );
       a.dispatchEvent(evt);
    }

   btn.addEventListener( 'click', function () {

   var ctx = canvas.getContext( '2d' );
   var data = ( new XMLSerializer() ).serializeToString( svg );
   var DOMURL = w.URL || w.webkitURL || w;

   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 );

    var imgURI = canvas
        .toDataURL( 'image/png' )
        .replace( 'image/png', 'image/octet-stream' );

    triggerDownload( imgURI );
  };
    img.src = url;
    d.querySelector( 'h2' ).classList.remove( 'hide' );
 });
}(window, document));
</script>

</body>
</html>

coothead · November 6, 2017, 11:53pm

Why would it, how could it?

The code that I gave you is made to convert SVG code to PNG code.

coothead

asasass · November 7, 2017, 12:02am

I tried it and it doesn’t work.

coothead · November 7, 2017, 12:14am

Sorry mate, but I am not your wet nurse, so I’m out of here.

asasass · November 7, 2017, 12:31am

var fs = require('fs');
var path = require('path');

function base64ToPNG(data) {
  data = data.replace(/^data:image\/png;base64,/, '');

  fs.writeFile(path.resolve(__dirname, '../tmp/image.png'), data, 'base64', function(err) {
    if (err) throw err;
  });
}

module.exports = base64ToPNG;

system · February 6, 2018, 7:36am

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.

Topic		Replies	Views
How would I convert svg to css? HTML & CSS	4	742	May 8, 2017
Converting svg code to .svg image file HTML & CSS	2	1378	August 3, 2022
Converting an SVG Path to a Base64 data uri string HTML & CSS	14	36749	March 5, 2018
Converting data:image/svg+xml;base64 to a PNG Community	5	45650	January 21, 2018
How to convert a .svg file to to a <svg> tag? Using Readysetraphael.com/ tool Design & UX graphics	3	90975	November 10, 2014

Converting an SVG Path to a PNG

Related topics