¿Qué es un archivo SVG? – Pros, contras, código XML

SVG es un gráfico vectorial en formato de texto

Scalable Vector Graphics (SVG) es un lenguaje XML para crear gráficos vectoriales bidimensionales y gráficos vectoriales/rasterizados mixtos. El documento SVG es un archivo de texto que describe imágenes como primitivas geométricas: líneas, curvas, formas, texto, etc. Los objetos vectoriales se construyen y almacenan como un conjunto de comandos, números, fórmulas, no en una cuadrícula de píxeles como en los mapas de bits. Esto significa que los SVG vectoriales se pueden cambiar significativamente de tamaño sin pérdida de calidad, lo que los hace ideales para íconos, logotipos, sprites SVG y más. Debido a que los SVG están escritos en código XML, almacenan información en texto sin formato en lugar de formas. Esto permite a los motores de búsqueda como Google leer gráficos SVG para sus palabras clave, lo que puede ayudar a un sitio web a ascender en el ranking de búsqueda.

El formato SVG tiene todas las ventajas de los gráficos vectoriales, así como muchas otras ventajas sobre los formatos de imágenes de mapa de bits. El formato de archivo vectorial se usa ampliamente en la web y comprender los conceptos básicos de SVG será útil para los desarrolladores.

Archivo SVG – Código XML

Un archivo SVG está escrito en el lenguaje de marcado XML. El código XML en el documento SVG define todas las formas, trazados, colores y texto que componen la imagen. El código SVG puede incrustarse directamente en HTML o guardarse en un archivo SVG e insertarse como cualquier otra imagen. Como todo el contenido de un archivo SVG es texto, puedes abrir uno en un editor de texto, leer y editar el código SVG. Puede utilizar un navegador web moderno como Chrome, Firefox o Edge para abrir y ver imágenes SVG en línea sin descargarlas. Puede identificar fácilmente un archivo SVG por su extensión .svg. Sin embargo, será útil conocer los conceptos básicos de SVG para comprender cómo se debe mostrar.

Elementos y atributos

Cada documento SVG se basa en elementos estructurales principales XML: una estructura en forma de árbol, etiquetas, elementos y atributos. Los elementos se aplican para dibujar, transformar, diseñar y colocar imágenes. Pueden contener atributos que definen sus propiedades, es decir, detalles sobre cómo se debe manejar o representar el elemento. El elemento escribe con ayuda una etiqueta inicial y una etiqueta final entre paréntesis angulares. El archivo SVG debe escribirse según la sintaxis XML y la especificación W3C SVG 2.0.

Veamos un ejemplo sencillo. Generamos una imagen SVG de cuatro círculos de diferentes tamaños y colores con un centro:

<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
    <circle cx="50" cy="50" r="40" fill="#B0C4DE" />
    <circle cx="50" cy="50" r="30" fill="#DDA0DD" />
    <circle cx="50" cy="50" r="20" fill="#FFB6C1" />
    <circle cx="50" cy="50" r="10" fill="#5F9EA0" />
</svg>

El elemento principal en el código SVG es el elemento <svg>, que define un fragmento de documento SVG.

• El atributo xmlns en SVG significa espacio de nombres XML y representa los elementos y atributos estándar que se pueden usar en un documento SVG de acuerdo con la especificación de gráficos vectoriales escalables. Sin el atributo xmlns, es posible que el código SVG no se represente correctamente o no se represente en absoluto.
• El atributo viewBox define una ventana a través de la cual los elementos de su SVG son visibles. En este caso, el cuadro de visualización se extiende desde (0,0) hasta (300,300).

El elemento SVG <circle> se utiliza para dibujar un círculo en la pantalla. Debes establecer la posición del centro y el radio del círculo SVG. En el ejemplo, pintamos los círculos con diferentes colores usando el atributo fill.

Aquí está la imagen resultante ( circles.svg):

El capítulo Conceptos básicos del dibujo SVG es un tutorial que analiza cómo dibujar imágenes SVG e incluye artículos sobre unidades y sistemas de coordenadas SVG, formas básicas SVG, datos de ruta SVG, texto SVG, transformaciones SVG básicas, color SVG, rellenos. y trazos en SVG, contenido incrustado SVG y filtros y degradados SVG. Nuestro Tutorial de dibujo SVG explica reglas comunes y pasos estándar para crear SVG desde cero basándose en ejemplos simples. Esperamos que te ayude en tu trabajo o estudio.

Pros y contras del formato SVG

El formato SVG tiene todas las ventajas de los gráficos vectoriales, así como muchas otras ventajas sobre los formatos de imágenes de mapa de bits.

Ventajas

1. Escalado. A diferencia de los gráficos de mapa de bits, las imágenes vectoriales SVG se pueden cambiar de tamaño y ampliar en un navegador sin perder calidad. SVG le brinda la capacidad de escalar indefinidamente.

2. Tamaño de archivo pequeño. En comparación con los mapas de bits, los archivos SVG tienen un tamaño considerablemente más pequeño; permite cargar más rápido la página web con SVG.

3. Programabilidad. Las imágenes SVG se pueden crear, construir y editar con cualquier editor de texto conveniente.

4. Compresión de archivos. Los archivos SVG son XML de texto, por lo que se comprimen bien sin pérdida de datos. SVGZ es el archivo SVG comprimido. Por lo general, es entre un 50 y un 80 por ciento más pequeño que SVG.

5. Accesibilidad. Al ser un archivo basado en texto en la página web, la imagen SVG se vuelve accesible para lectores de pantalla y motores de búsqueda que pueden leer su código. Esto es muy útil para las personas que necesitan ayuda para leer páginas web. Además, los motores de búsqueda pueden buscar e indexar las imágenes SVG.

