Convert Embedded Svg to Png In-Place

Styling errors when converting inline SVG to png

I've been searching myself for a solution to export PNG with CSS created through Rickshaw (based on D3). The sole solution I found was to:

treat the DIVs different from the SVGs, and treat them all individually
convert the DIVs (and other non-SVG content) with html2canvas to canvas
make the CSS inline to the SVG; @thirdcreed has posted the JavaScript code and D3 selectors for that at: Rickshaw CSS/Axes in JSDOM - adapt that to your custom CSS as needed.

convert the SVGs into canvas with code such as

var imgsrc = 'data:image/svg+xml;base64,'+ btoa(html2);
var img = '<img src="'+imgsrc+'">';      
var canvas = document.querySelector("canvas"),
context = canvas.getContext("2d");      
var image = new Image;
image.src = imgsrc;
image.onload = function() {
  context.drawImage(image, 0, 0);
}

merge the different canvases you have into one

convert into image with code such as:

var canvasdata = canvas.toDataURL("image/png");
var pngimg = '<img src="'+canvasdata+'">'; 
d3.select("#pngdataurl").html(pngimg); // contains selector from D3, adjust if you don't use D3
var a = document.getElementById("some_anchor"); // Fix for Firefox: supply an anchor-tag here that is 'display:none' in your document, otherwise download won't work
a.download = "sample.png";
a.href = canvasdata;
a.click();

Note that every browser expect for Internet Explorer requires the SVGs to have the xmlns attribute.

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

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?

Convert an SVG to PNG based on the path of the image

Working with angular-svg-icon saved the day.

In my HTML, I displayed my svg image this way:

<svg-icon #mySVGImg src="path/to/mysvg/mysvg.svg" [svgStyle]="{ 'width.px':140, 'height.px':140 }"></svg-icon>

and in my typescript, I called the saveSvgAsPng method like this:

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import * as svg from 'save-svg-as-png';
// Other imports

@Component({
  //....
})
export class MyTSPage implements OnInit {

    @ViewChild("mySVGImg", { read: ElementRef }) mySVGImg: ElementRef;

    myConvertMethod() {
        svg.saveSvgAsPng(this.mySVGImg.nativeElement.querySelector("svg"), "pngtest.png");
    }
}

Calling myConvertMethod method saved a new png file with the name pngtest.png

embedded image in svg disappear on converting svg to png

I found the solution. I had to do it in a totally different way. I took help from -> converting image to base64.

Now that the image has been embedded in the SVG the php code successfully converts the svg to PNG image. Just replaced the image path with base64 string.

How to convert png image to inline svg

You can convert a PNG image to SVG by uploading the PNG image to the website below;

**1)**https://convertio.co/png-svg/

But these websites will only give svg paths without any coloring. You have to use fill property of CSS to color the paths of SVG. To explain this I will discuss the following example with you;

The PNG we are going to convert

