SVG to PNG Converter

Upload or paste SVG code, set your scale and background, and download a high-resolution PNG — entirely in your browser. No files are ever sent to a server.

Input SVG

<div class="sp-dropzone" id="sp-dropzone">
  <div class="sp-dropzone-icon">&#9653;</div>
  <p class="sp-dropzone-text">Drop SVG file here</p>
  <p class="sp-dropzone-sub">or click to browse</p>
</div>
<input type="file" id="sp-file-input" accept=".svg,image/svg+xml" style="display:none;">

<div class="sp-field">
  <label class="sp-label" for="sp-code">Or paste SVG code</label>
  <textarea id="sp-code" class="sp-textarea" placeholder="<svg xmlns=&quot;http://www.w3.org/2000/svg&quot; ...>&#10;  ...&#10;</svg>"></textarea>
</div>

<button class="sp-btn-secondary" id="sp-load-sample" style="margin-top:10px;">Load sample SVG</button>

Settings

  <div class="sp-field">
    <label class="sp-label">Scale (retina-ready)</label>
    <div class="sp-scale-row">
      <button class="sp-scale-btn active" data-scale="1">1x</button>
      <button class="sp-scale-btn" data-scale="2">2x</button>
      <button class="sp-scale-btn" data-scale="3">3x</button>
      <button class="sp-scale-btn" data-scale="4">4x</button>
    </div>
  </div>

  <div class="sp-field">
    <label class="sp-label">Output Dimensions (px)</label>
    <div class="sp-dim-row">
      <input type="number" id="sp-width" class="sp-input" placeholder="Width" min="1" max="8000">
      <button class="sp-lock-btn locked" id="sp-lock-btn" title="Lock aspect ratio">&#128274;</button>
      <input type="number" id="sp-height" class="sp-input" placeholder="Height" min="1" max="8000">
    </div>
    <p style="font-size:11px;color:#9ca3af;margin:2px 0 0 0;">Leave blank to use SVG's natural size × scale</p>
  </div>

  <div class="sp-field">
    <label class="sp-label">Background</label>
    <div class="sp-color-row">
      <input type="color" id="sp-bg-color" class="sp-color-input" value="#ffffff" title="Background color">
      <button class="sp-transparent-btn active" id="sp-transparent-btn">Transparent</button>
      <span style="font-size:12px;color:#6b7280;flex:1;" id="sp-bg-label">Transparent PNG</span>
    </div>
  </div>

</div>

Preview & Download

Your SVG preview will appear here

How it works

  1. Upload an SVG file or paste SVG code into the text area.
  2. Choose a scale multiplier (2x/3x for retina-sharp exports).
  3. Optionally set custom width/height — the aspect ratio lock keeps proportions intact.
  4. Pick a background color or leave it transparent.
  5. Click Convert & Download PNG — the SVG is rendered on an HTML Canvas and saved as PNG.

Generate placeholder images → Placeholder Image Generator

Resize images → Image Resizer