title: jspdf displays Blank Pdf when adding multiple Images dynamically
body: <p>I am having following code to insert svg data to png and image to pdf using jspdf but when i am getting saved pdf it has no data in it.</p>
  
  <p>My HTML code is like this.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta http-equiv="content-type" content="text/html; charset=UTF-8"&gt;
      &lt;title&gt;&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="svg-container" class="Con_graph Con_graph0"&gt;
  &lt;span id="myChartId43000000" class="fusioncharts-container" style="position: relative; text-align: left; line-height: normal; display: inline-block; zoom: 1; font-weight: normal; font-variant: normal; font-style: normal; text-decoration: none; padding: 0px; margin: 0px; border: none; direction: ltr; width: 100%; height: 100%;"&gt;&lt;svg height="200" version="1.1" width="544" xmlns="http://www.w3.org/2000/svg" id="raphael-paper-1820" style="overflow: hidden; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-user-select: none; cursor: default; position: relative; background-color: rgb(255, 255, 255);"&gt;&lt;desc&gt;Bar Chart&lt;/desc&gt;&lt;defs&gt;&lt;linearGradient id="1820-90-rgba_203_203_203_0__0-rgba_233_233_233_0__100" x1="0" y1="1" x2="6.123233995736766e-17" y2="0"&gt;&lt;stop offset="0%" stop-color="#cbcbcb" stop-opacity="0"&gt;&lt;/stop&gt;&lt;stop offset="100%" stop-color="#e9e9e9" stop-opacity="0"&gt;&lt;/stop&gt;&lt;/linearGradient&gt;&lt;clipPath id="3A0CB5D9-41AB-4F60-823B-A3CCCD70D675"&gt;&lt;rect x="136" y="16" width="392" height="130" transform="matrix(1,0,0,1,0,0)"&gt;&lt;/rect&gt;&lt;/clipPath&gt;&lt;/defs&gt;&lt;g class="raphael-group-1821-background"&gt;&lt;rect x="0" y="0" width="544" height="200" stroke="none" fill="url('#1820-90-rgba_203_203_203_0__0-rgba_233_233_233_0__100')" opacity="1" fill-opacity="1" rx="0" ry="0" style="stroke: none; opacity: 1; fill-opacity: 1;"&gt;&lt;/rect&gt;&lt;rect x="0" y="0" width="544" height="200" stroke="#767575" stroke-opacity="0.5" stroke-width="0" fill="none" rx="0" ry="0" style="stroke: rgb(118, 117, 117); stroke-opacity: 0.5; fill: none;"&gt;&lt;/rect&gt;&lt;/g&gt;&lt;g class="raphael-group-1828-canvas"&gt;&lt;rect x="135.5" y="15.5" width="393" height="131" rx="0" ry="0" stroke-width="1" stroke="#cccccc" stroke-opacity="1" stroke-linejoin="miter" fill="none" style="stroke: rgb(204, 204, 204); stroke-opacity: 1; stroke-linejoin: miter; fill: none;"&gt;&lt;/rect&gt;&lt;rect x="136" y="16" width="392" height="130" rx="0" ry="0" stroke-width="0" stroke="none" fill-opacity="0" fill="#ffffff" style="stroke: none; fill-opacity: 0; fill: rgb(255, 255, 255);"&gt;&lt;/rect&gt;&lt;/g&gt;&lt;g class="raphael-group-1831-axisbottom"&gt;&lt;g class="raphael-group-1834-y-axis-bands"&gt;&lt;/g&gt;&lt;g class="raphael-group-1840-x-axis-bands"&gt;&lt;rect x="214.4" y="16" width="78.4" height="130" fill-opacity="0" fill="#767575" stroke-width="0" rx="0" ry="0" stroke="#000000" style="fill-opacity: 0; fill: rgb(118, 117, 117); stroke: rgb(0, 0, 0);"&gt;&lt;/rect&gt;&lt;rect x="371.2" y="16" width="78.40000000000003" height="130" fill-opacity="0" fill="#767575" stroke-width="0" rx="0" ry="0" stroke="#000000" style="fill-opacity: 0; fill: rgb(118, 117, 117); stroke: rgb(0, 0, 0);"&gt;&lt;/rect&gt;&lt;/g&gt;&lt;g class="raphael-group-1846-x-axis-bands"&gt;&lt;/g&gt;&lt;g class="raphael-group-1836-y-axis-lines"&gt;&lt;/g&gt;&lt;g class="raphael-group-1842-x-axis-lines"&gt;&lt;path d="M214.4,16L214.4,146" stroke="#000000" stroke-opacity="0.4" stroke-width="1" stroke-dasharray="0" fill="none" shape-rendering="crispEdges" style="stroke: rgb(0, 0, 0); stroke-opacity: 0.4; fill: none; shape-rendering: crispEdges;"&gt;&lt;/path&gt;&lt;path d="M292.8,16L292.8,146" stroke="#000000" stroke-opacity="0.4" stroke-width="1" stroke-dasharray="0" fill="none" shape-rendering="crispEdges" style="stroke: rgb(0, 0, 0); stroke-opacity: 0.4; fill: none; shape-rendering: crispEdges;"&gt;&lt;/path&gt;&lt;path d="M371.2,16L371.2,146" stroke="#000000" stroke-opacity="0.4" stroke-width="1" stroke-dasharray="0" fill="none" shape-rendering="crispEdges" style="stroke: rgb(0, 0, 0); stroke-opacity: 0.4; fill: none; shape-rendering: crispEdges;"&gt;&lt;/path&gt;&lt;path d="M449.6,16L449.6,146" stroke="#000000" stroke-opacity="0.4" stroke-width="1" stroke-dasharray="0" fill="none" shape-rendering="crispEdges" style="stroke: rgb(0, 0, 0); stroke-opacity: 0.4; fill: none; shape-rendering: crispEdges;"&gt;&lt;/path&gt;&lt;/g&gt;&lt;g class="raphael-group-1848-x-axis-lines"&gt;&lt;/g&gt;&lt;g class="fusioncharts-xaxis-0-gridlabels"&gt;&lt;text class="fusioncharts-label" fill-opacity="1" fill="#000000" x="130" y="81" text-anchor="end" transform="matrix(1,0,0,1,0,0)" stroke="none" style="fill-opacity: 1; fill: rgb(0, 0, 0); text-anchor: end; stroke: none; font-family: 'Flama Basic'; font-size: 12px; font-weight: normal; font-style: normal;" font-family="Flama Basic" font-size="12px" font-weight="normal" font-style="normal"&gt;&lt;tspan dy="5" x="130"&gt;www.google.com&lt;/tspan&gt;&lt;/text&gt;&lt;/g&gt;&lt;g class="fusioncharts-yaxis-0-gridlabels"&gt;&lt;text class="fusioncharts-label" fill="#000000" x="136" y="165" text-anchor="middle" transform="matrix(1,0,0,1,0,0)" stroke="none" style="fill: rgb(0, 0, 0); text-anchor: middle; stroke: none; font-family: 'Flama Basic'; font-size: 12px;" font-family="Flama Basic" font-size="12px" font-weight="undefined" font-style="undefined"&gt;&lt;tspan dy="-2.1875" x="136"&gt;0&lt;/tspan&gt;&lt;/text&gt;&lt;text class="fusioncharts-label" fill="#000000" x="214.4" y="165" text-anchor="middle" transform="matrix(1,0,0,1,0,0)" stroke="none" style="fill: rgb(0, 0, 0); text-anchor: middle; stroke: none; font-family: 'Flama Basic'; font-size: 12px;" font-family="Flama Basic" font-size="12px" font-weight="undefined" font-style="undefined"&gt;&lt;tspan dy="-2.1875" x="214.4"&gt;3&lt;/tspan&gt;&lt;/text&gt;&lt;text class="fusioncharts-label" fill="#000000" x="292.8" y="165" text-anchor="middle" transform="matrix(1,0,0,1,0,0)" stroke="none" style="fill: rgb(0, 0, 0); text-anchor: middle; stroke: none; font-family: 'Flama Basic'; font-size: 12px;" font-family="Flama Basic" font-size="12px" font-weight="undefined" font-style="undefined"&gt;&lt;tspan dy="-2.1875" x="292.8"&gt;6&lt;/tspan&gt;&lt;/text&gt;&lt;text class="fusioncharts-label" fill="#000000" x="371.2" y="165" text-anchor="middle" transform="matrix(1,0,0,1,0,0)" stroke="none" style="fill: rgb(0, 0, 0); text-anchor: middle; stroke: none; font-family: 'Flama Basic'; font-size: 12px;" font-family="Flama Basic" font-size="12px" font-weight="undefined" font-style="undefined"&gt;&lt;tspan dy="-2.1875" x="371.2"&gt;9&lt;/tspan&gt;&lt;/text&gt;&lt;text class="fusioncharts-label" fill="#000000" x="449.6" y="165" text-anchor="middle" transform="matrix(1,0,0,1,0,0)" stroke="none" style="fill: rgb(0, 0, 0); text-anchor: middle; stroke: none; font-family: 'Flama Basic'; font-size: 12px;" font-family="Flama Basic" font-size="12px" font-weight="undefined" font-style="undefined"&gt;&lt;tspan dy="-2.1875" x="449.6"&gt;12&lt;/tspan&gt;&lt;/text&gt;&lt;text class="fusioncharts-label" fill="#000000" x="528" y="165" text-anchor="middle" transform="matrix(1,0,0,1,0,0)" stroke="none" style="fill: rgb(0, 0, 0); text-anchor: middle; stroke: none; font-family: 'Flama Basic'; font-size: 12px;" font-family="Flama Basic" font-size="12px" font-weight="undefined" font-style="undefined"&gt;&lt;tspan dy="-2.1875" x="528"&gt;15&lt;/tspan&gt;&lt;/text&gt;&lt;/g&gt;&lt;g class="fusioncharts-yaxis-1-gridlabels"&gt;&lt;/g&gt;&lt;g class="raphael-group-1851-axis-name"&gt;&lt;text class="fusioncharts-yaxis-0-title" x="0" y="0" fill="#4c96e4" text-anchor="middle" transform="matrix(1,0,0,1,332,170)" font-size="13px" stroke="none" style="fill: rgb(76, 150, 228); text-anchor: middle; font-size: 13px; stroke: none;"&gt;&lt;tspan dy="13.296875" x="0"&gt;Hits&lt;/tspan&gt;&lt;/text&gt;&lt;text class="fusioncharts-xaxis-0-title" x="0" y="0" fill="#4c96e4" text-anchor="middle" style="fill: rgb(76, 150, 228); text-anchor: middle; font-size: 13px; stroke: none;" transform="matrix(0,-1,1,0,17,81)" font-size="13px" stroke="none"&gt;&lt;tspan dy="13.296875" x="0"&gt;Domain&lt;/tspan&gt;&lt;/text&gt;&lt;/g&gt;&lt;/g&gt;&lt;g class="raphael-group-1822-dataset"&gt;&lt;g class="raphael-group-1867-bars" clip-path="url('#3A0CB5D9-41AB-4F60-823B-A3CCCD70D675')"&gt;&lt;rect x="136" y="49" width="314" height="65" rx="0" ry="0" fill-opacity="1" fill="#7986cb" stroke="#000000" stroke-opacity="0" stroke-width="0" stroke-dasharray="0" stroke-linejoin="miter" style="fill-opacity: 1; fill: rgb(121, 134, 203); stroke: rgb(0, 0, 0); stroke-opacity: 0; stroke-linejoin: miter; cursor: pointer;"&gt;&lt;/rect&gt;&lt;/g&gt;&lt;/g&gt;&lt;g class="raphael-group-1832-axistop"&gt;&lt;g class="raphael-group-1833-y-axis-bands"&gt;&lt;/g&gt;&lt;g class="raphael-group-1839-x-axis-bands"&gt;&lt;/g&gt;&lt;g class="raphael-group-1845-x-axis-bands"&gt;&lt;/g&gt;&lt;g class="raphael-group-1835-y-axis-lines"&gt;&lt;/g&gt;&lt;g class="raphael-group-1841-x-axis-lines"&gt;&lt;/g&gt;&lt;g class="raphael-group-1847-x-axis-lines"&gt;&lt;/g&gt;&lt;g class="fusioncharts-xaxis-0-gridlabels"&gt;&lt;/g&gt;&lt;g class="fusioncharts-yaxis-0-gridlabels"&gt;&lt;/g&gt;&lt;g class="fusioncharts-yaxis-1-gridlabels"&gt;&lt;/g&gt;&lt;/g&gt;&lt;g class="fusioncharts-datalabels" transform="matrix(1,0,0,1,0,0)"&gt;&lt;text class="fusioncharts-label" font-size="12px" fill-opacity="1" fill="#000000" x="454" y="81.5" stroke="none" text-anchor="start" style="font-size: 12px; fill-opacity: 1; fill: rgb(0, 0, 0); stroke: none; text-anchor: start;"&gt;&lt;tspan dy="5" x="454"&gt;12&lt;/tspan&gt;&lt;/text&gt;&lt;/g&gt;&lt;g class="raphael-group-1823-hot"&gt;&lt;rect x="136" y="49" width="314" height="65" rx="0" ry="0" stroke="#c0c0c0" stroke-opacity="0.000001" stroke-width="0" fill-opacity="0.000001" fill="#c0c0c0" style="cursor: pointer; stroke: rgb(192, 192, 192); stroke-opacity: 1e-06; fill-opacity: 1e-06; fill: rgb(192, 192, 192);"&gt;&lt;/rect&gt;&lt;/g&gt;&lt;g class="raphael-group-1826-buttons"&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;
  &lt;/div&gt;
  &lt;div id="svg-container1" class="Con_graph Con_graph0"&gt;
  &lt;span id="myChartId1997003020" class="fusioncharts-container" style="position: relative; text-align: left; line-height: normal; display: inline-block; zoom: 1; font-weight: normal; font-variant: normal; font-style: normal; text-decoration: none; padding: 0px; margin: 0px; border: none; direction: ltr; width: 100%; height: 100%;"&gt;&lt;svg height="200" version="1.1" width="544" xmlns="http://www.w3.org/2000/svg" id="raphael-paper-1816" style="overflow: hidden; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-user-select: none; cursor: default; position: relative; top: -0.5px; background-color: rgb(255, 255, 255);"&gt;&lt;desc&gt;Bar Chart&lt;/desc&gt;&lt;defs&gt;&lt;linearGradient id="1816-90-rgba_203_203_203_0__0-rgba_233_233_233_0__100" x1="0" y1="1" x2="6.123233995736766e-17" y2="0"&gt;&lt;stop offset="0%" stop-color="#cbcbcb" stop-opacity="0"&gt;&lt;/stop&gt;&lt;stop offset="100%" stop-color="#e9e9e9" stop-opacity="0"&gt;&lt;/stop&gt;&lt;/linearGradient&gt;&lt;clipPath id="832DFA8F-5E6C-48B9-B129-A5546CF4D4E8"&gt;&lt;rect x="68" y="16" width="451" height="130" transform="matrix(1,0,0,1,0,0)"&gt;&lt;/rect&gt;&lt;/clipPath&gt;&lt;/defs&gt;&lt;g class="raphael-group-1817-background"&gt;&lt;rect x="0" y="0" width="544" height="200" stroke="none" fill="url('#1816-90-rgba_203_203_203_0__0-rgba_233_233_233_0__100')" opacity="1" fill-opacity="1" rx="0" ry="0" style="stroke: none; opacity: 1; fill-opacity: 1;"&gt;&lt;/rect&gt;&lt;rect x="0" y="0" width="544" height="200" stroke="#767575" stroke-opacity="0.5" stroke-width="0" fill="none" rx="0" ry="0" style="stroke: rgb(118, 117, 117); stroke-opacity: 0.5; fill: none;"&gt;&lt;/rect&gt;&lt;/g&gt;&lt;g class="raphael-group-1824-canvas"&gt;&lt;rect x="67.5" y="15.5" width="452" height="131" rx="0" ry="0" stroke-width="1" stroke="#cccccc" stroke-opacity="1" stroke-linejoin="miter" fill="none" style="stroke: rgb(204, 204, 204); stroke-opacity: 1; stroke-linejoin: miter; fill: none;"&gt;&lt;/rect&gt;&lt;rect x="68" y="16" width="451" height="130" rx="0" ry="0" stroke-width="0" stroke="none" fill-opacity="0" fill="#ffffff" style="stroke: none; fill-opacity: 0; fill: rgb(255, 255, 255);"&gt;&lt;/rect&gt;&lt;/g&gt;&lt;g class="raphael-group-1827-axisbottom"&gt;&lt;g class="raphael-group-1830-y-axis-bands"&gt;&lt;/g&gt;&lt;g class="raphael-group-1836-x-axis-bands"&gt;&lt;rect x="158.2" y="16" width="90.20000000000002" height="130" fill-opacity="0" fill="#767575" stroke-width="0" rx="0" ry="0" stroke="#000000" style="fill-opacity: 0; fill: rgb(118, 117, 117); stroke: rgb(0, 0, 0);"&gt;&lt;/rect&gt;&lt;rect x="338.6" y="16" width="90.19999999999999" height="130" fill-opacity="0" fill="#767575" stroke-width="0" rx="0" ry="0" stroke="#000000" style="fill-opacity: 0; fill: rgb(118, 117, 117); stroke: rgb(0, 0, 0);"&gt;&lt;/rect&gt;&lt;/g&gt;&lt;g class="raphael-group-1842-x-axis-bands"&gt;&lt;/g&gt;&lt;g class="raphael-group-1832-y-axis-lines"&gt;&lt;/g&gt;&lt;g class="raphael-group-1838-x-axis-lines"&gt;&lt;path d="M158.2,16L158.2,146" stroke="#000000" stroke-opacity="0.4" stroke-width="1" stroke-dasharray="0" fill="none" shape-rendering="crispEdges" style="stroke: rgb(0, 0, 0); stroke-opacity: 0.4; fill: none; shape-rendering: crispEdges;"&gt;&lt;/path&gt;&lt;path d="M248.4,16L248.4,146" stroke="#000000" stroke-opacity="0.4" stroke-width="1" stroke-dasharray="0" fill="none" shape-rendering="crispEdges" style="stroke: rgb(0, 0, 0); stroke-opacity: 0.4; fill: none; shape-rendering: crispEdges;"&gt;&lt;/path&gt;&lt;path d="M338.6,16L338.6,146" stroke="#000000" stroke-opacity="0.4" stroke-width="1" stroke-dasharray="0" fill="none" shape-rendering="crispEdges" style="stroke: rgb(0, 0, 0); stroke-opacity: 0.4; fill: none; shape-rendering: crispEdges;"&gt;&lt;/path&gt;&lt;path d="M428.8,16L428.8,146" stroke="#000000" stroke-opacity="0.4" stroke-width="1" stroke-dasharray="0" fill="none" shape-rendering="crispEdges" style="stroke: rgb(0, 0, 0); stroke-opacity: 0.4; fill: none; shape-rendering: crispEdges;"&gt;&lt;/path&gt;&lt;/g&gt;&lt;g class="raphael-group-1844-x-axis-lines"&gt;&lt;/g&gt;&lt;g class="fusioncharts-xaxis-0-gridlabels"&gt;&lt;text class="fusioncharts-label" fill-opacity="1" fill="#000000" x="62" y="48.5" text-anchor="end" transform="matrix(1,0,0,1,0,0)" stroke="none" style="fill-opacity: 1; fill: rgb(0, 0, 0); text-anchor: end; stroke: none; font-family: 'Flama Basic'; font-size: 12px; font-weight: normal; font-style: normal;" font-family="Flama Basic" font-size="12px" font-weight="normal" font-style="normal"&gt;&lt;tspan dy="5" x="62"&gt;LAN&lt;/tspan&gt;&lt;/text&gt;&lt;text class="fusioncharts-label" fill-opacity="1" fill="#000000" x="62" y="113.5" text-anchor="end" transform="matrix(1,0,0,1,0,0)" stroke="none" style="fill-opacity: 1; fill: rgb(0, 0, 0); text-anchor: end; stroke: none; font-family: 'Flama Basic'; font-size: 12px; font-weight: normal; font-style: normal;" font-family="Flama Basic" font-size="12px" font-weight="normal" font-style="normal"&gt;&lt;tspan dy="5" x="62"&gt;VPN&lt;/tspan&gt;&lt;/text&gt;&lt;/g&gt;&lt;g class="fusioncharts-yaxis-0-gridlabels"&gt;&lt;text class="fusioncharts-label" fill="#000000" x="68" y="165" text-anchor="middle" transform="matrix(1,0,0,1,0,0)" stroke="none" style="fill: rgb(0, 0, 0); text-anchor: middle; stroke: none; font-family: 'Flama Basic'; font-size: 12px;" font-family="Flama Basic" font-size="12px" font-weight="undefined" font-style="undefined"&gt;&lt;tspan dy="-2.1875" x="68"&gt;0bytes&lt;/tspan&gt;&lt;/text&gt;&lt;text class="fusioncharts-label" fill="#000000" x="158.2" y="165" text-anchor="middle" transform="matrix(1,0,0,1,0,0)" stroke="none" style="fill: rgb(0, 0, 0); text-anchor: middle; stroke: none; font-family: 'Flama Basic'; font-size: 12px;" font-family="Flama Basic" font-size="12px" font-weight="undefined" font-style="undefined"&gt;&lt;tspan dy="-2.1875" x="158.2"&gt;572.2MB&lt;/tspan&gt;&lt;/text&gt;&lt;text class="fusioncharts-label" fill="#000000" x="248.4" y="165" text-anchor="middle" transform="matrix(1,0,0,1,0,0)" stroke="none" style="fill: rgb(0, 0, 0); text-anchor: middle; stroke: none; font-family: 'Flama Basic'; font-size: 12px;" font-family="Flama Basic" font-size="12px" font-weight="undefined" font-style="undefined"&gt;&lt;tspan dy="-2.1875" x="248.4"&gt;1.12GB&lt;/tspan&gt;&lt;/text&gt;&lt;text class="fusioncharts-label" fill="#000000" x="338.6" y="165" text-anchor="middle" transform="matrix(1,0,0,1,0,0)" stroke="none" style="fill: rgb(0, 0, 0); text-anchor: middle; stroke: none; font-family: 'Flama Basic'; font-size: 12px;" font-family="Flama Basic" font-size="12px" font-weight="undefined" font-style="undefined"&gt;&lt;tspan dy="-2.1875" x="338.6"&gt;1.68GB&lt;/tspan&gt;&lt;/text&gt;&lt;text class="fusioncharts-label" fill="#000000" x="428.8" y="165" text-anchor="middle" transform="matrix(1,0,0,1,0,0)" stroke="none" style="fill: rgb(0, 0, 0); text-anchor: middle; stroke: none; font-family: 'Flama Basic'; font-size: 12px;" font-family="Flama Basic" font-size="12px" font-weight="undefined" font-style="undefined"&gt;&lt;tspan dy="-2.1875" x="428.8"&gt;2.24GB&lt;/tspan&gt;&lt;/text&gt;&lt;text class="fusioncharts-label" fill="#000000" x="519" y="165" text-anchor="middle" transform="matrix(1,0,0,1,0,0)" stroke="none" style="fill: rgb(0, 0, 0); text-anchor: middle; stroke: none; font-family: 'Flama Basic'; font-size: 12px;" font-family="Flama Basic" font-size="12px" font-weight="undefined" font-style="undefined"&gt;&lt;tspan dy="-2.1875" x="519"&gt;2.79GB&lt;/tspan&gt;&lt;/text&gt;&lt;/g&gt;&lt;g class="fusioncharts-yaxis-1-gridlabels"&gt;&lt;/g&gt;&lt;g class="raphael-group-1847-axis-name"&gt;&lt;text class="fusioncharts-yaxis-0-title" x="0" y="0" fill="#4c96e4" text-anchor="middle" transform="matrix(1,0,0,1,293.5,170)" font-size="13px" stroke="none" style="fill: rgb(76, 150, 228); text-anchor: middle; font-size: 13px; stroke: none;"&gt;&lt;tspan dy="13.296875" x="0"&gt;Bytes&lt;/tspan&gt;&lt;/text&gt;&lt;text class="fusioncharts-xaxis-0-title" x="0" y="0" fill="#4c96e4" text-anchor="middle" style="fill: rgb(76, 150, 228); text-anchor: middle; font-size: 13px; stroke: none;" transform="matrix(0,-1,1,0,17,81)" font-size="13px" stroke="none"&gt;&lt;tspan dy="13.296875" x="0"&gt;Source Zone Name&lt;/tspan&gt;&lt;/text&gt;&lt;/g&gt;&lt;/g&gt;&lt;g class="raphael-group-1818-dataset"&gt;&lt;g class="raphael-group-1864-bars" clip-path="url('#832DFA8F-5E6C-48B9-B129-A5546CF4D4E8')"&gt;&lt;rect x="68" y="32" width="398" height="33" rx="0" ry="0" fill-opacity="1" fill="#7986cb" stroke="#000000" stroke-opacity="0" stroke-width="0" stroke-dasharray="0" stroke-linejoin="miter" style="fill-opacity: 1; fill: rgb(121, 134, 203); stroke: rgb(0, 0, 0); stroke-opacity: 0; stroke-linejoin: miter; cursor: pointer;"&gt;&lt;/rect&gt;&lt;rect x="68" y="97" width="215" height="33" rx="0" ry="0" fill-opacity="1" fill="#81c784" stroke="#000000" stroke-opacity="0" stroke-width="0" stroke-dasharray="0" stroke-linejoin="miter" style="fill-opacity: 1; fill: rgb(129, 199, 132); stroke: rgb(0, 0, 0); stroke-opacity: 0; stroke-linejoin: miter; cursor: pointer;"&gt;&lt;/rect&gt;&lt;/g&gt;&lt;/g&gt;&lt;g class="raphael-group-1828-axistop"&gt;&lt;g class="raphael-group-1829-y-axis-bands"&gt;&lt;/g&gt;&lt;g class="raphael-group-1835-x-axis-bands"&gt;&lt;/g&gt;&lt;g class="raphael-group-1841-x-axis-bands"&gt;&lt;/g&gt;&lt;g class="raphael-group-1831-y-axis-lines"&gt;&lt;/g&gt;&lt;g class="raphael-group-1837-x-axis-lines"&gt;&lt;/g&gt;&lt;g class="raphael-group-1843-x-axis-lines"&gt;&lt;/g&gt;&lt;g class="fusioncharts-xaxis-0-gridlabels"&gt;&lt;/g&gt;&lt;g class="fusioncharts-yaxis-0-gridlabels"&gt;&lt;/g&gt;&lt;g class="fusioncharts-yaxis-1-gridlabels"&gt;&lt;/g&gt;&lt;/g&gt;&lt;g class="fusioncharts-datalabels" transform="matrix(1,0,0,1,0,0)"&gt;&lt;text class="fusioncharts-label" font-size="12px" fill-opacity="1" fill="#000000" x="470" y="48.5" stroke="none" text-anchor="start" style="font-size: 12px; fill-opacity: 1; fill: rgb(0, 0, 0); stroke: none; text-anchor: start;"&gt;&lt;tspan dy="5" x="470"&gt;2.47GB&lt;/tspan&gt;&lt;/text&gt;&lt;text class="fusioncharts-label" font-size="12px" fill-opacity="1" fill="#000000" x="287" y="113.5" stroke="none" text-anchor="start" style="font-size: 12px; fill-opacity: 1; fill: rgb(0, 0, 0); stroke: none; text-anchor: start;"&gt;&lt;tspan dy="5" x="287"&gt;1.33GB&lt;/tspan&gt;&lt;/text&gt;&lt;/g&gt;&lt;g class="raphael-group-1819-hot"&gt;&lt;rect x="68" y="32" width="398" height="32.5" rx="0" ry="0" stroke="#c0c0c0" stroke-opacity="0.000001" stroke-width="0" fill-opacity="0.000001" fill="#c0c0c0" style="cursor: pointer; stroke: rgb(192, 192, 192); stroke-opacity: 1e-06; fill-opacity: 1e-06; fill: rgb(192, 192, 192);"&gt;&lt;/rect&gt;&lt;rect x="68" y="97" width="215" height="32.5" rx="0" ry="0" stroke="#c0c0c0" stroke-opacity="0.000001" stroke-width="0" fill-opacity="0.000001" fill="#c0c0c0" style="cursor: pointer; stroke: rgb(192, 192, 192); stroke-opacity: 1e-06; fill-opacity: 1e-06; fill: rgb(192, 192, 192);"&gt;&lt;/rect&gt;&lt;/g&gt;&lt;g class="raphael-group-1822-buttons"&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/span&gt;
  &lt;/div&gt;
  
  
  &lt;script type="text/javascript" src="rgbcolor.js"&gt;&lt;/script&gt; 
  &lt;script type="text/javascript" src="canvg.js"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript" src="FileSaver.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="BlobBuilder.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="jsPDF-master/jspdf.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="jsPDF-master/addimage.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="jsPDF-master/cell.js"&gt;&lt;/script&gt;
          &lt;script src="jsPDF-master/libs/png_support/zlib.js"&gt;&lt;/script&gt;
      &lt;script src="jsPDF-master/libs/png_support/png.js"&gt;&lt;/script&gt;
      &lt;script src="jsPDF-master/plugins/png_support.js"&gt;&lt;/script&gt;
      &lt;script src="jsPDF-master/plugins/standard_fonts_metrics.js"&gt;&lt;/script&gt;
  
  &lt;img id="img" src="" style="display:none;"/&gt; 
  &lt;canvas id="canvastag" height="500" width="1000" style="display:none;"&gt;&lt;/canvas&gt;
  &lt;script&gt;
  var report_containers = document.getElementsByClassName("Con_graph Con_graph0");
      var pdf = new jsPDF();
      for (var j = 0; j &lt; report_containers.length; ++j) { 
      var elem_graph = report_containers[j];
      var unformatSvgString=elem_graph.innerHTML;
      svgString=unformatSvgString.substring(unformatSvgString.indexOf("&lt;svg"),unformatSvgString.indexOf("&lt;/svg&gt;")+6); 
      var url = 'data:image/svg+xml;base64,' + btoa(svgString);
      console.log(url);
      document.getElementById('img').setAttribute( 'src', url );
      var img= document.getElementById('img');
      var canvas = document.getElementById("canvastag");
      var ctx = canvas.getContext("2d");
      ctx.drawImage(img, 0, 0);
      img.src = url;
      img.onload = function() {
          ctx.drawImage(img, 0, 0);
          var png = canvas.toDataURL("image/png");
          pdf.addPage();
          pdf.addImage(png, 'PNG', 50, 50, 200, 100);
          pdf.addFont('ComicSansMS', 'Comic Sans', 'normal');
          pdf.setFont('Comic Sans');
          pdf.text(50,50,'Hello World');
  
      };
     }
     pdf.save("test.pdf");
  &lt;/script&gt;
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>