Saltar al contenido

¿Qué es un Archivo o Extensión SVG?

Fichero SVG

Tabla de contenidos


Formato SVG

Las imágenes que vemos en internet pueden tener diferentes formatos. Cada formato de imagen tener sus propias características y estas influyen en la calidad de la imagen. Algunos formatos permiten mayores compresiones de la imagen sin degenerar en pérdida de calidad. Uno de estos tipos de imágenes son las imágenes vectoriales.

Una imagen vectorial está formada por componentes individuales. Estos componentes pueden ser polígonos, segmentos, arcos o muros. Dentro de los formatos de imágenes vectoriales tenemos el formato SVG. Si quieres conocer cuáles son las características de un archivo SVG, te invito a que continúes leyendo. Ya comenzamos.

Características del archivo SVG

Los gráficos vectoriales escalables SVG (del inglés Scalable Vector Graphics), es un formato para gráficos vectoriales en dos dimensiones. Estos archivos pueden ser gráficos estáticos o animados.

Estos archivos están compuestos por código en formato de lenguaje de marcado extensible XML. Es decir, los archivos en formato SVG se definen a partir de código XML. Como consecuencia, es posible comprimir, indexar y codificar dichos archivos.  Además, ya que están formadas por código XML, es posible abrir y editar estas imágenes con editores de texto, así como con editores de imágenes.

Dado que los archivos SVG pueden ser manipulados por CSS y JavaScript, este lenguaje es usado para representar y dibujar imágenes y logotipos. El objetivo de este tipo de gráficos es que puedan ser renderizados y representados por los navegadores web.

Debido al incremento del uso de los archivos SVG, la mayoría de navegadores actuales pueden manejar este formato sin necesidad de complementos externos. Estos gráficos pueden ser interactivos de cara al usuario. Esto se debe a que están formados por vectores y no por mapas de bits como en otros formatos. Además, pueden ser modificados por código JavaScript o CSS. Este nivel de interactividad entre el archivo SVG y el navegador, permite incluso escalar el archivo infinitamente sin pérdida de calidad de ningún tipo.

Diferencia entre fichero de mapa de bits, y fichero SVG.

Los archivos SVG admiten elementos geométricos vectoriales, imágenes en forma de mapas de bits y cadenas de texto.

Historia de los archivos SVG

En el año 1966, Chris Lilley redactó un conjunto de directrices con el fin de crear un formato estándar de archivos para gráficos vectoriales. Este documento fue enviado a la W3C, organismo encargado de regular los estándares que se aplican a la World Wide Web WWW y sentó las bases para la creación del formato SVG.

Otras empresas también remitieron sus propuestas a la W3C para la estandarización de un formato de gráficos vectoriales. Para la creación del formato SVG se tomaron en cuenta dos recomendaciones de Microsoft y Adobe respectivamente.

En la primera se tenía como referencia el formato VML desarrollado por Microsoft, y en segundo lugar el formato PGML creado por Adobe en unión con IBM, Netscape y SUN. Una vez que fue creado el formato de archivos SVG, Microsoft eliminó el formato VML y Adobe lo incluyo en muchos de sus productos como Illustrator y ASV.

Formato del código de un archivo SVG

Para poder comprender de mejor manera la codificación de un archivo SVG es necesario tener algunos conocimientos de HTML y XML.

En primer lugar, el código debe llevar etiquetas de apertura y cierre. Dentro de estas etiquetas se incluyen diferentes atributos. Ya que el archivo SVG emplea el código XML, es obligatorios especificar un namespace para que el navegador pueda interpretarlo correctamente.

Atributos genéricos de un archivo SVG