I used first website to get following save path and fill it with red color;

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
path {
        fill:red;
      }

        </style>
    </head>
    <body>
        <h1>
            <svg version="1.0" xmlns="http://www.w3.org/2000/svg"
     width="200.000000pt" height="200.000000pt" viewBox="0 0 200.000000 200.000000"
     preserveAspectRatio="xMidYMid meet">
    <metadata>
    Created by potrace 1.15, written by Peter Selinger 2001-2017
    </metadata>
    <g transform="translate(0.000000,200.000000) scale(0.100000,-0.100000)"
    fill="#000000" stroke="none">
    <path d="M671 1970 c-92 -31 -193 -85 -271 -143 -66 -49 -190 -166 -190 -180
    0 -5 8 -3 17 4 15 11 14 9 -1 -9 -11 -12 -21 -20 -24 -17 -7 6 -32 -15 -32
    -27 0 -5 6 -6 13 -2 7 4 9 3 4 -2 -5 -5 -14 -9 -19 -9 -6 0 -13 -6 -16 -14 -3
    -9 0 -11 8 -6 9 5 11 4 6 -4 -4 -6 -11 -9 -16 -6 -12 8 -33 -33 -24 -47 4 -7
    3 -8 -4 -4 -14 8 -63 -86 -96 -186 -23 -69 -24 -86 -24 -313 0 -227 1 -244 24
    -313 30 -92 92 -215 104 -207 5 3 12 0 16 -6 5 -8 3 -9 -6 -4 -8 5 -11 3 -8
    -6 3 -8 10 -14 16 -14 5 0 14 -4 19 -9 5 -5 2 -6 -6 -1 -9 5 -12 3 -9 -6 3 -8
    10 -14 16 -14 5 0 14 -4 19 -9 5 -5 3 -6 -4 -2 -7 4 -13 3 -13 -2 0 -12 25
    -33 32 -27 3 3 13 -5 24 -17 15 -18 16 -20 2 -9 -10 7 -18 9 -18 4 0 -15 127
    -134 200 -187 79 -59 175 -108 272 -140 69 -23 86 -24 318 -24 273 0 308 6
    458 82 78 39 224 144 218 155 -3 4 13 25 36 47 22 21 38 33 34 27 -12 -21 4
    -15 25 9 23 29 24 45 2 27 -10 -7 -7 -1 6 14 27 30 41 37 20 9 -11 -14 -10
    -13 9 2 23 20 31 42 10 30 -8 -4 -10 -3 -5 2 5 5 14 9 19 9 6 0 13 6 16 14 3
    9 0 11 -9 6 -8 -5 -11 -4 -6 1 5 5 14 9 19 9 6 0 13 6 16 14 3 9 0 11 -8 6 -9
    -5 -11 -4 -6 4 4 6 11 9 16 6 12 -8 74 115 104 207 23 69 24 86 24 313 0 227
    -1 244 -24 313 -30 92 -92 215 -104 207 -5 -3 -12 0 -16 6 -5 8 -3 9 6 4 8 -5
    11 -3 8 6 -3 8 -10 14 -16 14 -5 0 -14 4 -19 9 -5 5 -2 6 6 1 9 -5 12 -3 9 6
    -3 8 -10 14 -16 14 -5 0 -14 4 -19 9 -5 5 -3 6 5 2 21 -12 13 10 -10 30 -22
    19 -23 19 -8 -1 11 -15 7 -14 -13 4 -28 25 -38 43 -12 21 8 -7 15 -8 15 -3 0
    19 -168 170 -242 218 -50 31 -30 9 26 -29 29 -20 62 -46 72 -58 11 -11 -12 3
    -51 32 -81 62 -219 130 -320 159 -38 11 -62 20 -52 20 27 1 159 -45 227 -79
    33 -17 60 -28 60 -25 0 9 -120 65 -192 89 -69 23 -86 24 -321 24 -243 0 -249
    -1 -326 -28z m798 -664 c55 -53 66 -107 66 -321 0 -268 -24 -336 -127 -356
    -55 -10 -707 -10 -772 0 -102 17 -131 94 -130 351 0 238 27 325 107 349 18 6
    202 9 429 8 l397 -2 30 -29z"/>
    <path d="M920 982 l0 -191 145 92 c79 51 144 94 145 97 0 3 -53 39 -117 80
    -64 41 -129 83 -145 93 l-28 19 0 -190z"/>
    </g>
    </svg>
        </h1>
    
    </body>
    </html>

**output1:**https://jsfiddle.net/defenderkhan/0bsLdqfp/

If you are not getting some SVG paths from one website then you can use both websites to get different SVG paths and then you can color them as follow;

PNG image we are going to convert

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    .p1
{
    fill:white;
}
.p2
{
    fill: green;
}
.p3
{
    fill: black;
}
    </style>
</head>
<body>
    <?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
 "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
 width="200.000000pt" height="200.000000pt" viewBox="0 0 200.000000 200.000000"
 preserveAspectRatio="xMidYMid meet">

<g transform="translate(0.000000,200.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path class="p1" d="M0 1000 l0 -1000 1000 0 1000 0 0 1000 0 1000 -1000 0 -1000 0 0
-1000z m1245 841 c449 -132 709 -580 595 -1026 -66 -260 -249 -472 -495 -574
-208 -87 -467 -84 -670 8 l-67 30 -229 -73 c-211 -68 -229 -72 -224 -52 4 11
36 112 73 222 l66 202 -31 68 c-118 260 -119 510 -3 750 113 233 325 397 595
460 87 20 298 12 390 -15z m390 -184 c1 -7 6 -11 11 -10 6 1 11 -5 11 -13 0
-10 -9 -6 -28 12 -16 15 -26 31 -23 36 7 11 29 -7 29 -25z m-1195 18 c0 0 -17
-18 -39 -39 -29 -28 -41 -34 -46 -24 -5 7 -5 10 0 6 11 -10 37 11 29 23 -3 5
0 8 7 7 7 -2 14 3 15 10 1 6 2 14 3 15 1 3 31 5 31 2z m-100 -111 c0 -8 -19
-13 -24 -6 -3 5 1 9 9 9 8 0 15 -2 15 -3z m1427 -63 c0 -11 -5 -18 -9 -15 -4
3 -5 11 -1 19 7 21 12 19 10 -4z m-1620 -463 c-3 -8 -6 -5 -6 6 -1 11 2 17 5
13 3 -3 4 -12 1 -19z m1750 -80 c-3 -8 -6 -5 -6 6 -1 11 2 17 5 13 3 -3 4 -12
1 -19z m-148 -455 c-6 -7 -15 -10 -20 -7 -13 8 -3 21 15 21 12 0 13 -4 5 -14z
m-49 -37 c0 -2 -8 -10 -17 -17 -16 -13 -17 -12 -4 4 13 16 21 21 21 13z"/>
<path class="p2" d="M848 1715 c-231 -56 -423 -234 -504 -465 -35 -100 -44 -272 -20 -374
18 -76 55 -167 96 -234 l26 -43 -36 -107 c-21 -59 -40 -117 -44 -129 -7 -20
-1 -19 128 22 121 38 137 41 156 28 39 -27 163 -73 243 -89 158 -32 343 -1
487 83 36 21 101 74 145 118 137 136 204 301 205 501 0 270 -152 514 -395 634
-44 22 -109 46 -145 55 -81 18 -264 18 -342 0z m9 -405 c23 -52 42 -104 42
-114 1 -10 -15 -39 -36 -64 l-36 -44 19 -37 c44 -83 226 -231 285 -231 8 0 37
26 66 57 l51 58 107 -53 107 -53 -5 -46 c-8 -78 -66 -132 -162 -154 -47 -10
-64 -10 -122 6 -38 10 -108 39 -158 63 -75 38 -106 61 -186 141 -154 155 -214
260 -213 371 1 124 62 203 154 198 l45 -3 42 -95z"/>