6. Rendimiento. SVG se puede incrustar en un documento HTML; esto da como resultado un mejor rendimiento de carga para el sitio web.

7. Animación e interacciones. Se puede acceder a SVG desde JavaScript y permite a los desarrolladores crear animaciones e imágenes interactivas.

8. Estilo. Para cualquier elemento de la imagen SVG, se pueden configurar propiedades CSS.

9. Flexibilidad. Las imágenes SVG pueden interactuar con DOM, CSS, HTML y JavaScript.

10. SVG es un estándar abierto y gratuito. SVG 2.0 es una recomendación del W3C y es la versión más reciente de la especificación completa.

11. El fondo SVG es transparente de forma predeterminada, lo cual es muy importante y conveniente para las acciones del diseñador web.

Contras

1. El tamaño del archivo depende del número de detalles. Los detalles y la complejidad de la imagen SVG son proporcionales al número de primitivas geométricas y, por lo tanto, al “peso” del archivo. Conclusión: bajo rendimiento para trabajar con una gran cantidad de elementos.

2. Imágenes no realistas. SVG no es adecuado para dibujar imágenes fotorrealistas. Las imágenes vectoriales todavía no permiten transiciones de color naturales. Pero hoy ese no es su propósito.

3. Navegadores antiguos y compatibilidad insuficiente entre navegadores. SVG es oficialmente compatible con todos los navegadores web principales, excepto Internet Explorer 8 y versiones anteriores. Pero algunos servidores no pueden representar todos los tipos de elementos SVG, por lo que los mapas de bits generados a veces no son como el autor quería.

4. Gráficos que no son 3D. SVG carece por completo de soporte para describir objetos 3D.

5. Complejidad SVG. El código de las imágenes SVG puede ser difícil de entender si eres nuevo en el formato de archivo SVG.

A pesar de estas desventajas, los desarrolladores de navegadores modernos y el equipo de Aspose.SVG afirman que SVG es el futuro de los gráficos de diseño web.

Historia de SVG

SVG fue desarrollado por el World Wide Web Consortium (W3C) y tiene una rica historia que se remonta a finales de los años 1990. En los primeros días de la Web, se desarrollaron rápidamente varios formatos y extensiones HTML. Claramente, sería útil un formato de gráficos vectoriales para la web. El Grupo de Trabajo SVG se creó en 1998 para proporcionar una forma estándar de representar gráficos vectoriales en la web y ofrecer una alternativa a los formatos de imágenes rasterizadas como JPEG y GIF.

En 1998, había seis aplicaciones competidoras en el campo de los gráficos vectoriales web en el W3C: Web Schematics, PGML, VML, Hyper Graphics Markup Language, WebCGM y DrawML que ayudaron a informar lo que eventualmente se convirtió en el formato SVG del W3C. Como resultado, el grupo de trabajo SVG estudió los requisitos generales para un nuevo formato vectorial y decidió no desarrollar ninguna de las aplicaciones existentes sino desarrollar un nuevo lenguaje, teniendo en cuenta las lecciones aprendidas de todo el trabajo anterior. Hubo un acuerdo general entre los desarrolladores sobre el tipo de herramientas de gráficos vectoriales necesarias (curvas Bézier, máscaras, composición) y el grupo de trabajo de SVG se centró en estos puntos en común en lugar de en los conflictos de sintaxis. Básicamente, SVG fue diseñado desde cero, teniendo en cuenta todas las influencias anteriores.

La primera versión de SVG, conocida como SVG 1.0, se publicó como recomendación del W3C el 4 de septiembre de 2001. Esta versión sentó las bases para los gráficos vectoriales en la web e introdujo formas, texto, rutas y transformaciones básicas. El desarrollo de SVG 2.0 comenzó con el objetivo de perfeccionar y ampliar la especificación SVG. SVG 2.0 tiene como objetivo proporcionar nuevas funciones y una mejor integración con otros estándares web. El último borrador SVG 2.0 se publicó el 8 de marzo de 2023.

SVG tardó algún tiempo en ganar popularidad. La compatibilidad con SVG fue relativamente pequeña hasta 2017, cuando la gente empezó a ver los beneficios de usar SVG en los navegadores web modernos.

¿Para qué se utilizan los archivos SVG?

Al ser un formato de gráficos vectoriales que corresponde a los requisitos de desarrollo web recientes, como escalabilidad, rendimiento, programabilidad, etc., SVG encuentra la aplicación principal en la web. Hacer zoom, sin perder calidad, también abre la perspectiva para el uso de SVG en poligrafía.

Algunos casos de uso práctico:

• iconos y logotipos escalables
• ilustraciones sencillas, tablas, diagramas, gráficos, infografías, mapas
• animaciones
• efectos especiales
• creación de interfaces y aplicaciones
• juegos simples
• poligrafía.

El objetivo del equipo de Aspose.SVG es ayudarle a descubrir lo suficiente sobre la tecnología SVG para que pueda producir lo que necesita.

Aspose.SVG ofrece Aplicaciones web gratuitas SVG para convertir archivos SVG o de imagen, fusionar archivos SVG, vectorizar imágenes, generar sprites SVG, codificar datos SVG a Base64 y vectorizar texto. Estas aplicaciones en línea funcionan en cualquier sistema operativo con un navegador web y no requieren instalación de software adicional. ¡Es una manera rápida y fácil de resolver sus tareas de manera eficiente y efectiva!