SVG to PNG Converter

Rasterize SVG vector graphics into high-resolution transparent PNG images

Convert SVG to High-Resolution PNG

100% Client-Side / High DPI

Click to Upload or Drag & Drop an SVG File

Supports all standard .svg files and inline vector markup

Or Paste Raw SVG Code Below:

<div class="col-md-4 col-12">
                    <label class="form-label small text-muted fw-bold">Resolution / Scale Multiplier</label>
                    <select class="form-select form-select-sm" x-model="scale" @change="renderSvg()">
                        <option value="1">1x (Original Size)</option>
                        <option value="2">2x (High DPI / Retina)</option>
                        <option value="3">3x (Super High Resolution)</option>
                        <option value="4">4x (Ultra HD 4K Print Quality)</option>
                    </select>
                </div>
                <div class="col-md-8 col-12 text-md-end mt-3 mt-md-4">
                    <button type="button" class="btn btn-sm btn-lime me-2" @click="loadSample()">
                        <i class="fas fa-vial me-1"></i> Load Sample SVG
                    </button>
                    <button type="button" class="btn btn-sm btn-warning" @click="resetTool()">
                        <i class="fas fa-redo me-1"></i> Clear
                    </button>
                </div>
            </div>
        </div>
    </div>

<div class="card border shadow-sm mb-4" x-show="hasOutput" x-cloak>
        <div class="card-header bg-light d-flex justify-content-between align-items-center">
            <span class="fw-bold">
                <i class="fas fa-image text-primary me-1"></i> Rasterized PNG Preview
                <span class="badge bg-secondary ms-2" x-text="outputDimensions"></span>
            </span>
            <button type="button" class="btn btn-success" @click="downloadPng()">
                <i class="fas fa-download me-1"></i> Download PNG
            </button>
        </div>
        <div class="card-body text-center p-4" style="background: repeating-conic-gradient(#f0f0f0 0% 25%, #ffffff 0% 50%) 50% / 20px 20px;">
            <canvas x-ref="canvas" class="img-fluid border rounded shadow-sm bg-transparent" style="max-height: 400px;"></canvas>
        </div>
    </div>

handleFileSelect(e) {
                    const file = e.target.files[0];
                    if (file) this.readFile(file);
                },

handleFileDrop(e) {
                    const file = e.dataTransfer.files[0];
                    if (file) this.readFile(file);
                },

readFile(file) {
                    const reader = new FileReader();
                    reader.onload = (e) => {
                        this.svgCode = e.target.result;
                        this.renderSvg();
                    };
                    reader.readAsText(file);
                },

renderSvg() {
                    const code = this.svgCode.trim();
                    if (!code) {
                        this.hasOutput = false;
                        return;
                    }

const parser = new DOMParser();
                    const doc = parser.parseFromString(code, 'image/svg+xml');
                    const svgEl = doc.querySelector('svg');
                    if (!svgEl) return;

let width = parseFloat(svgEl.getAttribute('width')) || 300;
                    let height = parseFloat(svgEl.getAttribute('height')) || 300;

const viewBox = svgEl.getAttribute('viewBox');
                    if (viewBox) {
                        const parts = viewBox.split(/[\s,]+/).filter(Boolean);
                        if (parts.length === 4) {
                            width = parseFloat(parts[2]) || width;
                            height = parseFloat(parts[3]) || height;
                        }
                    }

const targetWidth = Math.round(width * parseFloat(this.scale));
                    const targetHeight = Math.round(height * parseFloat(this.scale));
                    this.outputDimensions = `${targetWidth} × ${targetHeight} px`;

const canvas = this.$refs.canvas;
                    canvas.width = targetWidth;
                    canvas.height = targetHeight;
                    const ctx = canvas.getContext('2d');
                    ctx.clearRect(0, 0, targetWidth, targetHeight);

const blob = new Blob([code], { type: 'image/svg+xml;charset=utf-8' });
                    const url = URL.createObjectURL(blob);
                    const img = new Image();

img.onload = () => {
                        ctx.drawImage(img, 0, 0, targetWidth, targetHeight);
                        URL.revokeObjectURL(url);
                        this.hasOutput = true;
                    };
                    img.src = url;
                },

