Archivo SVG: ¿Qué es y cómo lo abro?

Un archivo SVG es un archivo de gráficos. Contiene imágenes en formato de texto basado en XML. Eso significa: un archivo SVG no consta de píxeles, sino de una descripción matemática de los objetos.

¿Imágenes hechas a partir de texto? ¿Como puede ser? En realidad, es bastante simple: en el caso más simple, funciona así: el texto contiene instrucciones que describen una figura geométrica, por ejemplo, " Dibuja un círculo con centro X y radio Y ".

¿Qué es un archivo SVG?

Un archivo SVG es un gráfico descrito por texto. El truco aquí: debido a que toda la información de la imagen está disponible como una descripción, los programas pueden ampliar y reducir tales "imágenes" como se desee , y sin pérdida de calidad .

Dichos gráficos también se denominan gráficos vectoriales , lo que se debe a que los elementos se describen mediante vectores, entre otras cosas. La abreviatura SVG significa Gráficos vectoriales escalables .

Archivo SVG típico: los gráficos vectoriales generalmente se pueden reconocer sin conocer la extensión del archivo; tienen el aspecto típico y "suave", a menudo combinado con degradados de color. Faltan detalles -como se verían en una foto-

Ventajas en comparación con los gráficos de trama

Desafortunadamente, este no es el caso con formatos raster como PNG y JPG. En cierto punto, los bordes de los gráficos de píxeles aparecen dentados y pixelados, lo que significa que los bordes se vuelven visibles.

No puede mejorar dichos gráficos de píxeles o de trama sin perder una valiosa calidad de imagen. Entonces, la principal ventaja de un archivo SVG es su escalabilidad ilimitada.

Pero hay otra ventaja: debido a las formas en su mayoría simples, el tamaño del archivo sigue siendo pequeño: los archivos SVG a menudo simplemente ahorran espacio de almacenamiento.

Este es un ejemplo de cómo se comportan los gráficos vectoriales y rasterizados (=gráficos de píxeles o mapa de bits) cuando se acerca el zoom:

Gráficos vectoriales (arriba) y gráficos de píxeles o mapas de bits (abajo)

Desventajas en comparación con los gráficos de trama

Las desventajas son obvias: dado que cada objeto de un gráfico vectorial debe describirse individualmente, los gráficos detallados son posibles, pero por un lado generan una enorme carga informática al editar y por otro lado conducen a archivos muy grandes.

Puede verificar esto fácilmente al vectorizar una foto (basada en píxeles) . Dependiendo de la imagen original, la cantidad de píxeles y vectores a veces es extremadamente alta, al igual que el tamaño del archivo.

Áreas de aplicación de un archivo SVG

Debido a sus propiedades, los archivos SVG están predestinados a una serie de casos de uso. Aquí están los más importantes:

Logotipos

Los logotipos de las empresas casi siempre se diseñan como un archivo vectorial. Estos son fácilmente escalables y mantienen un tamaño compacto.

Gráficos

Los SVG son perfectos para gráficos y cualquier otro tipo de ilustración que se base en líneas simples. Difícilmente puede "empaquetar" puntos de referencia, gráficos, etc. de una manera más compacta y de alta calidad.

Elementos animados

También puede usar CSS para animar archivos SVG. Hay un buen mini taller sobre esto en Mediaevent .

¿Cómo abrir un archivo SVG?

La manera más fácil y rápida de abrir un archivo SVG para verlo pero no editarlo es con un navegador web moderno como Chrome , Firefox , Edge o Internet Explorer . Casi todos estos admiten la representación SVG. Muchas versiones de Windows ya abren archivos SVG automáticamente con el navegador Edge.

Origen de los gráficos SVG

Los archivos SVG se desarrollaron como el formato estándar para mostrar gráficos vectoriales en la web. El formato SVG es un estándar abierto desarrollado en el marco del W3C (World Wide Web Consortium), en el que Adobe juega un papel importante.

Por lo tanto, las imágenes SVG también se pueden crear y exportar directamente desde los programas Adobe Creative Suite, como Illustrator y GoLive.

