Acerca de este problema HTML
El atributo xmlns declara el espacio de nombres XML para un elemento. Para elementos SVG, el único espacio de nombres permitido es "http://www.w3.org/2000/svg". Cuando este atributo está presente pero establecido como una cadena vacía ("") o cualquier valor distinto al espacio de nombres correcto, el validador W3C reporta un error porque el navegador no puede asociar correctamente el elemento con la especificación SVG.
En documentos HTML5 (servidos como text/html), el atributo xmlns en <svg> es en realidad opcional. El analizador HTML asocia automáticamente los elementos <svg> con el espacio de nombres SVG correcto sin necesidad de una declaración explícita. Sin embargo, si incluyes el atributo xmlns — por ejemplo, porque tu SVG fue exportado desde una herramienta de diseño o copiado desde una fuente basada en XML — debe contener el valor exacto "http://www.w3.org/2000/svg". Un valor vacío o incorrecto causará un error de validación y podría llevar a problemas de renderizado en ciertos contextos.
Esto importa por varias razones:
-
Cumplimiento de estándares: La especificación HTML restringe explícitamente el valor permitido para
xmlnsen elementos SVG. -
Compatibilidad con navegadores: Aunque la mayoría de los navegadores modernos son tolerantes en modo HTML, un espacio de nombres incorrecto puede causar problemas cuando el contenido SVG se usa en contextos XML (como XHTML o archivos
.svgindependientes). - Interoperabilidad: Las herramientas y librerías que procesan tu HTML pueden depender del espacio de nombres correcto para identificar y manipular elementos SVG.
Para solucionar este problema, tienes dos opciones:
-
Establecer el valor correcto: Reemplaza el valor
xmlnsvacío o incorrecto con"http://www.w3.org/2000/svg". -
Eliminar el atributo por completo: Dado que
xmlnses opcional en HTML5, simplemente eliminarlo es a menudo la solución más limpia.
Ejemplos
Incorrecto: atributo xmlns vacío
Esto provoca el error de validación porque el valor del espacio de nombres es una cadena vacía:
<svg xmlns="" width="100" height="100">
<circle cx="50" cy="50" r="40" fill="red" />
</svg>
Incorrecto: valor de espacio de nombres incorrecto
Cualquier valor distinto al espacio de nombres SVG correcto también provocará este error:
<svg xmlns="http://www.w3.org/2000/html" width="100" height="100">
<circle cx="50" cy="50" r="40" fill="red" />
</svg>
Solución: usar el espacio de nombres correcto
Establece xmlns con el único valor permitido:
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
<circle cx="50" cy="50" r="40" fill="red" />
</svg>
Solución: eliminar el atributo xmlns
En un documento HTML5, puedes omitir xmlns completamente ya que el analizador maneja el espacio de nombres automáticamente:
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" fill="red" />
</svg>
Nota sobre SVG inline de fuentes externas
Herramientas de diseño como Figma, Illustrator o Inkscape a menudo exportan archivos SVG con el atributo xmlns ya establecido correctamente. Si copias markup SVG y el valor xmlns se borra o corrompe accidentalmente durante el proceso, restaura el valor a "http://www.w3.org/2000/svg" o elimínalo antes de incrustar el SVG en tu HTML. Ambos enfoques producirán markup válido y funcional.
Encuentra problemas como este automáticamente
Rocket Validator escanea miles de páginas en segundos, detectando problemas de HTML en todo tu sitio web.