Qué es un archivo SVG y como usarlo en Mac

Los navegadores web modernos y las aplicaciones de imagen tienen la capacidad de escalar imágenes usando cálculos matemáticos, como las curvas de Bezier. Esto es opuesto a los gráficos de mapa de bits fijos, que no escalan bien y a veces ofrecen una apariencia en bloque y pixelada. 

Los gráficos escalables (o «vectores») utilizan descripciones de imágenes basadas en matemáticas. Cuando una imagen se cambia de tamaño, se puede recalcular completamente en el nuevo tamaño sin pérdida visible de calidad. 

La historia de los gráficos escalables se remonta a décadas y se originó en la investigación en informática. A finales de la década de 1980, ocurrió la revolución de la autoedición (DTP -Desktop publishing) y, como resultado, los gráficos escalables se hicieron comunes. 

Se hizo evidente durante ese tiempo que la capacidad de dimensionar los gráficos y el texto a varios tamaños de impresión y pantalla era clave.

Algunas de las primeras aplicaciones DTP incluyeron Aldus Freehand, Adobe Illustrator y otras. Illustrator, por supuesto, sigue vivo en el conjunto de aplicaciones Creative Cloud de Adobe. 

Estas aplicaciones permitieron a los creadores y diseñadores crear gráficos, manipularlos a través de puntos de control y dimensionarlos y remodelarlos a voluntad. Esto hizo que el cambio de imágenes fuera muy fácil en comparación con la edición de imágenes uniformes de mapa de bits que contienen solo una cuadrícula de píxeles. 

Los primeros ordenadores de escritorio, como los de NeXT, también usaban gráficos escalables para sus pantallas en pantalla utilizando tecnologías como Display Postscript. Hoy en día, los sistemas operativos de Apple utilizan una tecnología similar llamada Core Graphics (también conocida como «Quartz«) para calcular imágenes fuera de la pantalla antes de que se muestren. 

Algunas aplicaciones modernas, como Adobe Photoshop, tienen la capacidad de convertir o vectorizar algunos gráficos mapeados en formatos vectoriales, aunque los resultados pueden variar.

Internet y SVG

Cuando Internet se hizo popular por primera vez en la década de 1990, la mayoría de los gráficos en la web eran bitmap. Años después, se hizo obvio que se necesitaban gráficos escalables para la web, debido al uso de grandes pantallas de alta resolución y la capacidad de cambiar el tamaño de las ventanas del navegador. 

Los requisitos de colaboración también exigen la capacidad de manipular gráficos en tiempo real por parte de varias partes. Aquí es donde entran los gráficos vectoriales escalables (SVG). 

A falta de otro estándar existente de terceros para gráficos vectoriales, el Grupo de Trabajo SVG del World Wide Web Consortium (WC3) creó la recomendación de Gráficos Vectoriales Escalables (SVG) en 2001 para su uso en la web. Los archivos SVG contienen descripciones de cómo dibujar y escalar imágenes limpiamente a cualquier tamaño utilizando una paleta de colores completo, e incluso algunas formas de animación. 

El Grupo de Trabajo SVG consideró varias propuestas comerciales para un formato gráfico escalable, pero finalmente terminó decidiendo sobre una especificación abierta. Hay un RFC posterior para usar imágenes SVG en dibujos RFC: RFC 7996.

También hay un nuevo estándar SVG 2, aún no aprobado, en proceso de WC3. Debido a la adopción generalizada de dispositivos móviles, también se introdujeron dos estándares adicionales: SVG Tiny (SVGT) y SVG Basic (SVGB).

SVG se basa en el estándar común de datos abiertos XML, lo que prácticamente garantiza su compatibilidad universal en la mayoría de los sistemas modernos y navegadores web. SVG XML es extremadamente compacto, que consiste principalmente en comandos de dibujo como etiquetas, coordenadas, descripciones de formas y colores. 

La adopción temprana de SVG fue limitada, principalmente debido a la falta de soporte común del navegador. La adopción comenzó a despegar en algún momento alrededor de 2010 a medida que más navegadores comenzaron a incluir la representación SVG. En 2017, la aceptación web de SVG era habitual. 

En las plataformas Windows, la mayoría de las versiones de Internet Explorer anteriores a la versión 8.0 no son compatibles con SVG. 

La razón más obvia para usar SVG es la escalabilidad. Cuando se cambia el tamaño de la ventana de un navegador web, la página web y todos sus elementos componentes cambian de tamaño junto con ella. 

Ser capaz de recalcular y volver a dibujar rápidamente imágenes en cualquier tamaño para adaptarse a una ventana redimensionada mejora enormemente la calidad de la imagen web. 

Los archivos SVG también se pueden comprimir utilizando el formato gzip, lo que hace que se descarguen más rápido cuando se cargan con una página web. Incluso sin compresión, los archivos SVG suelen ser pequeños: muchos archivos SVG utilizados en la web tendrán un tamaño inferior a 10 KB y muchos más de menos de 5 KB. 

Para los sitios que permiten descargas de imágenes, SVG permite que los archivos gráficos se intercambien fácilmente en la web a través de páginas web sin servidores o conversiones adicionales. Los archivos SVG también se utilizan en algunas interfaces de usuario, lo que hace que partes de ellos se escalen limpiamente, por ejemplo, cuando se cambia el tamaño de la ventana de una aplicación de escritorio.

SVG en el Mac

macOS es compatible con SVG, y hay muchas aplicaciones de calidad que pueden editar, exportar, importar y guardar gráficos SVG como archivos de imagen. La mayoría de los archivos SVG tienen una extensión de .svg o .svgz. 

Algunas de estas aplicaciones incluyen (pero no se limitan a):

1. MacSVG
2. Boxy SVG (20 $)
3. Sketch (10 $/mes)
4. OmniGraffle
5. Inkscape
6. Canva ($15/mes)
7. Gapplin (solo para ver)
8. Designer de Affinity 2 (69) $
9. Pixelmator Pro (50 $)
10. Adobe Illustrator (23 $/mes)

Algunas aplicaciones como Sketch pueden importar/exportar SVG, así como otros archivos y formatos que incluyen CSS (web), mapas de bits como PNG, JPG, GIF, TIFF y WebP, archivos Figma (.fig), PDF, archivos Adobe Illustrator y Photoshop, e incluso código SVG sin procesar. Sketch no admite animaciones en formatos gráficos importados como GIF o WebP. 

Algunas aplicaciones de diseño como Autodesk Fusion pueden importar y usar archivos SVG, pero no pueden editarlos ni manipularlos directamente. En general, la mayoría de las aplicaciones CAD no admiten la edición directa de SVG. 

Algunas aplicaciones de terceros, como Save as SVG pueden convertir archivos CAD exportados nativos y convertirlos en archivos SVG con resultados… irregulares (unas veces bien, otras no tanto).

Si utilizas Microsoft 365, tienes soporte limitado para importar SVG y rotar y escalar imágenes a tamaños específicos, pero actualmente no admite la edición directa de SVG completa. Sin embargo, puedes alterar los contornos y rellenos de imágenes SVG, o convertir archivos SVG en Microsoft 365 en formas de Office utilizadas en aplicaciones de 365.

¿Qué aplicaciones de Mac deberías usar para SVG?

Durante años, las aplicaciones SVG Mac gratuitas más populares fueron Inkscape y Boxy SVG (que más tarde se hicieron comerciales). Estas aplicaciones siguen siendo excelentes para la edición y exportación de SVG simple, fácil y directa. 

Sin embargo, todo cambió en 2022 cuando el desarrollador de Arkansas Douglas Ward lanzó macSVG, que ahora es el líder indiscutible para la edición de SVG en Mac. macSVG es fácil de usar e increíblemente rico en funciones. Permite editar imágenes SVG y también permite ver el XML directo de cualquier elemento con un solo clic. 

Las herramientas disponibles incluyen controles de forma, punto y ruta, transformación de forma, texto, imágenes y algunas funciones de conversión de ruta y curva. También puede ver SVG en un archivo XML completo tal como aparecerá cuando se exporte para su uso en la web. 

También se incluye un editor de líneas de tiempo que no es diferente al de Final Cut Pro de Apple, lo que hace que la animación de imágenes SVG sea muy fácil. La animación producida es increíblemente suave y fluida. macSVG también puede generar vídeo HTML5 y código Core Graphics. 

Sketch y Canva son probablemente los editores SVG modernos más populares y ambos tienen un precio razonable. Si eres diseñador gráfico, probablemente ya uses la versión de pago de Adobe Illustrator. 

Pixelmator Pro y Affinity Designer son opciones obvias, pero ambos tienen un precio más alto.

SVG en la web

La web es el caso de uso principal obvio para archivos y código SVG, y hay numerosos entornos web SVG de buena calidad. Algunos de estos son:

1. Snap.svg de Adobe
2. SVG.js
3. SVG.NET
4. Fabric.js para SVG a conversiones de lienzo
5. SVG-Edit (que permite la edición directa de SVG en navegadores web)
6. SwiftSVG (principalmente para iconos y representación de formas simples)

Dado que la mayoría de estos marcos ya proporcionan la mayor parte del código web que necesitarás para mostrar SVG en la web, incluirlos en tu proyecto web reduce el tiempo de desarrollo. 

Querrás probar tu código SVG para tu web en una amplia gama de navegadores en tantas plataformas como sea posible para garantizar la compatibilidad. También hay un SVG Toolkit para Figma de Tobias Strebitzer. 

Una vez que hayas creado los archivos SVG para tu proyecto web, una simple visualización generalmente significa incluir los archivos en el servidor web y hacer referencia a ellos en código o cargarlos dinámicamente durante la carga de la página. La escala en la mayoría de los casos es manejada automáticamente por el navegador, a menos que desees que las imágenes solo se muestren en tamaños específicos. 

En general, SVG es una gran tecnología web, ya que proporciona un único estándar abierto común para renderizar imágenes de cualquier tamaño rápidamente en la mayoría de los navegadores. 

Hay un tutorial SVG gratuito en W3 Schools, y un enorme repositorio de iconos SVG en svgrepo.com, si deseas saber más. También puedes consultar el libro SVG Essentials (en inglés) de J. David Eisenberg para un análisis más profundo.