Entre los atributos que se incluyen para un archivo SVG, hay algunos que son de uso general para cualquier tipo de figura que se quiera construir. Estos atributos se usan para dar forma y color a la figura.

  • Atributo color: Este atributo se usa para especificar el color de la figura. Puede ser especificado nominalmente (yellow, blue, pink, salmon, tomato, red, orange, lightgreen etc…). También se puede especificar en codificación hexadecimal (#ff0000, #ffff00, etc…)
  • Contorno: La definición del contorno de la figura es común para todas. El grosor del contorno, así como el color pueden ser especificados con los atributos stroke-width y stroke.
  • Relleno: El relleno de cualquier tipo de figura puede ser modificado con el atributo fill.
  • Opacidad: El nivel de transparencia de las figuras también puede ser cambiado con el atributo opacity. El valor de este puede variar entre 0 (totalmente transparente) o 1 (opaco).

Tipo de componentes de los archivos SVG

En las imágenes SVG pueden ser representadas cualquier tipo de figura geométrica bidimensional. Cada una tiene sus propias características y maneras de representación basadas en su forma geométrica. A continuación, las más usadas y simples.

Líneas

Para representar una línea solo son necesarios dos puntos de esta línea. La representación vectorial de dos puntos es de la forma (x1, x2) y (y1, y2). Para dibujar una línea en un archivo SVG se escribe

<line x1="1" y1="2" x2="3" y2="-2"/>

Rectángulos

En un archivo SVG un rectángulo se representa como la prolongación lineal de un punto hacia dos direcciones en un ángulo recto. De esta manera solo es necesario especificar el punto de origen, el ancho y la altura del rectángulo.

<rect x="0" y="0" height="10" width="5"/>

Círculo

Un círculo puede ser representado especificando un radio y el punto central de dicho círculo. Para este punto deben darse las coordenadas (x,y).

<circle r="10" cx="0" cy="0"/>

Elipse

En el caso de la elipse, es necesario indicar los dos radios focales de dicha figura y un punto central.

<ellipse cx="0" cy="0" rx="6" ry="2"/>

Texto

Además de estas figuras básicas, también puede ser adicionado texto dentro del archivo SVG. El texto será añadido teniendo como referencia un punto base. Es posible, además, especificar ciertas propiedades del texto como el tipo, tamaño y estilo de la letra.

<text x="0" y="0" font-size="23" font-style="italic" >

Hola mundo

</text>

Animaciones

Es posible agregar animaciones en un fichero con formato SVG. Para esto es necesario utilizar algún lenguaje de programación que soporte el navegador, como JavaScript o Python. Uno de los tipos de animaciones que pueden ser agregadas son las animaciones Canvas.

Los navegadores más populares del mercado soportan el renderizado de ficheros SVG de manera nativa. Esto quiere decir que no requieren complementos externos para poder dar tratamiento a este tipo de ficheros.

  • Mozilla Firefox: Este navegador soporta ficheros SVG desde su versión 1.5. Inicialmente, Firefox consumía mucho recurso del procesador para procesar un archivo SVG.  A partir de la versión 3.5 esto fue mejorado y actualmente el procesamiento y representación de los archivos SVG no es tan pesada.
  • Internet Explorer: Este navegador dio soporte a los archivos SVG de manera nativa a partir de su novena versión. Algo tarde realmente.
  • Opera: Este navegador implementa soporte para SVG nativamente y con un bajo consumo de recursos. Además, es posible cargar imágenes SVG de manera externa con la instrucción <image> o <use>.
  • Google Chrome: El navegador estrella de Google implementa soporte nativo SVG desde su primera versión. Esto se debe a que este navegador emplea la plataforma para aplicaciones WebKit.
  • Microsoft Edge: Este navegador también soporta SVG desde su primera versión, incluso en la compilación 10049 de Windows 10.

Herramientas de edición para archivo SVG

Existen muchas herramientas que soportan la edición de archivos SVG. Entra las herramientas de software libre podemos encontrar Inkscape. Este es un editor de gráficos vectoriales de código abierto que permite crear todo tipo de figuras y formas geométricas.

Además, la suite LibreOffice cuenta con la herramienta Draw dedicada exclusivamente al trabajo con gráficos vectoriales, incluyendo el formato SVG. En internet también podemos encontrar varios editores en línea. Este es el caso de Vector Paint, Draw SVG y svgreal.


Artículos relacionados que te podrían resultar interesantes: