SVG to PNG Converter

Convert SVG vector graphics to PNG raster images. Choose your output size and scale.

Drop SVG file here or click to browse

Or paste SVG code:

<label style="font-size:0.85rem;color:var(--text-muted);">Scale:</label><br />
    <select id="svg-scale" style="width:auto;padding:0.5rem;"><option value="1">1x</option><option value="2" selected>2x</option><option value="3">3x</option><option value="4">4x</option></select><br />
    <label style="font-size:0.85rem;color:var(--text-muted);">Background:</label><br />
    <select id="svg-bg" style="width:auto;padding:0.5rem;"><option value="transparent">Transparent</option><option value="#ffffff">White</option><option value="#000000">Black</option></select>
  </div>
<div class="btn-group">
    <button onclick="convertSVG()">Convert to PNG</button>
  </div>
<div id="svg-result" style="text-align:center;margin-top:1rem;display:none;">
    <img id="svg-preview" style="max-width:100%;border-radius:8px;border:1px solid var(--border);margin-bottom:0.5rem;"><br />
    <br /><a id="svg-dl" style="color:var(--primary);font-weight:500;">Download PNG</a><br />
    <span id="svg-info" style="display:block;font-size:0.82rem;color:var(--text-muted);margin-top:0.25rem;"></span>
  </div>
</div>
<div class="tool-card">
<h2>About</h2>
<p style="color:var(--text-muted);font-size:0.9rem;line-height:1.7;">SVG (Scalable Vector Graphics) files are perfect for logos and icons, but sometimes you need a PNG raster image for compatibility. This converter renders your SVG at the chosen scale using Canvas API, producing crisp PNG images. Processing is entirely local — your files stay private.</p>
</div>
<div class="tool-card">
<h2>FAQ</h2>
<div style="margin-top:1rem;">
<h3 style="font-size:0.95rem;margin-bottom:0.3rem;">What scale should I use?</h3>
<p style="color:var(--text-muted);font-size:0.88rem;">2x is good for most uses. Use 4x for high-resolution prints or retina displays.</p>
</div>
</div>
<div class="related-tools">
<h2>Related Tools</h2>
<div class="tools-grid"><a class="tool-link" href="/heic-to-jpg/">HEIC to JPG Converter<span>Convert iPhone HEIC photos to JPG</span></a><a class="tool-link" href="/webp-to-png/">WebP to PNG Converter<span>Convert WebP images to PNG format</span></a><a class="tool-link" href="/color-palette-generator/">Color Palette Generator<span>Generate beautiful color schemes</span></a><a class="tool-link" href="/json-to-csv/">JSON to CSV Converter<span>Convert JSON arrays to CSV format</span></a></div>
</div>
<footer>
<p>© 2025 <a href="/">Toolist</a></p>
</footer>
<p></main></div>
<p><script type="application/ld+json">{"@context":"https://schema.org","@type":"WebApplication","name":"SVG to PNG Converter","description":"Convert SVG vector graphics to PNG images online for free","url":"https://toolist.cc/svg-to-png/","applicationCategory":"UtilityApplication","operatingSystem":"Any","offers":{"@type":"Offer","price":"0","priceCurrency":"USD"},"isAccessibleForFree":true}</script><br />
<script>
function loadSVG(file){var r=new FileReader();r.onload=function(e){document.getElementById('svg-code').value=e.target.result;};r.readAsText(file);}
function convertSVG(){
  var svg=document.getElementById('svg-code').value.trim();if(!svg){alert('Please provide an SVG file or code.');return;}
  var scale=parseInt(document.getElementById('svg-scale').value);var bg=document.getElementById('svg-bg').value;
  var img=new Image();
  img.onload=function(){
    var w=img.width*scale||800;var h=img.height*scale||600;
    var canvas=document.createElement('canvas');canvas.width=w;canvas.height=h;var ctx=canvas.getContext('2d');
    if(bg!=='transparent'){ctx.fillStyle=bg;ctx.fillRect(0,0,w,h);}
    ctx.drawImage(img,0,0,w,h);
    canvas.toBlob(function(blob){
      var url=URL.createObjectURL(blob);
      document.getElementById('svg-preview').src=url;
      document.getElementById('svg-dl').href=url;
      document.getElementById('svg-dl').download='converted.png';
      document.getElementById('svg-info').textContent=w+'x'+h+'px | '+(blob.size/1024).toFixed(0)+' KB';
      document.getElementById('svg-result').style.display='block';
    },'image/png');
  };
  img.onerror=function(){alert('Failed to render SVG. Check the code.');};
  var blob=new Blob([svg],{type:'image/svg+xml'});img.src=URL.createObjectURL(blob);
}
</script></p>

</div>

</article>

</main>
			
		
	</div>

</div> 
	</div>
<footer
class="site-footer" id="colophon" itemtype="https://schema.org/WPFooter" itemscope="itemscope" itemid="#colophon">
			<div class="site-below-footer-wrap ast-builder-grid-row-container site-footer-focus-item ast-builder-grid-row-full ast-builder-grid-row-tablet-full ast-builder-grid-row-mobile-full ast-footer-row-stack ast-footer-row-tablet-stack ast-footer-row-mobile-stack" data-section="section-below-footer-builder">
	<div class="ast-builder-grid-row-container-inner">
					<div class="ast-builder-footer-grid-columns site-below-footer-inner-wrap ast-builder-grid-row">
											<div class="site-footer-below-section-1 site-footer-section site-footer-section-1">
								<div class="ast-builder-layout-element ast-flex site-footer-focus-item ast-footer-copyright" data-section="section-footer-builder">
				<div class="ast-footer-copyright"><p>Copyright © 2026 toolist | Powered by <a href="https://wpastra.com" rel="nofollow noopener" target="_blank">Astra WordPress Theme</a></p>
</div>			</div>
						</div>
										</div>
			</div>

</div>
	</footer>
	</div>
<script type="speculationrules">
{"prefetch":[{"source":"document","where":{"and":[{"href_matches":"/*"},{"not":{"href_matches":["/wp-*.php","/wp-admin/*","/wp-content/uploads/*","/wp-content/*","/wp-content/plugins/*","/wp-content/themes/astra/*","/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]}
</script>

<div id="ast-scroll-top" tabindex="0" class="ast-scroll-top-icon ast-scroll-to-top-right" data-on-devices="both">
	<span class="ast-icon icon-arrow"><svg class="ast-arrow-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" width="26px" height="16.043px" viewBox="57 35.171 26 16.043" enable-background="new 57 35.171 26 16.043" xml:space="preserve">
                <path d="M57.5,38.193l12.5,12.5l12.5-12.5l-2.5-2.5l-10,10l-10-10L57.5,38.193z" />
                </svg></span>	<span class="screen-reader-text">Scroll to Top</span>
</div>
			<script>
			/(trident|msie)/i.test(navigator.userAgent)&&document.getElementById&&window.addEventListener&&window.addEventListener("hashchange",function(){var t,e=location.hash.substring(1);/^[A-z0-9_-]+$/.test(e)&&(t=document.getElementById(e))&&(/^(?:a|select|input|button|textarea)$/i.test(t.tagName)||(t.tabIndex=-1),t.focus())},!1);
			</script>
			<script id="astra-theme-js-js-extra">
var astra = {"break_point":"921","isRtl":"","is_scroll_to_id":"1","is_scroll_to_top":"1","is_header_footer_builder_active":"1","responsive_cart_click":"flyout","is_dark_palette":"1"};
//# sourceURL=astra-theme-js-js-extra
</script>
<script src="https://toolist.cc/wp-content/themes/astra/assets/js/minified/frontend.min.js?ver=4.12.3" id="astra-theme-js-js"></script>
<script id="wp-emoji-settings" type="application/json">
{"baseUrl":"https://s.w.org/images/core/emoji/17.0.2/72x72/","ext":".png","svgUrl":"https://s.w.org/images/core/emoji/17.0.2/svg/","svgExt":".svg","source":{"concatemoji":"https://toolist.cc/wp-includes/js/wp-emoji-release.min.js?ver=6.9.4"}}
</script>
<script type="module">
/*! This file is auto-generated */
const a=JSON.parse(document.getElementById("wp-emoji-settings").textContent),o=(window._wpemojiSettings=a,"wpEmojiSettingsSupports"),s=["flag","emoji"];function i(e){try{var t={supportTests:e,timestamp:(new Date).valueOf()};sessionStorage.setItem(o,JSON.stringify(t))}catch(e){}}function c(e,t,n){e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(t,0,0);t=new Uint32Array(e.getImageData(0,0,e.canvas.width,e.canvas.height).data);e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(n,0,0);const a=new Uint32Array(e.getImageData(0,0,e.canvas.width,e.canvas.height).data);return t.every((e,t)=>e===a[t])}function p(e,t){e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(t,0,0);var n=e.getImageData(16,16,1,1);for(let e=0;e<n.data.length;e++)if(0!==n.data[e])return!1;return!0}function u(e,t,n,a){switch(t){case"flag":return n(e,"\ud83c\udff3\ufe0f\u200d\u26a7\ufe0f","\ud83c\udff3\ufe0f\u200b\u26a7\ufe0f")?!1:!n(e,"\ud83c\udde8\ud83c\uddf6","\ud83c\udde8\u200b\ud83c\uddf6")&&!n(e,"\ud83c\udff4\udb40\udc67\udb40\udc62\udb40\udc65\udb40\udc6e\udb40\udc67\udb40\udc7f","\ud83c\udff4\u200b\udb40\udc67\u200b\udb40\udc62\u200b\udb40\udc65\u200b\udb40\udc6e\u200b\udb40\udc67\u200b\udb40\udc7f");case"emoji":return!a(e,"\ud83e\u1fac8")}return!1}function f(e,t,n,a){let r;const o=(r="undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?new OffscreenCanvas(300,150):document.createElement("canvas")).getContext("2d",{willReadFrequently:!0}),s=(o.textBaseline="top",o.font="600 32px Arial",{});return e.forEach(e=>{s[e]=t(o,e,n,a)}),s}function r(e){var t=document.createElement("script");t.src=e,t.defer=!0,document.head.appendChild(t)}a.supports={everything:!0,everythingExceptFlag:!0},new Promise(t=>{let n=function(){try{var e=JSON.parse(sessionStorage.getItem(o));if("object"==typeof e&&"number"==typeof e.timestamp&&(new Date).valueOf()<e.timestamp+604800&&"object"==typeof e.supportTests)return e.supportTests}catch(e){}return null}();if(!n){if("undefined"!=typeof Worker&&"undefined"!=typeof OffscreenCanvas&&"undefined"!=typeof URL&&URL.createObjectURL&&"undefined"!=typeof Blob)try{var e="postMessage("+f.toString()+"("+[JSON.stringify(s),u.toString(),c.toString(),p.toString()].join(",")+"));",a=new Blob([e],{type:"text/javascript"});const r=new Worker(URL.createObjectURL(a),{name:"wpTestEmojiSupports"});return void(r.onmessage=e=>{i(n=e.data),r.terminate(),t(n)})}catch(e){}i(n=f(s,u,c,p))}t(n)}).then(e=>{for(const n in e)a.supports[n]=e[n],a.supports.everything=a.supports.everything&&a.supports[n],"flag"!==n&&(a.supports.everythingExceptFlag=a.supports.everythingExceptFlag&&a.supports[n]);var t;a.supports.everythingExceptFlag=a.supports.everythingExceptFlag&&!a.supports.flag,a.supports.everything||((t=a.source||{}).concatemoji?r(t.concatemoji):t.wpemoji&&t.twemoji&&(r(t.twemoji),r(t.wpemoji)))});
//# sourceURL=https://toolist.cc/wp-includes/js/wp-emoji-loader.min.js
</script>
	</body>
</html>