{"id":510,"date":"2024-07-10T07:49:23","date_gmt":"2024-07-10T06:49:23","guid":{"rendered":"https:\/\/divbydev.com\/?page_id=510"},"modified":"2025-03-22T07:35:38","modified_gmt":"2025-03-22T07:35:38","slug":"svg-to-png-converter","status":"publish","type":"page","link":"https:\/\/divbydev.com\/index.php\/projects-2\/svg-to-png-converter\/","title":{"rendered":"SVG to PNG Converter"},"content":{"rendered":"\n<p>The SVG to PNG Converter allows you to easily convert SVG files to PNG format. Simply upload an SVG file, convert it using the provided button, and save the converted PNG file.<\/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: #007bff;\n    color: white;\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: #0056b3;\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: #007bff;\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 #007bff;\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: #007bff;\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","protected":false},"excerpt":{"rendered":"<p>The SVG to PNG Converter allows you to easily convert SVG files to PNG format. Simply upload an SVG file, convert it using the provided button, and save the converted PNG file. 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":230,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-510","page","type-page","status-publish"],"_links":{"self":[{"href":"https:\/\/divbydev.com\/index.php\/wp-json\/wp\/v2\/pages\/510","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/divbydev.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/divbydev.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/divbydev.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/divbydev.com\/index.php\/wp-json\/wp\/v2\/comments?post=510"}],"version-history":[{"count":3,"href":"https:\/\/divbydev.com\/index.php\/wp-json\/wp\/v2\/pages\/510\/revisions"}],"predecessor-version":[{"id":780,"href":"https:\/\/divbydev.com\/index.php\/wp-json\/wp\/v2\/pages\/510\/revisions\/780"}],"up":[{"embeddable":true,"href":"https:\/\/divbydev.com\/index.php\/wp-json\/wp\/v2\/pages\/230"}],"wp:attachment":[{"href":"https:\/\/divbydev.com\/index.php\/wp-json\/wp\/v2\/media?parent=510"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}