En nuestro artículo anterior vimos cómo utilizar software libre para incluir imágenes en formato WebP. Ahora veremos por qué crear imágenes SVG para sitios web.

Uno de los grandes desafíos que enfrentan los diseñadores web es la cantidad de dispositivos con los que la gente se conecta a la red. En aquellos casos en los que la imagen sea meramente ilustrativa, una pérdida de calidad no afecta demasiado. Pero, si es importante para el contenido como en el caso de una infografía, un esquema o una captura de pantalla, es necesario garantizar que el contenido se vea exactamente igual en cualquier tamaño.

Crear imágenes SVG para sitios web

Qué son los gráficos en formato SVG

Para entender la diferencia entre este tipo de gráficos y los utilizados habitualmente en los sitios web, necesitamos explicar dos conceptos; el de gráficos rasterizados y el de gráficos vectoriales.

• Gráficos rasterizados: Este tipo de gráficos se construye con píxeles dispuestos en una cuadrícula. Cada pixel tiene asignado un color específico. La calidad se basa en la resolución que se determina en la cantidad de pixeles por pulgadas. Al aumentar el tamaño la densidad de pixeles disminuye afectando la calidad de la imagen. Esto hace que, para representar imágenes complejas con muchos detalles como una fotografía, en un determinado tamaño se necesiten archivos muy pesados.
• Gráficos vectoriales: Se construyen a partir de objetos geométricos expresados en fórmulas matemáticas. Estos objetos pueden ser líneas, formas y curvas. Al estar expresados en fórmulas matemáticas su tamaño puede alterarse sin perder la calidad y nitidez representando los detalles de manera exacta.

Los gráficos rasterizados son los más adecuados para imágenes muy complejas como fotografías o que incluyan sombreados y degradados de colores suaves. Para su edición requieren de software especializado para la edición fotográfica como El Gimp.

Por su parte, los gráficos vectoriales son mejores para ilustraciones, iconos y logotipos. Si bien existen programas para su edición como Inkscape, también pueden crearse y editarse escribiendo texto.

Los gráficos en formato SVG (Siglas en inglés para Gráficos Vectoriales Escalables) se utilizan fundamentalmente en sitios web y tienen estas características:

• No los afecta la resolución:  Los gráficos en formato SVG se ven con la misma nitidez en cualquier tamaño de pantalla incluyendo aquellas que utilizan tecnología de muy alta resolución.
• Son gráficos vectoriales: Como ya explicamos, este tipo de gráficos se basa en la representación de objetos geométricos construidos a partir de fórmulas matemáticas. Al modificar el tamaño simplemente se aplica la fórmula a los nuevos valores.
• Menor tamaño: El formato SVG no necesita guardar la información para cada pixel. Las fórmulas matemáticas para construirlos se almacenan en un archivo de texto en formato XML comprimido.
• Edición: Como todos los gráficos vectoriales, el formato SVG puede modificarse con un software específico o con un editor de textos.
• Interactividad: A este tipo de gráficos se los puede animar o hacer responder a las instrucciones de los usuarios utilizando código CSS o Javascript.
• Compatibilidad: La mayoría de los dispositivos tienen navegadores que son compatibles con este formato gráfico.

Dijimos que un gráfico SVG se puede crear usando un editor de textos. Abre el editor de textos de tu distribución y pega el siguiente código:

<svg width="200" height="200">
<rect width="100%" height="100%" fill="white" />
<circle cx="50%" cy="50%" r="50" fill="green" />
<text x="50%" y="50%" text-anchor="middle" fill="white">Ubunlog</text>
</svg>

Ahora guárdalo con el nombre de círculo.svg. Si te fijas en tu gestor de archivos verás la miniatura del círculo verde y, si lo abres con un sisualizador de imágenes la verás a tamaño completo.

Donde:

<svg width="200" height="200">

Establece el ancho y el alto en 200 pixeles.

<rect width="100%" height="100%" fill="white" />

Establece que el fondo va a ser un cuadrado blanco que va a ocupar todo el ancho y el alto de la imagen.
<circle cx="50%" cy="50%" r="50" fill="green" />

Ubica al círculo en el medio de la imagen, le asigna un radio de 50 pixeles e indica que el color va a ser verde.

<text x="50%" y="50%" text-anchor="middle" fill="white">Ubunlog</text>

Coloca la palabra Ubunlog en el centro exacto del círculo.

En un próximo artículo veremos los editores gráficos para este formato.