Acerca de este problema HTML
El atributo xmlns define el namespace XML para un elemento. Para SVG, el namespace correcto es http://www.w3.org/2000/svg, declarado con xmlns="http://www.w3.org/2000/svg". El atributo xmlns:svg intenta declarar una vinculación de namespace prefijado adicional — esencialmente mapeando el prefijo svg: al mismo URI de namespace. Esto es redundante porque el namespace por defecto (sin prefijo) ya cubre todos los elementos SVG.
En HTML5, el parser maneja los namespaces internamente. La especificación HTML solo permite un pequeño conjunto de atributos de namespace: xmlns en ciertos elementos (como <svg> y <math>) y xmlns:xlink para compatibilidad heredada. Las declaraciones de namespace prefijado arbitrarias como xmlns:svg no son parte del formato de serialización HTML. El validador W3C genera este error porque los atributos que contienen dos puntos en sus nombres locales (aparte de los específicamente permitidos) no pueden ser procesados de ida y vuelta a través del parser y serializador HTML — no son “serializables como XML 1.0.”
Por qué es importante
-
Cumplimiento de estándares: HTML5 tiene reglas estrictas sobre qué declaraciones de namespace están permitidas. Usar
xmlns:svgviola estas reglas. -
Problemas de serialización: Si un navegador analiza el HTML y luego lo re-serializa (por ejemplo, a través de
innerHTML), el atributoxmlns:svgpuede perderse, alterarse o causar comportamiento inesperado porque cae fuera del conjunto de atributos serializables. -
Redundancia: Incluso en documentos XML/SVG puros, declarar
xmlns:svg="http://www.w3.org/2000/svg"junto conxmlns="http://www.w3.org/2000/svg"es innecesario. El namespace por defecto ya se aplica al elemento<svg>y todos sus descendientes sin prefijo.
Cómo solucionarlo
-
Localiza el elemento
<svg>(o cualquier elemento) que contenga el atributoxmlns:svg. -
Elimina completamente
xmlns:svg="http://www.w3.org/2000/svg". -
Asegúrate de que el atributo estándar
xmlns="http://www.w3.org/2000/svg"permanezca si es necesario (ten en cuenta que al incrustar SVG en línea en un documento HTML5, inclusoxmlnses opcional ya que el parser HTML infiere el namespace automáticamente).
Ejemplos
Incorrecto: declaración de namespace prefijado redundante
<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>
El atributo xmlns:svg desencadena el error de validación porque no es serializable en HTML.
Correcto: solo namespace 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>
Correcto: SVG en línea en HTML5 sin ningún atributo de namespace
Cuando SVG se incrusta directamente en un documento HTML5, el parser HTML asigna automáticamente el namespace correcto, por lo que puedes omitir xmlns por completo:
<svg viewBox="0 0 100 100">
<circle cx="50" cy="50" r="40" fill="blue" />
</svg>
Esto es perfectamente válido y es el patrón más común para SVG en línea en HTML moderno. El atributo xmlns solo es estrictamente necesario cuando el SVG se sirve como un archivo XML independiente (con una extensión .svg o un content type image/svg+xml).
Encuentra problemas como este automáticamente
Rocket Validator escanea miles de páginas en segundos, detectando problemas de HTML en todo tu sitio web.