Estoy tratando de crear un mapa de bits a partir de un archivo SVG, pero recibo el siguiente error:
Uncaught (in promise) DOMException: The source image could not be decoded.Estoy usando el siguiente código:
const response = await fetch(MARKER_PATH); const svgStr = await response.text(); const svgBlob = new Blob([svgStr], { type: 'image/svg+xml' }); this.marker = await createImageBitmap(svgBlob);El código del marcador se puede encontrar en este enlace . El SVG es válido (o eso creo). Puedo verlo correctamente y si lo dibujo como una imagen en un lienzo, entonces funciona perfectamente, así que no sé por qué está fallando.
He pensado que quizás tenga que ver con la codificación, pero eso tampoco tiene sentido porque el SVG se puede cargar correctamente en otros entornos. ¿Tienes idea de lo que está pasando?
Actualmente, ningún navegador admite la creación de un ImageBitmap a partir de un Blob que contiene un documento SVG, mientras que según las especificaciones deberían hacerlo.
Escribí un parche de mono que llena este agujero (y otros) que puedes usar:
fetch("https://gist.githubusercontent.com/antoniogamiz/d1bf0b12fb2698d1b96248d410bb4219/raw/b76455e193281687bb8355dd9400d17565276000/marker.svg") .then( r => r.blob() ) .then( createImageBitmap ) .then( console.log ) .catch( console.error ); <script src="https://cdn.jsdelivr.net/gh/Kaiido/createImageBitmap/dist/createImageBitmap.js"></script> Básicamente, para este caso, realizo una primera prueba (asincrónica) usando un blob ficticio que debería funcionar, y si detecta que el UA no es compatible con esta característica, la entrada de blobs con un type: "image/svg+xml" son convertido a HTMLImageElement que apunta a un blob:// URI al blob.
Esto significa que esta solución no funciona en Workers .
También tenga en cuenta que, según las especificaciones, este método solo admite imágenes SVG con un ancho y alto intrínsecos (es decir, atributos absolutos de width y height ).