downloadPng() {
                    const canvas = this.$refs.canvas;
                    const a = document.createElement('a');
                    a.download = 'converted-image.png';
                    a.href = canvas.toDataURL('image/png');
                    a.click();
                },

loadSample() {
                    this.svgCode = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="200" height="200">
  <circle cx="100" cy="100" r="90" fill="#206bc4" />
  <polygon points="100,30 125,85 185,85 135,120 155,175 100,140 45,175 65,120 15,85 75,85" fill="#f59f00" />
</svg>`;
                    this.renderSvg();
                },

resetTool() {
                    this.svgCode = '';
                    this.hasOutput = false;
                }
            };
        }
    </script>
</div>

</div>
        </div>
        
                    <section>
                <div class="card mb-3">
                    <div class="d-block card-header related-tools-box text-start bg-red text-white">
                      <h3 class="card-title">Related Tools</h3>
                    </div>
                    <div class="card-body">
                        <div class="row">
                                                      <div class="col-12 col-md-6 col-lg-4 mb-3">
                                <a class="card text-decoration-none cursor-pointer item-box" href="https://toolsadda.com/png-to-bmp" target="_self">
                                    <div class="card-body">
                                        <div class="d-flex align-items-center">
                                                                                          <img class="avatar me-3 bg-transparent lazyload" data-src="http://toolsadda.com/assets/img/tools/png-to-bmp.svg"  alt="PNG to BMP">
                                                                                        <div class="fw-medium">PNG to BMP</div>
                                            
                                                                                    </div>
                                    </div>
                                </a>
                            </div>
                                                      <div class="col-12 col-md-6 col-lg-4 mb-3">
                                <a class="card text-decoration-none cursor-pointer item-box" href="https://toolsadda.com/image-converter" target="_self">
                                    <div class="card-body">
                                        <div class="d-flex align-items-center">
                                                                                          <img class="avatar me-3 bg-transparent lazyload" data-src="https://toolsadda.com/assets/img/tools/image-converter.svg"  alt="Image Converter">
                                                                                        <div class="fw-medium">Image Converter</div>
                                            
                                                                                    </div>
                                    </div>
                                </a>
                            </div>
                                                      <div class="col-12 col-md-6 col-lg-4 mb-3">
                                <a class="card text-decoration-none cursor-pointer item-box" href="https://toolsadda.com/image-to-base64" target="_self">
                                    <div class="card-body">
                                        <div class="d-flex align-items-center">
                                                                                          <img class="avatar me-3 bg-transparent lazyload" data-src="https://toolsadda.com/assets/img/tools/image-to-base64.svg"  alt="Image to Base64">
                                                                                        <div class="fw-medium">Image to Base64</div>
                                            
                                                                                    </div>
                                    </div>
                                </a>
                            </div>
                                                      <div class="col-12 col-md-6 col-lg-4 mb-3">
                                <a class="card text-decoration-none cursor-pointer item-box" href="https://toolsadda.com/flip-image" target="_self">
                                    <div class="card-body">
                                        <div class="d-flex align-items-center">
                                                                                          <img class="avatar me-3 bg-transparent lazyload" data-src="https://toolsadda.com/assets/img/tools/flip-image.svg"  alt="Flip Image">
                                                                                        <div class="fw-medium">Flip Image</div>
                                            
                                                                                    </div>
                                    </div>
                                </a>
                            </div>
                                                      <div class="col-12 col-md-6 col-lg-4 mb-3">
                                <a class="card text-decoration-none cursor-pointer item-box" href="https://toolsadda.com/simple-image-resizer" target="_self">
                                    <div class="card-body">
                                        <div class="d-flex align-items-center">
                                                                                          <img class="avatar me-3 bg-transparent lazyload" data-src="https://toolsadda.com/assets/img/tools/image-resizer.svg"  alt="Simple Image Resizer - Resize Photo in Pixels & Dimensions">
                                                                                        <div class="fw-medium">Simple Image Resizer - Resize Photo in Pixels & Dimensions</div>
                                            
                                                                                    </div>
                                    </div>
                                </a>
                            </div>
                                                      <div class="col-12 col-md-6 col-lg-4 mb-3">
                                <a class="card text-decoration-none cursor-pointer item-box" href="https://toolsadda.com/circle-crop-image" target="_self">
                                    <div class="card-body">
                                        <div class="d-flex align-items-center">
                                                                                          <img class="avatar me-3 bg-transparent lazyload" data-src="https://toolsadda.com/assets/img/tools/image-cropper.svg"  alt="Circle Crop Image - Crop Image in Circle Online Free">
                                                                                        <div class="fw-medium">Circle Crop Image - Crop Image in Circle Online Free</div>
                                            
                                                                                    </div>
                                    </div>
                                </a>
                            </div>
                                                </div>
                    </div>
                </div>
            </section>
            </section>

</div>

<section id="content-box" class="mb-3 page-626">
                                      <div class="card">
                                          
                                          <div class="card-body ">
                                              
                                                                                              <div class="ad-banner area4 d-flex justify-content-center" style="margin:10px; min-height: 90px;">
			<script>
window.googletag = window.googletag || {cmd: []};
(function() {
  var host = document.currentScript;
  var slotId = 'toolsadda-gpt-' + Math.random().toString(36).slice(2);
  var slot = document.createElement('div');
  slot.id = slotId;
  host.parentNode.insertBefore(slot, host.nextSibling);
  googletag.cmd.push(function() {
    googletag.defineSlot('/22912789695/toolsadda_before_content_728x90', [728, 90], slotId).addService(googletag.pubads());
    googletag.display(slotId);
  });
})();
</script>
		</div>
                                              
                                              <h2>Why Convert SVG to PNG?</h2><p>Scalable Vector Graphics (SVG) are ideal for logos, icons, and illustrations because they scale infinitely without pixelation. However, many legacy image viewers, email clients, social media platforms, and word processors do not support SVGs, requiring rasterized PNGs with transparent backgrounds.</p><h2>Key Features</h2><ul><li><strong>Retina & 4K Scaling:</strong> Export images at 1x, 2x, 3x, or 4x resolution for crystal-clear print quality.</li><li><strong>Preserves Transparency:</strong> Transparent SVG backgrounds remain 100% transparent in the output PNG.</li><li><strong>100% Client-Side Privacy:</strong> Your images are processed entirely within your browser canvas and never uploaded to any remote server.</li></ul>

<div class="ad-banner area5 d-flex justify-content-center" style="margin:10px; min-height: 90px;">
			<script>
window.googletag = window.googletag || {cmd: []};
(function() {
  var host = document.currentScript;
  var slotId = 'toolsadda-gpt-' + Math.random().toString(36).slice(2);
  var slot = document.createElement('div');
  slot.id = slotId;
  host.parentNode.insertBefore(slot, host.nextSibling);
  googletag.cmd.push(function() {
    googletag.defineSlot('/22912789695/toolsadda_after_content_728x90', [728, 90], slotId).addService(googletag.pubads());
    googletag.display(slotId);
  });
})();
</script>
		</div>
                                              
                                                                                            
                                            
                                            
                                          </div>
                                      </div>
                                  </section>
                              </div>

<div class="col-lg-3 ml-auto sidebars">
                                    <div class="mb-3 ">
        <div class="ad-banner sidebar-top d-flex justify-content-center" style="margin:0px; min-height: 250px;">
			<script>
window.googletag = window.googletag || {cmd: []};
(function() {
  var host = document.currentScript;
  var slotId = 'toolsadda-gpt-' + Math.random().toString(36).slice(2);
  var slot = document.createElement('div');
  slot.id = slotId;
  host.parentNode.insertBefore(slot, host.nextSibling);
  googletag.cmd.push(function() {
    googletag.defineSlot('/22912789695/toolsadda_skyscraper', [300, 600], slotId).addService(googletag.pubads());
    googletag.display(slotId);
  });
})();
</script>
		</div>
 
    </div>

<div class="card mb-3 ">
        <div class="card-header d-block text-start bg-red text-white">
            <h3 class="card-title">Popular Tools</h3>
        </div>
        <div class="list-group list-group-flush list-group-hoverable">

<div class="list-group-item">
                    <div class="row">
                        <div class="col d-flex align-items-center">
                            <div class="col-auto">
                                <svg class="me-2" xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path fill="#2fb344" d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"/></svg>
                            </div>
                            <a href="https://toolsadda.com/aspect-ratio-calculator" title="Aspect Ratio Calculator" target="_self" class="text-body d-block text-nowrap">Aspect Ratio Calculator</a>
                        </div>
                    </div>
                </div>
                            <div class="list-group-item">
                    <div class="row">
                        <div class="col d-flex align-items-center">
                            <div class="col-auto">
                                <svg class="me-2" xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path fill="#2fb344" d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"/></svg>
                            </div>
                            <a href="https://toolsadda.com/svg-to-png" title="SVG to PNG Converter" target="_self" class="text-body d-block text-nowrap">SVG to PNG Converter</a>
                        </div>
                    </div>
                </div>
                            <div class="list-group-item">
                    <div class="row">
                        <div class="col d-flex align-items-center">
                            <div class="col-auto">
                                <svg class="me-2" xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path fill="#2fb344" d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"/></svg>
                            </div>
                            <a href="https://toolsadda.com/markdown-to-html" title="Markdown to HTML Converter" target="_self" class="text-body d-block text-nowrap">Markdown to HTML Converter</a>
                        </div>
                    </div>
                </div>
                            <div class="list-group-item">
                    <div class="row">
                        <div class="col d-flex align-items-center">
                            <div class="col-auto">
                                <svg class="me-2" xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path fill="#2fb344" d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"/></svg>
                            </div>
                            <a href="https://toolsadda.com/cron-expression-generator" title="Cron Expression Generator & Schedule Builder" target="_self" class="text-body d-block text-nowrap">Cron Expression Generator & Schedule Builder</a>
                        </div>
                    </div>
                </div>
                            <div class="list-group-item">
                    <div class="row">
                        <div class="col d-flex align-items-center">
                            <div class="col-auto">
                                <svg class="me-2" xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path fill="#2fb344" d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"/></svg>
                            </div>
                            <a href="https://toolsadda.com/random-number-generator" title="Random Number Generator (RNG)" target="_self" class="text-body d-block text-nowrap">Random Number Generator (RNG)</a>
                        </div>
                    </div>
                </div>
                            <div class="list-group-item">
                    <div class="row">
                        <div class="col d-flex align-items-center">
                            <div class="col-auto">
                                <svg class="me-2" xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path fill="#2fb344" d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"/></svg>
                            </div>
                            <a href="https://toolsadda.com/sha256-generator" title="SHA-256 Hash Generator" target="_self" class="text-body d-block text-nowrap">SHA-256 Hash Generator</a>
                        </div>
                    </div>
                </div>
            
        </div>
    </div>

<div class="mb-3 ">
        <div class="ad-banner sidebar-middle d-flex justify-content-center" style="margin:0px; min-height: 250px;">
			<script>
window.googletag = window.googletag || {cmd: []};
(function() {
  var host = document.currentScript;
  var slotId = 'toolsadda-gpt-' + Math.random().toString(36).slice(2);
  var slot = document.createElement('div');
  slot.id = slotId;
  host.parentNode.insertBefore(slot, host.nextSibling);
  googletag.cmd.push(function() {
    googletag.defineSlot('/22912789695/toolsadda_skyscraper', [300, 600], slotId).addService(googletag.pubads());
    googletag.display(slotId);
  });
})();
</script>
		</div>
    </div>

<div class="card mb-3 ">
        <div class="card-header d-block text-start bg-red text-white">
            <h3 class="card-title">Recent Posts</h3>
        </div>
        <div class="list-group list-group-flush list-group-hoverable">
            
                                <div class="list-group-item">
                        <div class="row align-items-center">
                                                        <div class="col text-truncate">
                                <a href="https://toolsadda.com/blog/mariadb-vs-mysql-which-is-better-for-php-mysqli-websites" class="text-body d-block text-nowrap" title="MariaDB vs MySQL: Which is Better for Hosting PHP Websites" target="_self">MariaDB vs MySQL: Which is Better for Hosting PHP Websites</a>
                                <small class="d-block text-muted text-truncate mt-n1">September 19, 2024</small>
                            </div>
                        </div>
                    </div>
                                <div class="list-group-item">
                        <div class="row align-items-center">
                                                        <div class="col text-truncate">
                                <a href="https://toolsadda.com/blog/12-methods-to-assess-the-performance-of-a-query-in-mariadb" class="text-body d-block text-nowrap" title="Assess the Performance of a Query in MariaDB" target="_self">Assess the Performance of a Query in MariaDB</a>
                                <small class="d-block text-muted text-truncate mt-n1">November 7, 2026</small>
                            </div>
                        </div>
                    </div>
                                <div class="list-group-item">
                        <div class="row align-items-center">
                                                        <div class="col text-truncate">
                                <a href="https://toolsadda.com/blog/how-to-create-a-strong-and-secure-password-to-secure-your-accounts-online" class="text-body d-block text-nowrap" title="Tips to Create a Strong and Secure Password for Online Accounts" target="_self">Tips to Create a Strong and Secure Password for Online Accounts</a>
                                <small class="d-block text-muted text-truncate mt-n1">November 7, 2026</small>
                            </div>
                        </div>
                    </div>
                    </div>
    </div>

<div class="mb-3 sticky-top">
        <div class="ad-banner sidebar-bottom d-flex justify-content-center" style="margin:0px; min-height: 250px;">
			<script>
window.googletag = window.googletag || {cmd: []};
(function() {
  var host = document.currentScript;
  var slotId = 'toolsadda-gpt-' + Math.random().toString(36).slice(2);
  var slot = document.createElement('div');
  slot.id = slotId;
  host.parentNode.insertBefore(slot, host.nextSibling);
  googletag.cmd.push(function() {
    googletag.defineSlot('/22912789695/toolsadda_skyscraper', [300, 600], slotId).addService(googletag.pubads());
    googletag.display(slotId);
  });
})();
</script>
		</div>
    </div>
                                </div>
                                                        </div>
                      </div>
                  </main>
                  
            </div>

<hr class="horizontal dark mb-5">
  
  <div class="container">
    <div class="row">
                
          
                  <div class="col-md-3 mb-3">
                    <div>
                      <h4 class="text-uppercase fw-bold mb-3">ToolsAdda</h4><p class="text-muted text-sm mb-3">Your all-in-one suite of 200+ free online web, developer, and SEO tools. Built for speed, privacy, and productivity with zero sign-up required.</p><p class="text-muted text-xs">🔒 100% Client-Side Privacy: No sensitive text or data is stored on remote servers.</p>
                    </div>
                  </div>
                
                  <div class="col-md-3 col-sm-4 col-12 mb-3">
                    <div>
                      <h4 class="text-uppercase fw-bold mb-3">Tool Suites</h4><ul class="list-unstyled text-sm"><li class="mb-2"><a href="/#web-development-tools" class="text-decoration-none text-muted">Web Development Tools</a></li><li class="mb-2"><a href="/#seo-tools" class="text-decoration-none text-muted">SEO & Webmaster Tools</a></li><li class="mb-2"><a href="/#online-tools" class="text-decoration-none text-muted">Image Converters & Optimizers</a></li><li class="mb-2"><a href="/#text-tools" class="text-decoration-none text-muted">Text Formatting & Editing</a></li><li class="mb-2"><a href="/#website-management-tools" class="text-decoration-none text-muted">Daily & Financial Calculators</a></li></ul>
                    </div>
                  </div>

<div class="col-md-3 col-sm-4 col-12 mb-3">
                    <div>
                      <h4 class="text-uppercase fw-bold mb-3">Popular Utilities</h4><ul class="list-unstyled text-sm"><li class="mb-2"><a href="/password-generator" class="text-decoration-none text-muted">Secure Password Generator</a></li><li class="mb-2"><a href="/html-error-fixer" class="text-decoration-none text-muted">HTML Error Fixer</a></li><li class="mb-2"><a href="/color-picker" class="text-decoration-none text-muted">HTML & CSS Color Picker</a></li><li class="mb-2"><a href="/json-formatter" class="text-decoration-none text-muted">JSON Formatter & Validator</a></li><li class="mb-2"><a href="/uuid-generator" class="text-decoration-none text-muted">RFC 4122 UUID Generator</a></li><li class="mb-2"><a href="/qr-code-generator" class="text-decoration-none text-muted">QR Code Generator</a></li></ul>
                    </div>
                  </div>

<div class="col-md-3 col-sm-4 col-12 mb-3">
                    <div>
                      <h4 class="text-uppercase fw-bold mb-3">Trust & Legal</h4><ul class="list-unstyled text-sm"><li class="mb-2"><a href="/about" class="text-decoration-none text-muted">About ToolsAdda</a></li><li class="mb-2"><a href="/contact" class="text-decoration-none text-muted">Contact Support</a></li><li class="mb-2"><a href="/privacy" class="text-decoration-none text-muted">Privacy Policy</a></li><li class="mb-2"><a href="/terms" class="text-decoration-none text-muted">Terms of Service</a></li></ul>
                    </div>
                  </div>

<div class="col-12">
          <div class="text-center">
            <p class="my-4 text-sm">
              <p>Copyright © 2026 ToolsAdda.com. All Rights Reserved. Built for privacy, speed, and developers worldwide.</p>            </p>
          </div>
        </div>
      
    </div>
  </div>
</footer>
            
            <script src="https://toolsadda.com/assets/js/main.min.js"></script>

// Show/hide search box
                searchIcon.addEventListener('click', function () {
                  if (searchBox.style.display === 'none' || searchBox.style.display === '') {
                    searchBox.style.display = 'block';
                  } else {
                    searchBox.style.display = 'none';
                  }
                });

// Hide search box when user clicks outside of it
                document.addEventListener('click', function (event) {
                  const isClickInsideSearchBox = searchBox.contains(event.target);
                  const isClickInsideSearchIcon = searchIcon.contains(event.target);
                  if (!isClickInsideSearchBox && !isClickInsideSearchIcon) {
                    searchBox.style.display = 'none';
                  }
                });
              </script>
            
            
            
            
              
            
                          <script>
                 (function( $ ) {
                    "use strict";

jQuery(".btn-toggle-mode").click(function(){
                            jQuery.ajax({
                                type : 'get',
                                url : 'https://toolsadda.com/theme/mode',
                                success: function(e) {
                                    window.location.reload();
                                }
                            });
                        });

})( jQuery );
              </script>
                        
            
          </div>

<script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
          <script>
            window.googletag = window.googletag || {cmd: []};
            googletag.cmd.push(function() {
                googletag.pubads().enableLazyLoad({
                    fetchMarginPercent: 100,
                    renderMarginPercent: 50,
                    mobileScaling: 2.0
                });
                googletag.enableServices();
            });
          </script>

<div id="g_id_onload"
     data-client_id="909124866531-9kol2v4vom3gumterskju59kcbv5kcgv.apps.googleusercontent.com"
     data-context="signin"
     data-callback="handleGoogleOneTapResponse"
     data-auto_prompt="true"
     data-auto_select="true"
     data-itp_support="true"
     data-cancel_on_tap_outside="false">
</div>
<script>
window.handleGoogleOneTapResponse = function(response) {
    if (!response || !response.credential) return;
    fetch("https://toolsadda.com/auth/google/one-tap", {
        method: "POST",
        headers: {
            "Content-Type": "application/json",
            "X-CSRF-TOKEN": "zS44ZshOporBZRn99negWrwQnu1DI5wvP1l7O4CJ",
            "Accept": "application/json"
        },
        body: JSON.stringify({ credential: response.credential })
    })
    .then(function(res) { return res.json(); })
    .then(function(data) {
        if (data && data.success) {
            window.location.reload();
        }
    })
    .catch(function(err) {
        console.error("One Tap auth error:", err);
    });
};

(function() {
    function loadGoogleOneTap() {
        if (window.__google_gsi_loaded) return;
        window.__google_gsi_loaded = true;

var script = document.createElement("script");
        script.src = "https://accounts.google.com/gsi/client";
        script.async = true;
        script.defer = true;
        script.onload = function() {
                    };
        document.body.appendChild(script);
    }

// Zero impact on page load / Core Web Vitals (FCP, LCP, TBT)
    if (document.readyState === "complete") {
        if ("requestIdleCallback" in window) {
            requestIdleCallback(loadGoogleOneTap, { timeout: 3000 });
        } else {
            setTimeout(loadGoogleOneTap, 1500);
        }
    } else {
        window.addEventListener("load", function() {
            if ("requestIdleCallback" in window) {
                requestIdleCallback(loadGoogleOneTap, { timeout: 3000 });
            } else {
                setTimeout(loadGoogleOneTap, 1500);
            }
        });
    }
})();
</script>

</body>
</html>