<path class="p3" d="M877 1884 c-43 -8 -119 -29 -169 -48 -50 -19 -98 -32 -107 -29 -13 4
-13 3 -2 -5 11 -8 10 -12 -7 -21 -27 -14 -35 -14 -26 1 4 7 3 8 -5 4 -6 -4 -9
-11 -6 -16 3 -4 -6 -15 -20 -24 -34 -22 -45 -19 -16 4 44 38 9 20 -41 -20 -28
-22 -45 -40 -37 -40 7 0 -7 -20 -31 -45 -24 -24 -46 -42 -50 -40 -4 3 -16 -5
-26 -18 -16 -18 -16 -19 -1 -8 9 7 17 9 17 4 0 -16 -22 -32 -36 -26 -8 3 -14
0 -14 -7 0 -6 5 -8 10 -5 15 9 12 -11 -3 -24 -8 -6 -17 -8 -21 -4 -4 4 -4 1
-1 -8 3 -8 -2 -23 -10 -34 -16 -19 -16 -19 -9 5 7 29 2 26 -16 -9 -8 -15 -8
-21 -1 -17 16 10 15 7 -24 -77 -109 -236 -100 -512 25 -756 17 -33 17 -43 6
-80 -6 -23 -14 -39 -17 -36 -3 3 -5 -3 -5 -13 2 -31 -98 -322 -110 -322 -12 0
-38 -59 -30 -67 2 -2 9 10 15 28 6 18 13 30 16 27 3 -3 1 -17 -4 -32 -8 -18
-7 -26 0 -26 6 0 116 34 243 75 233 75 260 82 270 66 3 -4 40 -20 82 -35 276
-98 554 -65 791 96 45 30 58 35 47 16 -5 -9 -3 -9 9 1 9 7 15 17 12 21 -7 11
32 43 43 36 5 -3 16 2 23 12 13 15 12 16 -3 3 -23 -17 -24 2 -1 20 9 8 38 40
64 71 29 35 50 53 53 45 3 -7 3 -2 1 10 -3 12 -1 24 5 28 5 3 10 1 10 -6 0 -6
10 0 21 15 12 15 19 29 16 32 -3 3 -11 -4 -17 -16 -6 -12 -14 -20 -16 -17 -3
2 11 35 30 73 54 106 77 202 83 340 6 124 -10 245 -43 322 -10 25 -11 38 -4
47 8 10 7 15 -1 21 -8 4 -9 3 -5 -4 4 -7 3 -12 -1 -12 -11 0 -56 90 -49 97 2
3 12 -12 21 -32 10 -19 19 -34 22 -32 2 2 -6 23 -19 46 -13 25 -25 37 -29 30
-9 -16 -32 27 -23 44 4 6 4 9 -1 5 -4 -4 -14 -3 -22 3 -15 13 -18 33 -3 24 6
-3 10 -1 10 5 0 7 -6 10 -14 7 -7 -3 -19 0 -25 6 -15 15 -14 30 2 21 6 -4 1 5
-12 19 -13 15 -27 24 -31 22 -4 -2 -18 7 -30 20 -13 14 -20 25 -15 25 4 0 0 9
-9 19 -10 11 -23 17 -30 15 -7 -3 -19 2 -26 11 -7 8 -9 15 -5 15 4 0 2 7 -6
16 -15 18 -74 50 -65 35 10 -15 0 -14 -35 4 -16 9 -27 20 -24 25 3 5 0 12 -6
16 -8 4 -9 3 -5 -4 10 -16 11 -16 -81 17 -93 35 -234 61 -313 60 -30 0 -90 -7
-133 -15z m393 -49 c135 -44 237 -103 339 -199 101 -96 198 -260 235 -401 24
-87 31 -249 17 -340 -65 -398 -373 -681 -786 -720 -118 -11 -322 28 -435 85
l-35 17 -225 -73 c-123 -40 -226 -71 -228 -69 -3 2 28 103 67 223 l71 219 -31
69 c-65 146 -83 225 -83 379 0 150 11 212 61 330 88 209 280 392 489 466 117
41 173 49 319 45 119 -3 152 -7 225 -31z"/>
</g>
</svg>

</body>
</html>

**output2:**https://jsfiddle.net/defenderkhan/t1279pv8/

Note: The color filling CSS code will become more difficult as you will convert more color full image.