Validación HTML: Valor incorrecto "X" para el atributo "Y" en el elemento "Z": No es un nombre XML 1.0 válido.

Acerca de este problema HTML

Por qué esto importa

Aunque HTML5 es bastante permisivo con los valores de id (permite casi cualquier cosa excepto espacios), los elementos dentro de vocabularios basados en XML como SVG y MathML están sujetos a reglas más estrictas. Cuando estos elementos aparecen en tu documento HTML, sus atributos aún deben cumplir con las convenciones de nomenclatura XML 1.0 según se define en la especificación correspondiente.

Los nombres XML 1.0 deben seguir estas reglas:

Deben comenzar con una letra (a–z, A–Z) o un guión bajo (_)
Los caracteres posteriores pueden ser letras, dígitos (0–9), guiones (-), guiones bajos (_) y puntos (.)
No pueden contener espacios, dos puntos (fuera de contextos con espacios de nombres), o caracteres especiales como @, #, $, !, etc.

Este error típicamente aparece cuando las herramientas de diseño (como Figma, Illustrator o Sketch) exportan archivos SVG con valores de id autogenerados que incluyen espacios u otros caracteres no válidos. Los navegadores aún pueden renderizar el contenido, pero confiar en nombres no conformes puede causar problemas con selectores CSS, getElementById() de JavaScript, referencias de fragmentos de URL y herramientas de accesibilidad que dependen de identificadores válidos.

Cómo solucionarlo

Elimina los espacios — reemplázalos con guiones o guiones bajos, o usa camelCase.
Asegúrate de que el nombre comience con una letra o guión bajo — si comienza con un dígito, agrégale un prefijo con una letra o guión bajo.
Elimina los caracteres especiales — quita o reemplaza caracteres como @, #, (, ), etc.
Revisa los archivos SVG exportados — si estás incrustando SVGs desde herramientas de diseño, limpia los valores de id generados antes de añadirlos a tu HTML.

Ejemplos

Incorrecto: Espacio en el valor del `id`

El espacio en "Group 270" hace que este sea un nombre XML 1.0 no válido:

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <g id="Group 270">
    <circle cx="50" cy="50" r="40" />
  </g>
</svg>

Incorrecto: El nombre comienza con un dígito

Los nombres XML 1.0 no pueden comenzar con un número:

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <rect id="1st-rectangle" width="100" height="50" />
</svg>

Incorrecto: Caracteres especiales en el nombre

Caracteres como ( y ) no están permitidos:

<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <path id="icon(home)" d="M10 80 L50 10 L90 80 Z" />
</svg>

Corregido: Nombres XML 1.0 válidos

Reemplaza los espacios con guiones, agrega un prefijo con una letra a los nombres que comienzan con dígitos, y elimina los caracteres especiales:

<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <g id="group-270">
    <circle cx="50" cy="50" r="40" />
  </g>
  <rect id="first-rectangle" width="100" height="50" />
  <path id="icon-home" d="M10 80 L50 10 L90 80 Z" />
</svg>

Consejo: Limpieza de SVGs exportados

Las herramientas de diseño a menudo producen valores de id como "Frame 42", "Vector (Stroke)", o "123_layer". Un flujo de trabajo rápido de buscar y reemplazar puede solucionarlos antes de que lleguen a tu código. También puedes usar herramientas como SVGO para optimizar y limpiar la salida SVG, incluyendo la eliminación o renombrado de identificadores no válidos.