Validación HTML: El atributo con el nombre local "xmlns:serif" no es serializable como XML 1.0

Acerca de este problema HTML

Cuando herramientas de diseño gráfico como Affinity Designer (anteriormente Serif) exportan archivos SVG, a menudo incluyen declaraciones de namespace personalizadas como xmlns:serif="http://www.serif.com/". Estos namespaces permiten al editor almacenar sus propios metadatos — como nombres de capas, información de agrupación o configuraciones específicas de la aplicación — dentro del archivo SVG. Aunque estos metadatos son útiles si vuelves a abrir el archivo en el editor original, no tienen significado en un navegador web.

La especificación HTML5 define un conjunto específico de atributos de namespace que están permitidos en elementos SVG (como xmlns, xmlns:xlink y xmlns:xml). Cualquier prefijo de namespace que no esté en esta lista predefinida — como xmlns:serif, xmlns:inkscape o xmlns:sodipodi — desencadena este error de validación porque el analizador HTML no puede serializar estos atributos de vuelta a XML 1.0 bien formado. Esto no es solo una preocupación teórica: los atributos no serializables pueden causar problemas cuando el DOM se manipula mediante JavaScript o cuando el marcado es procesado por herramientas basadas en XML.

Más allá de la declaración xmlns:serif en sí, probablemente encontrarás atributos en el SVG que usan este prefijo de namespace, como serif:id="layer1". Estos también deberían eliminarse ya que hacen referencia a un namespace que el navegador no entiende.

Cómo solucionarlo

Elimina el atributo xmlns:serif del elemento <svg>.
Elimina cualquier atributo con el prefijo serif: (ej., serif:id) de elementos hijos dentro del SVG.
Si vuelves a exportar el SVG, revisa la configuración de exportación de tu editor — algunas herramientas ofrecen una opción de exportación “limpia” u “optimizada” que elimina metadatos propietarios.
Considera usar una herramienta de optimización SVG como SVGO para limpiar automáticamente atributos innecesarios.

Ejemplos

❌ Inválido: SVG con atributo `xmlns:serif`

<svg xmlns="http://www.w3.org/2000/svg"
  xmlns:serif="http://www.serif.com/"
  viewBox="0 0 100 100"
  width="100"
  height="100">
  <g serif:id="Layer 1">
    <circle cx="50" cy="50" r="40" fill="blue" />
  </g>
</svg>

Esto desencadena el error porque xmlns:serif no es un namespace reconocido en HTML5, y serif:id hace referencia a ese namespace no soportado.

✅ Válido: SVG con atributos propietarios eliminados

<svg xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 100 100"
  width="100"
  height="100">
  <g>
    <circle cx="50" cy="50" r="40" fill="blue" />
  </g>
</svg>

Tanto xmlns:serif como serif:id han sido eliminados. El SVG se renderiza de manera idéntica en el navegador ya que esos atributos solo tenían significado para la aplicación de edición.

Manejo de múltiples namespaces propietarios

Los SVGs exportados a veces contienen varios namespaces no estándar a la vez. Elimínalos todos:

<!-- ❌ Inválido: múltiples namespaces propietarios -->

<svg xmlns="http://www.w3.org/2000/svg"
  xmlns:serif="http://www.serif.com/"
  xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
  viewBox="0 0 200 200">
  <rect x="10" y="10" width="180" height="180" fill="red"
    serif:id="background"
    inkscape:label="bg-rect" />
</svg>

<!-- ✅ Válido: todos los namespaces propietarios y atributos con prefijo eliminados -->

<svg xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 200 200">
  <rect x="10" y="10" width="180" height="180" fill="red" />
</svg>

Si trabajas frecuentemente con SVGs de herramientas de diseño, integrar un optimizador SVG en tu proceso de construcción puede ahorrarte tiempo y asegurar que estos atributos no estándar nunca lleguen a producción.