La alternativa gratuita más conocida a Illustrator se llama Inkscape y está disponible para Windows, macOS y Linux.

Además, casi todos los programas vectoriales comunes pueden manejar archivos SVG. Los más conocidos incluyen Corel Draw, Affinity Designer o Microsoft Visio

Por último, pero no menos importante, muchos visores de imágenes como Irfanview o Xnview MP muestran archivos SVG. Pero a veces tiene que descargar un complemento por separado para verlo.

También puede abrir archivos SVG con cualquier editor de texto, más sobre eso en un momento. Sin embargo, esto no suele tener sentido, ya que desea ver los gráficos vectoriales.

Lista de programas que abrirán archivos SVG

Aquí hay una lista de programas que pueden abrir y editar gráficos vectoriales. La lista está ordenada alfabéticamente.

• Adobe InDesign
• Illustrator Adobe
• Adobe Photoshop
• CorelDraw _
• Gimp
• InkScape
• Irfanview (con complemento)
• LibreOffice
• Visión de Microsoft
• OpenOffice.org
• Diseñador de afinidad Serif
• Editor de afinidad Serif
• Affinity Serif
• Xnview MP
• adicionalmente cualquier navegador (solo visualización)
• adicionalmente cualquier editor de texto (solo código)

Un archivo SVG en detalle

Como se mencionó al principio, los archivos SVG contienen instrucciones que describen con precisión una forma o figura.

Las instrucciones se dividen en etiquetas individuales similares a una descripción XML o lenguaje de programación, por lo que también puede abrir archivos SVG con cualquier editor de texto y ver y manipular las instrucciones.

Pero, ¿cómo son exactamente estas instrucciones? Aquí hay un ejemplo:

“Lenguaje SVG” (Fuente: Wikipedia)

Los comandos que se muestran arriba producen la siguiente imagen. Como ejemplo, tome el círculo naranja que atraviesa la siguiente línea

<circle cx="125" cy="125" r="75" fill="orange" />

Convierta gráficos (píxeles/ráster/mapa de bits) en un archivo SVG

Si tiene un archivo basado en píxeles, por ejemplo, JPG, PNG o GIF, básicamente también puede convertirlo en un archivo SVG.

El problema con esto: Dependiendo de la plantilla, el resultado varía entre "considerable" e "inutilizable". La razón es que no tendría sentido convertir cada píxel individualmente en un vector; para eso están los formatos de píxel.

Entonces, el software intenta reconocer patrones en los píxeles y transformarlos en vectores. Esto funciona bastante bien con un cielo nublado, pero termina en fiasco con el cachorro labrador negro.

Imagen vectorizada (derecha) de una plantilla de mapa de bits (izquierda)

Aún así, vale la pena intentarlo, ya que hay una serie de herramientas de vectorización gratuitas en línea. Regla general: cuanto más grande sea el archivo de la plantilla, mejor será el resultado.

Imagen vectorizada (derecha) basada en una plantilla de píxeles de alta resolución (izquierda). El archivo SVG se creó con vectorizer.io, que creemos que es el mejor vectorizador, pero desafortunadamente tiene que pagarse.

Herramientas de vectorización en línea

Los siguientes servicios pueden convertir gráficos e imágenes a un archivo SVG directamente en línea

• Vectorizer.io (de pago)
• Autotracer.org
• Vectorización.org
• Pngtosvg.com

Por cierto: muchos de los programas mencionados anteriormente también tienen funciones que se pueden usar para vectorizar gráficos de píxeles.

Cosas que debe saber sobre los archivos SVG

A pesar de su antigüedad (que se remonta a los primeros días de las computadoras en la década de 1960), los archivos SVG son excelentes para gráficos web. Debido a la descripción con texto simple, los archivos compactos son posibles, los gráficos SVG también juegan un papel con los sprites CSS.

Algunos juegos de computadora usan SVG para guardar partidas guardadas. Uno de los más conocidos es GTA2. Debido a la naturaleza del texto, dichos archivos también se pueden abrir fácilmente con cualquier editor de texto como se describe al principio.