{"id":267,"date":"2025-03-22T07:17:17","date_gmt":"2025-03-22T07:17:17","guid":{"rendered":"https:\/\/hellopromptly.com\/?page_id=267"},"modified":"2025-03-22T07:18:46","modified_gmt":"2025-03-22T07:18:46","slug":"png-to-svg-converter","status":"publish","type":"page","link":"https:\/\/hellopromptly.com\/index.php\/free-tools\/png-to-svg-converter\/","title":{"rendered":"PNG to SVG Converter"},"content":{"rendered":"\n<p>Converts PNG files to SVG.<\/p>\n\n\n\n<div class=\"png-to-svg-converter-container\">\n  <div id=\"svgDropArea\" class=\"drop-area\">\n    <p id=\"svgDropAreaText\">Drag &#038; Drop your PNG file here or<\/p>\n    <input type=\"file\" id=\"svgFileInput\" accept=\"image\/png\" style=\"display: none;\">\n    <button id=\"svgBrowseBtn\">Select File<\/button>\n  <\/div>\n  <button id=\"svgConvertBtn\">Convert to SVG<\/button>\n  <button id=\"svgCancelBtn\" style=\"display:none;\">Cancel<\/button>\n  <div id=\"svgProgressContainer\" class=\"progress-container\">\n    <div id=\"svgProgressBar\" class=\"progress-bar\"><\/div>\n  <\/div>\n  <span id=\"svgProgressPercent\" class=\"progress-percent\">0%<\/span>\n  <a id=\"svgDownloadLink\" style=\"display:none;\">Save SVG<\/a>\n  <canvas id=\"svgCanvas\" 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\n  .png-to-svg-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  .png-to-svg-converter-container input[type=\"file\"] {\n    margin: 20px 0;\n  }\n\n  .png-to-svg-converter-container button,\n  .png-to-svg-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  .png-to-svg-converter-container button:hover,\n  .png-to-svg-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    .png-to-svg-converter-container {\n      padding: 10px;\n    }\n\n    .png-to-svg-converter-container button,\n    .png-to-svg-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('svgFileInput');\n    const dropArea = document.getElementById('svgDropArea');\n    const dropAreaText = document.getElementById('svgDropAreaText');\n    const browseBtn = document.getElementById('svgBrowseBtn');\n    const convertBtn = document.getElementById('svgConvertBtn');\n    const cancelBtn = document.getElementById('svgCancelBtn');\n    const downloadLink = document.getElementById('svgDownloadLink');\n    const progressContainer = document.getElementById('svgProgressContainer');\n    const progressBar = document.getElementById('svgProgressBar');\n    const progressPercent = document.getElementById('svgProgressPercent');\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 PNG 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\/png') {\n        const canvas = document.getElementById('svgCanvas');\n        const ctx = canvas.getContext('2d');\n        const img = new Image();\n\n        progressContainer.style.display = 'block';\n        progressBar.style.width = '0%';\n        progressPercent.textContent = '0%';\n\n        img.onload = () => {\n          canvas.width = img.width;\n          canvas.height = img.height;\n          ctx.drawImage(img, 0, 0);\n\n          \/\/ Simulate progress\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              \n              \/\/ Simulate SVG conversion\n              const svgContent = `\n                <svg width=\"${img.width}\" height=\"${img.height}\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                  <image href=\"${canvas.toDataURL()}\" height=\"100%\" width=\"100%\"\/>\n                <\/svg>`;\n              const blob = new Blob([svgContent], {type: 'image\/svg+xml'});\n              const url = URL.createObjectURL(blob);\n\n              downloadLink.href = url;\n              downloadLink.download = 'converted.svg';\n              downloadLink.style.display = 'inline-block';\n              downloadLink.textContent = 'Save SVG';\n            }\n          }, 300);\n        };\n\n        const reader = new FileReader();\n        reader.onload = (e) => {\n          img.src = e.target.result;\n        };\n        reader.readAsDataURL(file);\n      } else {\n        alert('Please upload a valid PNG file.');\n      }\n    });\n  });\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>Converts PNG files to SVG. Drag &#038; Drop your PNG file here or Select File Convert to SVG Cancel 0% Save SVG<\/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-267","page","type-page","status-publish"],"_links":{"self":[{"href":"https:\/\/hellopromptly.com\/index.php\/wp-json\/wp\/v2\/pages\/267","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=267"}],"version-history":[{"count":6,"href":"https:\/\/hellopromptly.com\/index.php\/wp-json\/wp\/v2\/pages\/267\/revisions"}],"predecessor-version":[{"id":274,"href":"https:\/\/hellopromptly.com\/index.php\/wp-json\/wp\/v2\/pages\/267\/revisions\/274"}],"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=267"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}