Definición de SVG (formato gráfico)
Scalable Vector Graphics (SVG) es un lenguaje abierto basado en XML que permite crear gráficos vectoriales en 2D, tanto estáticos como animados. SVG es un estándar recomendado por la W3C desde septiembre de 2001 y es ampliamente soportado por la mayoría de los navegadores modernos.
A diferencia de los formatos de imagen basados en píxeles como JPEG o PNG, los gráficos SVG se describen mediante ecuaciones matemáticas, lo que permite que se escalen a cualquier tamaño sin perder nitidez ni volverse borrosos. Por ejemplo, un logotipo en SVG se puede mostrar perfectamente tanto en una tarjeta de presentación como en una cartelera publicitaria, sin necesidad de crear múltiples versiones del archivo.
Los archivos SVG pueden crearse y editar con software especializado como Inkscape o Adobe Illustrator, pero también pueden generarse manualmente mediante código XML. Además, SVG se utiliza ampliamente en la web para logotipos, iconos, infografías, mapas interactivos y visualizaciones de datos.
Una de las ventajas clave de SVG es su accesibilidad. Los elementos dentro de las imágenes SVG pueden ser leídos y descritos por herramientas de lectura de pantalla, facilitando el acceso a personas con discapacidades visuales. Además, SVG permite la integración de scripts y estilos CSS, lo que posibilita animaciones y efectos visuales avanzados directamente en el navegador.
Si bien en el pasado su principal competencia fue Flash de Macromedia, SVG ha prevalecido debido a su naturaleza abierta, su mejor compatibilidad y su menor consumo de recursos. Comparado con formatos rasterizados, SVG ofrece ventajas en escalabilidad, rendimiento y edición, aunque puede no ser adecuado para imágenes muy complejas o fotográficas.
Ventajas de SVG:
- Escalabilidad sin pérdida de calidad ni pixelación.
- Edición sencilla mediante texto o programas de diseño.
- Compatibilidad con animaciones y efectos visuales.
- Integración con HTML y CSS.
- Accesibilidad mejorada para lectores de pantalla.
- Tamaño de archivo reducido para gráficos simples.
Desventajas de SVG:
- No es adecuado para imágenes muy detalladas o fotográficas.
- Puede aumentar la complejidad del código en gráficos muy elaborados.
- El rendimiento puede verse afectado con SVGs muy grandes o complejos.
Resumen: SVG
SVG es un lenguaje para la creación de gráficos 2D escalables basado en XML, compatible con la mayoría de los navegadores y que permite tanto gráficos estáticos como animados. Es una alternativa moderna y abierta frente a tecnologías propietarias como Flash.
¿Qué es SVG y cuál es su función principal?
SVG es un lenguaje de marcado para gráficos vectoriales en 2D. Su función principal es permitir la creación de imágenes escalables y de alta calidad, independientes de la resolución y del tamaño del dispositivo en el que se visualizan.
¿Cuáles son las principales características de SVG?
- Basado en XML, lo que facilita su edición y manipulación.
- Permite gráficos estáticos y animados.
- Compatible con los principales navegadores y sistemas operativos.
- Soporta efectos visuales, filtros y animaciones.
- Accesible y fácil de integrar con otros lenguajes web.
¿Cómo se usa SVG en el desarrollo web?
Para utilizar SVG en desarrollo web, se puede insertar directamente el código SVG dentro de una página HTML, o bien enlazar un archivo SVG externo. Es posible crear SVG manualmente o mediante herramientas de diseño, y luego personalizarlo con CSS y JavaScript para añadir interactividad y animaciones.
¿Cuáles son las ventajas de utilizar SVG en el diseño gráfico?
La principal ventaja es la escalabilidad: los gráficos SVG pueden ajustarse a cualquier tamaño sin perder calidad. Además, permiten la reutilización y edición sencilla, ofrecen compatibilidad con efectos visuales avanzados y mejoran la accesibilidad en la web.
¿Es posible exportar gráficos vectoriales SVG desde otros programas de diseño gráfico como Adobe Illustrator?
Sí, programas de diseño como Adobe Illustrator, Inkscape y CorelDRAW permiten exportar gráficos en formato SVG, facilitando la integración de ilustraciones profesionales en la web.
¿Qué navegadores web son compatibles con SVG?
La gran mayoría de los navegadores web modernos son compatibles con SVG, incluyendo Google Chrome, Firefox, Safari e Internet Explorer a partir de la versión 9. No obstante, se recomienda realizar pruebas para asegurar la correcta visualización en todos los navegadores utilizados por los usuarios.
| Formatos de ficheros gráficos y de imagen | Abrir/Cerrar |
| Formatos de gráficos de mapa de bits (rasterizados) | art • bmp • cin • cpt • dpx • exr • fpx • gif • iff, ilbm, lbm • jpeg, jpg • jpg2, jp2 • mng • pbm • pcd • pcx • png • ppm • psd • sgi, rgb, rgba, int, inta, bw • tga, tpic • tiff, tif • raw • wbmp • xbm • xcf • xpm |
| Formatos de gráficos vectoriales | ai • cdr • cgm • dxf • dwg • fh • fla • ps • svg, svgz • swf • sxd • wmf • xalm • xar |
| Formatos rasterizados y vectoriales | eps • pdf • pict, pct, pic • px • pgm • psp |
| Formatos de metaficheros | eps • pict |
Ver formato abierto.
Autor: Leandro Alegsa
Actualizado: 04-07-2025
¿Cómo citar este artículo?
Alegsa, Leandro. (2025). Definición de SVG. Recuperado de https://www.alegsa.com.ar/Dic/svg.php
