Definición de Scalable Vector Graphics (formato)
Scalable Vector Graphics, conocido como SVG, es un formato de archivo vectorial basado en XML que se utiliza para describir gráficos, ilustraciones, iconos y animaciones en la web. Al ser un formato vectorial, SVG permite que las imágenes se escalen a cualquier tamaño sin perder calidad de imagen, a diferencia de los formatos rasterizados como JPEG o PNG, que se basan en píxeles y pueden pixelarse o distorsionarse al redimensionarse.
Los archivos SVG se definen mediante código XML, lo que permite editarlos fácilmente con editores de texto o herramientas gráficas. Por ejemplo, un simple círculo en SVG puede describirse con unas pocas líneas de código. Además, SVG admite transparencia, gradientes, filtros, capas y efectos avanzados, así como animaciones y transiciones interactivas utilizando CSS y JavaScript.
Ventajas de SVG:
- Escalabilidad: Las imágenes SVG pueden ampliarse o reducirse sin perder definición, lo que las hace ideales para logotipos, iconos y gráficos responsivos.
- Ligereza: Los archivos SVG suelen ser de menor tamaño que los equivalentes rasterizados, lo que mejora la velocidad de carga de los sitios web.
- Edición sencilla: Pueden editarse tanto con programas gráficos como con editores de texto.
- Interactividad: Es posible animar y manipular gráficos SVG mediante CSS y JavaScript, permitiendo experiencias dinámicas y personalizables.
- Accesibilidad: El contenido SVG es accesible para lectores de pantalla y puede ser indexado por motores de búsqueda.
- Compatibilidad: Es compatible con la mayoría de los navegadores modernos.
Desventajas de SVG:
- No es adecuado para imágenes complejas o fotografías, donde los formatos rasterizados como JPEG o PNG son más eficientes.
- El rendimiento puede verse afectado si se utilizan SVGs muy complejos o con muchos elementos en dispositivos con recursos limitados.
Comparación con otros formatos:
- A diferencia de PNG o JPEG, SVG no pierde calidad al escalarse.
- En comparación con Canvas de HTML5, SVG es más adecuado para gráficos estáticos o animaciones simples, mientras que Canvas es preferible para gráficos dinámicos y renderizado en tiempo real.
Ejemplo de uso: Un logotipo de empresa en formato SVG puede mostrarse perfectamente nítido tanto en una tarjeta de presentación como en una pantalla gigante, sin necesidad de crear múltiples versiones del archivo.
Para más información leer: svg.
¿Qué es Scalable Vector Graphics?
Scalable Vector Graphics es un formato de gráficos vectoriales basado en XML que permite la creación de imágenes escalables, ilustraciones y animaciones interactivas para la web y otros entornos digitales.
¿Cuál es la diferencia entre gráficos vectoriales y gráficos rasterizados?
Los gráficos vectoriales, como SVG, se crean a través de objetos matemáticos (líneas, curvas, polígonos) que pueden escalarse sin perder calidad. Los gráficos rasterizados, como JPEG o PNG, están compuestos por píxeles, por lo que pierden calidad al ser ampliados.
¿Para qué se utiliza Scalable Vector Graphics?
Scalable Vector Graphics se utiliza para crear gráficos escalables que se adaptan a diferentes tamaños de pantalla y dispositivos. Es ideal para iconos, logotipos, diagramas, gráficos interactivos y animaciones web.
¿Cuáles son algunas de las ventajas de Scalable Vector Graphics?
Entre sus ventajas destacan la escalabilidad sin pérdida de calidad, la posibilidad de cargar y renderizar más rápido que los gráficos rasterizados, la accesibilidad para personas con discapacidades visuales y su fácil integración con tecnologías web modernas.
¿Qué programas se pueden utilizar para crear y editar Scalable Vector Graphics?
Algunos programas populares para crear y editar SVG son Adobe Illustrator, Inkscape, Sketch, Figma y editores de texto para modificar el código XML directamente.
¿En qué navegadores web son compatibles Scalable Vector Graphics?
Scalable Vector Graphics es compatible con la mayoría de los navegadores web modernos, incluyendo Google Chrome, Firefox, Safari y Microsoft Edge.
| 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 |
Autor: Leandro Alegsa
Actualizado: 04-07-2025
¿Cómo citar este artículo?
Alegsa, Leandro. (2025). Definición de Scalable Vector Graphics. Recuperado de https://www.alegsa.com.ar/Dic/Scalable_Vector_Graphics.php
