Acerca de este problema HTML
En HTML5, los elementos SVG son compatibles de forma nativa y no requieren declaraciones de namespace explícitas en absoluto. Cuando escribes una etiqueta <svg> dentro de un documento HTML, el navegador automáticamente la asocia con el namespace SVG correcto (http://www.w3.org/2000/svg). El atributo xmlns:svg="http://www.w3.org/2000/svg" es una vinculación de namespace con prefijo — declara svg como un prefijo de namespace — que es un concepto de flujos de trabajo XML/XHTML que el parser de HTML5 no admite ni reconoce.
La especificación HTML define un conjunto limitado de atributos permitidos en cada elemento. Dado que xmlns:svg no está entre ellos para el elemento <svg> (o cualquier elemento HTML5), el validador W3C lo marca como inválido. El único atributo relacionado con namespaces que el parser HTML tolera en <svg> es xmlns="http://www.w3.org/2000/svg", e incluso ese es opcional — se acepta únicamente por compatibilidad con XHTML pero no tiene efecto funcional en HTML5.
Este problema aparece comúnmente cuando el código SVG se exporta desde editores gráficos como Inkscape o Adobe Illustrator, o cuando archivos SVG escritos originalmente como documentos XML independientes se pegan directamente en HTML. Estas herramientas a veces incluyen declaraciones de namespace verbosas que son necesarias en contextos XML pero inválidas en HTML.
Por qué es importante
- Cumplimiento de estándares: La especificación HTML5 explícitamente no permite atributos de namespace con prefijo. Usarlos resulta en errores de validación.
- Limpieza del código: Los atributos innecesarios agregan desorden sin ningún beneficio, haciendo que tu marcado sea más difícil de leer y mantener.
- Posibles problemas de parsing: Aunque la mayoría de los navegadores ignoran silenciosamente los atributos no reconocidos, depender del comportamiento permisivo del navegador en lugar de un marcado válido puede llevar a resultados inesperados en casos extremos o consumidores de HTML que no son navegadores (p. ej., clientes de email, scrapers de contenido o herramientas de accesibilidad).
Cómo solucionarlo
-
Localiza todos los elementos
<svg>en tu HTML que contengan el atributoxmlns:svg. -
Elimina completamente el atributo
xmlns:svg="http://www.w3.org/2000/svg". -
Si estás trabajando en un documento HTML5 (no XHTML), el atributo
xmlns="http://www.w3.org/2000/svg"también es opcional — puedes mantenerlo o eliminarlo. -
Si tu SVG usa otras declaraciones de namespace con prefijo como
xmlns:xlink, considera reemplazarlas con sus equivalentes HTML5 (p. ej., usahrefen lugar dexlink:href).
Ejemplos
Incorrecto: usar xmlns:svg en un elemento SVG
El atributo xmlns:svg provoca el error de validación:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="40" fill="blue" />
</svg>
Correcto: eliminar el namespace con prefijo
Elimina xmlns:svg y mantén solo los atributos estándar:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="40" fill="blue" />
</svg>
También correcto: SVG inline mínimo en HTML5
En HTML5, el propio atributo xmlns es opcional para SVG inline, por lo que este es el enfoque más limpio:
<svg viewBox="0 0 100 100">
<circle cx="50" cy="50" r="40" fill="blue" />
</svg>
Limpieza de múltiples namespaces innecesarios
El SVG exportado desde editores a menudo incluye varias declaraciones de namespace innecesarias. Aquí tienes un antes y después de una limpieza típica:
Antes (múltiples atributos de namespace inválidos):
<svg xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200 200">
<image xlink:href="photo.jpg" width="200" height="200" />
</svg>
Después (limpiado para HTML5):
<svg viewBox="0 0 200 200">
<image href="photo.jpg" width="200" height="200" />
</svg>
Ten en cuenta que xlink:href ha sido reemplazado con href, que es el estándar moderno compatible con todos los navegadores actuales. La declaración xmlns:xlink tampoco es necesaria.
Encuentra problemas como este automáticamente
Rocket Validator escanea miles de páginas en segundos, detectando problemas de HTML en todo tu sitio web.