Empieza por la estructura del documento
SVG es un lenguaje de gráficos vectoriales basado en XML. Un elemento svg puede contener formas, trazados, texto, grupos y atributos que cambian el dibujo. El ejemplo inferior tiene un viewBox de 40 por 40 y un círculo centrado en 20,20 con radio 12. El viewBox establece un sistema de coordenadas; no obliga a que la imagen ocupe 40 píxeles CSS en la página. Al basarse en XML, importan la correcta anidación de elementos y las comillas de los atributos. El formateador XML general sirve para examinar estructura, pero el específico de SVG comprueba que la raíz sea svg. Utiliza este último si esperas una imagen SVG.
Formatea para inspeccionar y minifica una copia
El formateador añade sangrías y saltos de línea para que puedas examinar por separado el círculo, su relleno y el viewBox. Resulta útil durante edición y revisión. El minificador SVG intenta serializar de forma más compacta, algo práctico al publicar un archivo; no es un compresor gráfico que optimice trazados o elija otro dibujo. Conserva la fuente original y compara las salidas en un visor real. Una cadena más corta no demuestra idéntica representación de todas las funciones de SVG, especialmente si el analizador de una herramienta es limitado. Si aparece un error, revisa el XML de entrada en lugar de inventar automáticamente las partes ausentes.
- XML SVG con viewBox y círculo
- formatear para leer la estructura
- minificar copia → comparar dibujo
Comprueba también lo que no se ve
Un diagrama puede incluir texto, etiquetas o un título útiles tanto para lectores como para tecnologías de apoyo. No los elimines solo para ahorrar bytes. SVG también admite estilos, enlaces, animación y scripts, de modo que formatear no sanea una carga que no sea fiable. Si recibiste el archivo de terceros, aplícale un proceso de revisión y saneamiento adecuado antes de insertarlo en una página. El círculo de ejemplo es deliberadamente sencillo: muestra estructura sin prometer que un formateador local cubra todas las capacidades de SVG. Tras transformar el archivo, compara el dibujo, las dimensiones y las alternativas textuales.
Revisa coordenadas y contexto de inserción
Si un SVG aparece demasiado pequeño, cortado o vacío, empieza por el viewBox. Sus cuatro números indican el rectángulo visible del sistema de coordenadas; una forma fuera de él puede desaparecer aunque el XML sea válido. Después revisa el ancho y el alto en el lugar donde insertas el SVG, pues el CSS puede controlar su tamaño. El relleno y el contorno de una forma influyen también en su visibilidad. Formatear no debería cambiar las coordenadas previstas, y la versión compacta debe compararse bajo los mismos estilos de página. Abre la imagen tanto de forma independiente como en su posición real cuando tenga importancia.
Convierte con un procedimiento comprobable
Pega un SVG pequeño y representativo en el formateador insertado y comprueba que la estructura resultante se lea bien. Para XML que no sea una imagen SVG, selecciona el formateador XML. Después de revisar, introduce una copia en el minificador SVG, guarda ambas versiones y compáralas en el navegador a varios tamaños. Comprueba alternativas textuales y comportamiento interactivo si existen. Solo entonces sustituye el recurso publicado. El trabajo se realiza en el navegador, pero un ejemplo incrustado con entrada precargada expone esa entrada en el fragmento de su URL; evita publicar material privado. El buen formato ayuda a revisar, no reemplaza las pruebas visuales.