{"id":278,"date":"2025-03-22T07:40:35","date_gmt":"2025-03-22T07:40:35","guid":{"rendered":"https:\/\/hellopromptly.com\/?page_id=278"},"modified":"2025-03-22T07:41:04","modified_gmt":"2025-03-22T07:41:04","slug":"svg-to-png-converter","status":"publish","type":"page","link":"https:\/\/hellopromptly.com\/index.php\/free-tools\/svg-to-png-converter\/","title":{"rendered":"SVG to PNG Converter"},"content":{"rendered":"\n<p>Converts SVG files to PNG.<\/p>\n\n\n\n<div class=\"svg-to-png-converter-container\">\n  <div id=\"svgToPngDropArea\" class=\"drop-area\">\n    <p id=\"svgToPngDropAreaText\">Drag &#038; Drop your SVG file here or<\/p>\n    <input type=\"file\" id=\"svgToPngFileInput\" accept=\"image\/svg+xml\" style=\"display: none;\">\n    <button id=\"svgToPngBrowseBtn\">Select File<\/button>\n  <\/div>\n  <button id=\"svgToPngConvertBtn\">Convert to PNG<\/button>\n  <button id=\"svgToPngCancelBtn\" style=\"display:none;\">Cancel<\/button>\n  <div id=\"svgToPngProgressContainer\" class=\"progress-container\">\n    <div id=\"svgToPngProgressBar\" class=\"progress-bar\"><\/div>\n  <\/div>\n  <span id=\"svgToPngProgressPercent\" class=\"progress-percent\">0%<\/span>\n  <a id=\"svgToPngDownloadLink\" style=\"display:none;\">Save PNG<\/a>\n  <canvas id=\"svgToPngCanvas\" style=\"display:none;\"><\/canvas>\n<\/div>\n\n<style>\n\n   .site-header .header-image {\n      display: flex;\n      justify-content: flex-start;\n      width: 100px;\n      max-width: 100%; \/* Ensure the logo scales properly *\/\n      height: 100px;\n     }\n\n  .svg-to-png-converter-container {\n    text-align: center;\n    background: white;\n    padding: 20px;\n    border-radius: 8px;\n    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);\n    width: 90%;\n    max-width: 500px;\n    box-sizing: border-box;\n    margin: 20px 0;\n    margin-left: 0;\n  }\n\n  .svg-to-png-converter-container input[type=\"file\"] {\n    margin: 20px 0;\n  }\n\n  .svg-to-png-converter-container button,\n  .svg-to-png-converter-container a {\n    padding: 10px 20px;\n    font-size: 16px;\n    cursor: pointer;\n    border: none;\n    background-color: lightgrey;\n    color: black;\n    border-radius: 5px;\n    margin: 10px;\n    text-decoration: none;\n    display: inline-block;\n    text-align: center;\n  }\n\n  .svg-to-png-converter-container button:hover,\n  .svg-to-png-converter-container a:hover {\n    background-color: grey;\n  }\n\n  .progress-container {\n    width: 100%;\n    background-color: #e0e0e0;\n    border-radius: 5px;\n    margin: 20px 0;\n    height: 20px;\n    display: none;\n    position: relative;\n  }\n\n  .progress-bar {\n    width: 0;\n    height: 100%;\n    background-color: #260b24;\n    border-radius: 5px;\n    transition: width 0.3s;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: white;\n    font-weight: bold;\n    font-size: 14px;\n    overflow: hidden;\n  }\n\n  .progress-percent {\n    display: block;\n    width: 100%;\n    text-align: center;\n    margin-top: 5px;\n    color: black;\n    font-weight: bold;\n  }\n\n  .drop-area {\n    border: 2px dashed black;\n    border-radius: 5px;\n    padding: 20px;\n    cursor: pointer;\n  }\n\n  .drop-area p {\n    margin: 0;\n    font-size: 16px;\n    color: black;\n  }\n\n  @media (max-width: 600px) {\n    .svg-to-png-converter-container {\n      padding: 10px;\n    }\n\n    .svg-to-png-converter-container button,\n    .svg-to-png-converter-container a {\n      padding: 10px;\n      font-size: 14px;\n    }\n  }\n<\/style>\n\n<script>\n  document.addEventListener('DOMContentLoaded', function() {\n    const fileInput = document.getElementById('svgToPngFileInput');\n    const dropArea = document.getElementById('svgToPngDropArea');\n    const dropAreaText = document.getElementById('svgToPngDropAreaText');\n    const browseBtn = document.getElementById('svgToPngBrowseBtn');\n    const convertBtn = document.getElementById('svgToPngConvertBtn');\n    const cancelBtn = document.getElementById('svgToPngCancelBtn');\n    const downloadLink = document.getElementById('svgToPngDownloadLink');\n    const progressContainer = document.getElementById('svgToPngProgressContainer');\n    const progressBar = document.getElementById('svgToPngProgressBar');\n    const progressPercent = document.getElementById('svgToPngProgressPercent');\n\n    browseBtn.addEventListener('click', () => fileInput.click());\n\n    dropArea.addEventListener('dragover', (e) => {\n      e.preventDefault();\n      dropArea.classList.add('dragover');\n    });\n\n    dropArea.addEventListener('dragleave', () => dropArea.classList.remove('dragover'));\n\n    dropArea.addEventListener('drop', (e) => {\n      e.preventDefault();\n      dropArea.classList.remove('dragover');\n      fileInput.files = e.dataTransfer.files;\n      if (fileInput.files.length > 0) {\n        dropAreaText.textContent = `Selected file: ${fileInput.files[0].name}`;\n        cancelBtn.style.display = 'inline-block';\n      }\n    });\n\n    fileInput.addEventListener('change', () => {\n      if (fileInput.files.length > 0) {\n        dropAreaText.textContent = `Selected file: ${fileInput.files[0].name}`;\n        cancelBtn.style.display = 'inline-block';\n      }\n    });\n\n    cancelBtn.addEventListener('click', () => {\n      fileInput.value = '';\n      dropAreaText.textContent = 'Drag & Drop your SVG file here or';\n      cancelBtn.style.display = 'none';\n      downloadLink.style.display = 'none';\n      progressContainer.style.display = 'none';\n      progressBar.style.width = '0%';\n      progressBar.textContent = '';\n      progressPercent.textContent = '0%';\n    });\n\n    convertBtn.addEventListener('click', () => {\n      const file = fileInput.files[0];\n      if (file && file.type === 'image\/svg+xml') {\n        const canvas = document.getElementById('svgToPngCanvas');\n        const ctx = canvas.getContext('2d');\n        const reader = new FileReader();\n\n        reader.onload = (e) => {\n          const svgData = e.target.result;\n          const img = new Image();\n\n          img.onload = () => {\n            canvas.width = img.width;\n            canvas.height = img.height;\n            ctx.drawImage(img, 0, 0);\n\n            progressContainer.style.display = 'block';\n            let progress = 0;\n            const progressInterval = setInterval(() => {\n              progress += 20;\n              progressBar.style.width = `${progress}%`;\n              progressPercent.textContent = `${progress}%`;\n              if (progress >= 100) {\n                clearInterval(progressInterval);\n                const pngUrl = canvas.toDataURL('image\/png');\n                downloadLink.href = pngUrl;\n                downloadLink.download = 'converted.png';\n                downloadLink.style.display = 'inline-block';\n                downloadLink.textContent = 'Save PNG';\n              }\n            }, 300);\n          };\n\n          img.src = 'data:image\/svg+xml;base64,' + btoa(svgData);\n        };\n\n        reader.readAsText(file);\n      } else {\n        alert('Please upload a valid SVG file.');\n      }\n    });\n  });\n<\/script>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Converts SVG files to PNG. Drag &#038; Drop your SVG file here or Select File Convert to PNG Cancel 0% Save PNG<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":81,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-278","page","type-page","status-publish"],"_links":{"self":[{"href":"https:\/\/hellopromptly.com\/index.php\/wp-json\/wp\/v2\/pages\/278","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hellopromptly.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/hellopromptly.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/hellopromptly.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hellopromptly.com\/index.php\/wp-json\/wp\/v2\/comments?post=278"}],"version-history":[{"count":4,"href":"https:\/\/hellopromptly.com\/index.php\/wp-json\/wp\/v2\/pages\/278\/revisions"}],"predecessor-version":[{"id":282,"href":"https:\/\/hellopromptly.com\/index.php\/wp-json\/wp\/v2\/pages\/278\/revisions\/282"}],"up":[{"embeddable":true,"href":"https:\/\/hellopromptly.com\/index.php\/wp-json\/wp\/v2\/pages\/81"}],"wp:attachment":[{"href":"https:\/\/hellopromptly.com\/index.php\/wp-json\/wp\/v2\/media?parent=278"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}