// Data header for a svg image: const dataHeader = 'data:image/svg+xml;charset=utf-8' // Serialize it as xml string: const serializeAsXML = $e => (new XMLSerializer()).serializeToString($e) // Encode URI data as base64 data: const encodeAsB64 = s => `${dataHeader};base64,${btoa(s)}` // Select the element: const $svg = document.getElementById('svg-container').querySelector('svg') // SerializeEncode it as xmla data string: const svgAsXMLsvgData = serializeAsXML(new XMLSerializerserializeAsXML($svg))
Note:
If you need a base64 data you can use this option:
.serializeToString.. // Encode URI data as UTF8 data: const encodeAsUTF8 = s => `${dataHeader},${encodeURIComponent($svgs)}` ... // Encode it as a data string: const svgData = `data:image/svg+xml,${encodeURIComponentencodeAsB64(svgAsXMLserializeAsXML($svg)}`)
const dataHeader = 'data:image/svg+xml;charset=utf-8' const $svg = document.getElementById('svg-container').querySelector('svg') const $holder = document.getElementById('img-container') const $label = document.getElementById('img-format') const destroyChildren = $element => { while ($element.firstChild) { const $lastChild = $element.lastChild ?? false if ($lastChild) $element.removeChild($lastChild) } } const loadImage = async url => { const $img = document.createElement('img') $img.src = url return new Promise((resolve, reject) => { $img.onload = () => resolve($img) $img.onerror = reject }) } const serializeAsXML = $e => (new XMLSerializer()).serializeToString($e) const encodeAsUTF8 = s => `${dataHeader},${encodeURIComponent(s)}` const encodeAsB64 = s => `${dataHeader};base64,${btoa(s)}` const convertSVGtoImg = async e => { const $btn = e.target const format = $btn.dataset.format ?? 'png' $label.textContent = format destroyChildren($holder) const svgAsXMLsvgData = (new XMLSerializerencodeAsUTF8()).serializeToStringserializeAsXML($svg) const svgData = `data:image/svg+xml,${encodeURIComponent(svgAsXML)}` const img = await loadImage(svgData) const $canvas = document.createElement('canvas') $canvas.width = $svg.clientWidth $canvas.height = $svg.clientHeight $canvas.getContext('2d').drawImage(img, 0, 0, $svg.clientWidth, $svg.clientHeight) const dataURL = await $canvas.toDataURL(`image/${format}`, 1.0) console.log(dataURL) const $img = document.createElement('img') $img.src = dataURL $holder.appendChild($img) } const buttons = [...document.querySelectorAll('[data-format]')] for (const $btn of buttons) { $btn.onclick = convertSVGtoImg }
.wrapper { display: flex; flex-flow: row nowrap; width: 100vw; } .images { display: flex; flex-flow: row nowrap; width: 70%; } .image { width: 50%; display: flex; flex-flow: row wrap; justify-content: center; } .label { width: 100%; text-align: center; }
<div class="wrapper"> <div class="item images"> <div class="image left"> <div class="label">svg</div> <div id="svg-container"> <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="200" height="200" viewBox="0 0 248 204"> <path fill="#1d9bf0" d="M221.95 51.29c.15 2.17.15 4.34.15 6.53 0 66.73-50.8 143.69-143.69 143.69v-.04c-27.44.04-54.31-7.82-77.41-22.64 3.99.48 8 .72 12.02.73 22.74.02 44.83-7.61 62.72-21.66-21.61-.41-40.56-14.5-47.18-35.07 7.57 1.46 15.37 1.16 22.8-.87-23.56-4.76-40.51-25.46-40.51-49.5v-.64c7.02 3.91 14.88 6.08 22.92 6.32C11.58 63.31 4.74 33.79 18.14 10.71c25.64 31.55 63.47 50.73 104.08 52.76-4.07-17.54 1.49-35.92 14.61-48.25 20.34-19.12 52.33-18.14 71.45 2.19 11.31-2.23 22.15-6.38 32.07-12.26-3.77 11.69-11.66 21.62-22.2 27.93 10.01-1.18 19.79-3.86 29-7.95-6.78 10.16-15.32 19.01-25.2 26.16z"/> </svg> </div> </div> <div class="image right"> <div id="img-format" class="label"></div> <div id="img-container"></div> </div> </div> <div class="item buttons"> <button id="btn-png" data-format="png">PNG</button> <button id="btn-jpg" data-format="jpeg">JPG</button> <button id="btn-webp" data-format="webp">WEBP</button> </div> </div>
