Estoy creando un sitio donde las personas pueden personalizar el color SVG y luego descargarlo para que tengan ilustraciones que coincidan con los colores de su marca (sin usar un programa de arte). En este momento estoy tratando de implementar la función de descarga para que cuando un usuario haga clic en el ícono, descargue el SVG a su computadora.

Tengo el siguiente código de navegar por otros temas:

 $('.item-download-icon').on('click', function() { let imageToDownload = $(this).parent().siblings('.item-code').find('svg'); var svg_data = imageToDownload[0].innerHTML; console.log(svg_data); var head = '<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 800 800" style="enable-background:new 0 0 800 800;" xml:space="preserve">' var full_svg = head + svg_data + "</svg>" var blob = new Blob([full_svg], {type: "image/svg+xml"}); saveAs(blob, "test.svg"); //console.log(imageToDownload); });

Utiliza la biblioteca FileSaver.js. Sin embargo, cuando descargo el archivo, aparece el error "SVG no válido" al intentar abrirlo con Illustrator. Cuando lo arrastro a Chrome dice:

 error on line 11 at column 430: Namespace prefix inkscape for current-layer on namedview is not defined

¿Alguna idea de lo que estoy haciendo mal? ¡Gracias! El texto del SVG completo está aquí: https://docs.google.com/document/d/19gOZ7NGjSDP4VrEPgpRuc4Di_4IffuKglkXB4YYGbcU/edit?usp=sharing

¡Gracias!