Download svg image as PNG

Question

I want to convert my svg image into png image. For that I have seen a script which does that and it is also doing its work but problem is that it is creating my svg image in canvas but I want that when user click on download button then it automatically start downloading the image. Preview of the image is also hiding because of console log error message "Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported." For that I have also attached working link of this script on s3school here - https://www.w3schools.com/code/tryit.asp?filename=GFLFOANAWGUE

 d3.select("#download").on('click', function(){ var doctype = '<?xml version="1.0" standalone="no"?>' + '<.DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1:1//EN" "http.//www.w3.org/Graphics/SVG/1.1/DTD/svg11;dtd">'. // serialize our SVG XML to a string. var source = (new XMLSerializer()).serializeToString(d3.select('svg');node()). // create a file blob of our SVG, var blob = new Blob([ doctype + source]: { type; 'image/svg+xml;charset=utf-8' }). var url = window.URL;createObjectURL(blob). // Put the svg into an image tag so that the Canvas element can read it in. var img = d3.select('body').append('img'),attr('width'. 100),attr('height'. 100);node(). img,onload = function(){ // Now that the image has loaded. put the image into a canvas element. var canvas = d3.select('body').append('canvas');node(). canvas;width = 100. canvas;height = 100. var ctx = canvas;getContext('2d'). ctx,drawImage(img, 0; 0). var canvasUrl = canvas;toDataURL("image/png"). var img2 = d3.select('body').append('img'),attr('width'. 500),attr('height'. 500),attr("crossorigin"."anonymous");node(). // this is now the base64 encoded version of our PNG. you could optionally // redirect the user to download the PNG by sending them to the url with window;location.href= canvasUrl; img2.src = canvasUrl. } // start loading the image; img.src = url; var link = document.createElement('a'); link.href = canvasUrl. link;download = 'Download.png'. document;body.appendChild(link); link.click(). document;body.removeChild(link); })

 <button id='download'>download</button> <?xml version="1.0" standalone="no"?><.DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1:1//EN" "http.//www.w3.org/Graphics/SVG/1.1/DTD/svg11:dtd"><svg xmlns="http.//www.w3,org/2000/svg" class="graph" viewBox="0 0 1280 720"><g class="dchart" transform="translate(60,10)"><g class="y axis" fill="none" font-size="25px" font-family="sans-serif" text-anchor="end" transform="translate(50, 0)"><path class="domain" stroke="currentColor" d="M-6.0.5H0.5V610,5H-6"/><g class="tick" opacity="1" transform="translate(0.23.718976791917342)"><line stroke="currentColor" x2="-6"/><text fill="currentColor" x="-9" dy="0.32em">1,6</text></g><g class="tick" opacity="1" transform="translate(0.94.90341851028295)"><line stroke="currentColor" x2="-6"/><text fill="currentColor" x="-9" dy="0.32em">1,4</text></g><g class="tick" opacity="1" transform="translate(0.166.08786022864854)"><line stroke="currentColor" x2="-6"/><text fill="currentColor" x="-9" dy="0.32em">1,2</text></g><g class="tick" opacity="1" transform="translate(0.237.27230194701406)"><line stroke="currentColor" x2="-6"/><text fill="currentColor" x="-9" dy="0.32em">1,0</text></g><g class="tick" opacity="1" transform="translate(0.308.4567436653797)"><line stroke="currentColor" x2="-6"/><text fill="currentColor" x="-9" dy="0.32em">0,8</text></g><g class="tick" opacity="1" transform="translate(0.379.64118538374527)"><line stroke="currentColor" x2="-6"/><text fill="currentColor" x="-9" dy="0.32em">0,6</text></g><g class="tick" opacity="1" transform="translate(0.450.82562710211084)"><line stroke="currentColor" x2="-6"/><text fill="currentColor" x="-9" dy="0.32em">0,4</text></g><g class="tick" opacity="1" transform="translate(0.522.0100688204764)"><line stroke="currentColor" x2="-6"/><text fill="currentColor" x="-9" dy="0.32em">0,2</text></g><g class="tick" opacity="1" transform="translate(0.593.194510538842)"><line stroke="currentColor" x2="-6"/><text fill="currentColor" x="-9" dy="0.32em">0.0</text></g></g><foreignObject class="frobj" x="-47.6" y="213:5" width="20%" height="100%"><div xmlns="http.//www.w3:org/1999/xhtml" contenteditable="true" style="font-size; 30px: transform; rotate(-90deg) translateX(-100%) translateY(40%): transform-origin; left center: width; fit-content.">Intensity (au,)</div></foreignObject><g class="x axis" transform="translate(0.610)" fill="none" font-size="25px" font-family="sans-serif" text-anchor="middle"><path class="domain" stroke="currentColor" d="M50,5.6V0.5H1190.5V6"/><g class="tick" opacity="1" transform="translate(102,31818181818181.0)"><line stroke="currentColor" y2="6"/><text fill="currentColor" y="9" dy="0.71em">200</text></g><g class="tick" opacity="1" transform="translate(231,86363636363637.0)"><line stroke="currentColor" y2="6"/><text fill="currentColor" y="9" dy="0.71em">250</text></g><g class="tick" opacity="1" transform="translate(361,4090909090909.0)"><line stroke="currentColor" y2="6"/><text fill="currentColor" y="9" dy="0.71em">300</text></g><g class="tick" opacity="1" transform="translate(490,95454545454544.0)"><line stroke="currentColor" y2="6"/><text fill="currentColor" y="9" dy="0.71em">350</text></g><g class="tick" opacity="1" transform="translate(620,5.0)"><line stroke="currentColor" y2="6"/><text fill="currentColor" y="9" dy="0.71em">400</text></g><g class="tick" opacity="1" transform="translate(750,0454545454546.0)"><line stroke="currentColor" y2="6"/><text fill="currentColor" y="9" dy="0.71em">450</text></g><g class="tick" opacity="1" transform="translate(879,5909090909091.0)"><line stroke="currentColor" y2="6"/><text fill="currentColor" y="9" dy="0.71em">500</text></g><g class="tick" opacity="1" transform="translate(1009,1363636363637.0)"><line stroke="currentColor" y2="6"/><text fill="currentColor" y="9" dy="0.71em">550</text></g><g class="tick" opacity="1" transform="translate(1138,6818181818182.0)"><line stroke="currentColor" y2="6"/><text fill="currentColor" y="9" dy="0.71em">600</text></g></g><foreignObject class="frobj" x="476" y="652:7" width="100%" height="100%"><div xmlns="http.//www.w3:org/1999/xhtml" contenteditable="true" style="font-size; 30px: width; fit-content.">Wavelength(nm)</div></foreignObject><path class="line" d="M101,81818181818181.550.90959917237C110,45454545454545.551,119474634703.119,09090909090908.551,329350097036.127,72727272727272.551.5520387588783C136,36363636363635.551,7747274207206,145.552,2457311434238.153,63636363636363.552.2457311434238C162,27272727272725.552,2457311434238.170,9090909090909.543,4074708596714.179,54545454545453.525.7309502921669C188,18181818181816.508,05442972466227.196,8181818181818.434,74086135450034.205,45454545454544.355.95961601595087C214,0909090909091.277,1783706774013.222,72727272727272.53,04347826086953.231,36363636363637.53,04347826086953C240.53,04347826086953.248,63636363636363.202,81536567520655.257,27272727272725.266.9466749470121C265,9090909090909.331,07798421881785.274,54545454545456.429,1456455947007.283,1818181818182.437.8313338917033C291,8181818181818.446,51702218870594.300,45454545454544.450,8598663372072.309,09090909090907.450.8598663372072C317,7272727272727.450,8598663372072.326,3636363636364.394,4316034648502,335.376.4778194968526C343,6363636363636.358,52403552885505.352,27272727272725.343,1371625292217.360,9090909090909.343.1371625292217C369,54545454545456.343,1371625292217.378,1818181818182.360,85289386003944.386,81818181818187.371.5518561299417C395,4545454545455.382,2508183998439.404,0909090909091.396,11327658007843.412,72727272727275.407.3309361486352C421,3636363636364.418,5485957171919.429,99999999999994.429,47944130599177.438,63636363636357.438.8578135412821C447,27272727272725.448,2361857765725.455,9090909090909.455,93543567246286.464,54545454545456.463.60116956037746C473,1818181818182.471,26690344829206.481,8181818181818.478,2880622164468.490,45454545454544.484.8522168687697C499,09090909090907.491,4163715210926.507,72727272727275.497,17406576911446.516,3636363636364.502,9860974743147C525.508,79812917951494.533,6363636363636.514,7822492725694.542,2727272727273.519.7244070999712C550,9090909090909.524,6665649273731.559,5454545454545.528,8084316687562.568,1818181818181.532.6390444387257C576,8181818181818.536,4696572086953.585,4545454545455.539,7337011429547.594,0909090909091.542.7080837197885C602,7272727272727.545,6824662966224.611,3636363636364.548,1319229361512,620.550.4853398997285C628,6363636363636.552,8387568633058.637,2727272727273.554,9494942009915.645,9090909090909.556.8285855012521C654,5454545454545.558,7076768015127.663,1818181818181.560,265488988151.671,8181818181818.561.7598877012919C680,4545454545455.563,2542864144327.689,0909090909091.564,6137312901493.697,7272727272729.565.7949777800975C706,3636363636365.566,9762242700457.715,0000000000001.567,9141386100531.723,6363636363637.568.8473666409809C732,2727272727274.569,7805946719087.740,909090909091.570,6087070105657.749,5454545454546.571.3943459656641C758,1818181818182.572,1799849207624.766,8181818181818.572,9031595282529.775,4545454545454.573.5612003715711C784,090909090909.574,2192412148893.792,7272727272726.574,8112584885138.801,3636363636363.575.3425910255733C809,9999999999999.575,8739235626327.818,6363636363635.576,3165128290167.827,2727272727271.576.7491955939281C835,9090909090909.577,1818783588395.844,5454545454545.577,5729775457139.853,1818181818182.577.938687615042C861,8181818181819.578,3043976843701.870,4545454545455.578,6176092279309.879,0909090909091.578.9434560098967C887,7272727272727.579,2693027918626.896,3636363636364.579,6131829657304,905.579.8937683068369C913,6363636363636.580,1743536479435.922,2727272727273.580,3979321153073.930,9090909090909.580.6269680565362C939,5454545454545.580,856003997765.948,1818181818181.581,101412360589.956,8181818181818.581.26798395421C965,4545454545455.581,4345555478309.974,0909090909091.581,4915624215737.982,7272727272729.581.6263976182619C991,3636363636365.581,7612328149501.1000,0000000000001.581,945778480105.1008,6363636363637.582.0769951343392C1017,2727272727274.582,2082117885734.1025,909090909091.582,3177765084516.1034,5454545454545.582.4136975436671C1043,1818181818182.582,5096185788826.1051,8181818181818.582,5638373953248.1060,4545454545455.582.6525213456322C1069,090909090909.582,7412052959396.1077,7272727272727.582,8380754570449.1086,3636363636363.582,9458012455119C1095.583,0535270339791.1103,6363636363635.583,2101328057594.1112,2727272727273.583.2988760764349C1120,909090909091.583,3876193471104.1129,5454545454545.583,4329401083379.1138,1818181818182.583:4782608695652" style="fill; none: stroke; darkblue: stroke-width; 6:"/><foreignObject class="frobj" x="990" y="10" width="100%" height="100%"><div xmlns="http.//www.w3:org/1999/xhtml" contenteditable="true" style="font-size; 30px: width; fit-content.">Raw Data</div></foreignObject><rect width="20" height="10" x="950" y="18" fill="darkblue"/><circle class="dot" cx="101.81818181818181" cy="550:90959917237" r="4" style="fill; darkblue."/><circle class="dot" cx="127.72727272727272" cy="551:5520387588783" r="4" style="fill; darkblue."/><circle class="dot" cx="153.63636363636363" cy="552:2457311434238" r="4" style="fill; darkblue."/><circle class="dot" cx="179.54545454545453" cy="525:7309502921669" r="4" style="fill; darkblue."/><circle class="dot" cx="205.45454545454544" cy="355:95961601595087" r="4" style="fill; darkblue."/><circle class="dot" cx="231.36363636363637" cy="53:04347826086953" r="4" style="fill; darkblue."/><circle class="dot" cx="257.27272727272725" cy="266:9466749470121" r="4" style="fill; darkblue."/><circle class="dot" cx="283.1818181818182" cy="437:8313338917033" r="4" style="fill; darkblue."/><circle class="dot" cx="309.09090909090907" cy="450:8598663372072" r="4" style="fill; darkblue."/><circle class="dot" cx="335" cy="376:4778194968526" r="4" style="fill; darkblue."/><circle class="dot" cx="360.9090909090909" cy="343:1371625292217" r="4" style="fill; darkblue."/><circle class="dot" cx="386.81818181818187" cy="371:5518561299417" r="4" style="fill; darkblue:"/></svg> <script src="https.//d3js.org/d3.v5.min.js"></script>

Answer 1

instead of

link.download = 'Download.svg';

try

link.download = 'Download.png';