SVG para desarrolladores: comprensión de los conceptos básicos, ventajas y desventajas

Los gráficos brindan expresiones únicas en los sitios web y también ayudan a los desarrolladores a comunicar sin esfuerzo ideas y conceptos profundos a los usuarios. Es un elemento clave en Internet y desde 1999 se ha vuelto programable, lo que permite una presentación más compleja de imágenes en la web.

Es posible que esté muy familiarizado con el uso de los diferentes tipos de archivos de imágenes de trama: JPG, PNG y GIF. Recordemos un poco. Con soporte para 256 colores (8 bits), GIF (Graphic Interchange Format) es un excelente formato para animación y transparencia, sin incluir la transparencia alfa. El formato PNG (gráfico de red portátil) es mucho mejor, ya que admite más de 16 millones de colores (24 bits) y todo tipo de transparencia, siempre que no necesite animaciones.

El formato de imagen más utilizado en la web JPG o JPEG (Joint Photographic Experts Group), principalmente porque es comprimible, tiene soporte para más de 16 millones de colores; 24 bits u 8 bits por píxel para escala de grises, pero no admite animación ni transparencia. Por lo tanto, JPG es el principal formato de gráficos que utilizan los desarrolladores para fotografías estáticas. No mencioné Bitmap (BMP) ya que normalmente no es un formato de imagen para la web. BMP almacena datos precisos de cada píxel en una imagen, lo que hace que los archivos sean realmente grandes (más de 150 veces el tamaño de los JPG con la misma resolución) y no son ideales para los gráficos de sitios web.

Estos formatos de gráficos dependientes de la resolución son geniales, sobre todo cuando se usan apropiadamente. Sin embargo, todos comparten una deficiencia común, lo que condujo a la introducción de SVG, el único formato de imagen vectorial para la web.

¿Qué es SVG?

Scalar Vector Graphics (SVG) es un formato de imagen basado en el lenguaje de marcado extensible (XML) que describe gráficos bidimensionales como rutas, líneas, círculos, patrones, colores de texto, etc. En una definición más simple, se refiere a un formato de imagen con soporte para dos dimensiones, cuyo comportamiento y existencia completos están controlados por un archivo de texto XML.

Otra característica interesante es su escalabilidad; puede llevar imágenes SVG a cualquier escala sin perder su resolución. Esto se debe a que los SVG representan imágenes con formas, números y coordenadas, no con píxeles como en los formatos de imagen ráster que representan imágenes definiendo de qué color debe pintarse cada píxel.

Veamos cómo puede crear imágenes SVG y algunas de las razones por las que debería considerar usar SVG en sus proyectos.

Cómo crear imágenes SVG

Puede crear imágenes SVG con cualquier editor de texto, aunque el proceso es un poco técnico y requiere algunos conocimientos de diseño y matemáticas, especialmente si está creando formas complejas. Imagina dibujar un avión en un lienzo usando solo líneas de códigos. Sin embargo, hay una manera más fácil, pero usémosla para comprender los conceptos básicos de SVG.

Usamos elementos gráficos SVG para crear imágenes SVG en un editor de texto. El proceso es simplemente insertar sus elementos gráficos dentro de las etiquetas <svg> y </svg>, especificando su coordenada, dimensión, color, etc. Por ejemplo, el elemento <rect> se puede usar para dibujar un rectángulo como se ve en la siguiente ejemplo.

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="300" width="300">
<rect width="300" height="300" stroke-width="1" fill="rgb(0,0,255)" stroke="rgb(0,0,0)"/>
</svg>

El código anterior dibujará un rectángulo azul de 300x por 300px en la esquina superior izquierda de su navegador si se guarda como archivo .svg y se abre con un navegador. Ahora, puede que se pregunte por qué tenemos dos alturas y anchuras en el documento. Comprendamos todo el código para ver por qué. Como se mencionó anteriormente, su código SVG debe estar escrito dentro del elemento raíz (<svg> y </svg>) para notificar a su navegador cómo interpretar esas líneas.

Al igual que en HTML, SVG requiere una declaración de espacio de nombres en el elemento raíz. En el ejemplo anterior, proporcionamos el parámetro xmlns "http://www.w3.org/2000/svg" y la versión 1.1 de SVG recomendada por W3C dentro del elemento raíz. La dimensión dentro del elemento raíz se denomina punto de vista SVG, que es la ventana o lienzo a través del cual aparecería la imagen SVG dibujada dentro de la etiqueta raíz. El punto de vista debe tener al menos la misma dimensión que todos sus objetos SVG antes de que puedan aparecer en su navegador.

La segunda línea es más fácil de entender. El elemento <rect>, que se usa para dibujar rectángulos, incorpora los parámetros del rectángulo propuesto comenzando con la dimensión. El ancho del trazo describe el grosor de la línea, mientras que los dos modelos de color RGB informan al navegador de qué color rellenar el rectángulo y la línea, respectivamente. Eso es bastante simple, ¿verdad?

Ahora, podemos mover el rectángulo dentro de la página declarando un valor para x e y como este:

<rect width="300" height="300" stroke-width="1" fill="rgb(0,0,255)" stroke="rgb(0,0,0)" x=”15” y=”20”/>

Por supuesto, no olvidaremos aumentar la dimensión del punto de vista para acomodar el espacio adicional que esto requeriría.

La forma más sencilla de crear imágenes SVG es utilizando herramientas de dibujo como Adobe Illustrator, Inskape y Sketch. En lugar de crear desde cero, algunas bibliotecas de JavaScript como Bonsai.js y D3.js son buenas fuentes de imágenes SVG si busca iconos, formas complejas, etc.

Adición de imágenes SVG

Uno de los beneficios de usar imágenes SVG es la facilidad de integrarlas con su diseño. Simplemente haga referencia a ellos en el atributo src de una etiqueta img. Esto debería hacer referencia al archivo .svg guardado en la carpeta de su sitio web de esta manera:

<img src='example.svg'>

Alternativamente, puede insertar los códigos SVG en su documento HTML, con las etiquetas <svg></svg> comenzando y terminando el código como ya se mencionó anteriormente.

También puede consultar la imagen SVG en su CSS para una imagen de fondo como esta:

.main-header {
background-image: url(example.svg);
}

Beneficios de usar SVG para desarrolladores

No se puede exagerar la necesidad de SVG en sus proyectos web posteriores teniendo en cuenta los requisitos gráficos actuales de Internet. Además de la innumerable cantidad de dispositivos nuevos con resolución y tamaños de pantalla potentes, los sitios web ahora cuentan con tanta interactividad que, sin tener un control total de los gráficos, podría ser difícil ofrecer sitios web de nivel profesional.

Algunos de los beneficios incluyen:

Escalabilidad y capacidad de respuesta

Como formato de imagen que no depende de la resolución, los SVG se pueden escalar indefinidamente, sin pixelarse. Esto le permite, como desarrollador, entregar imágenes gráficas de primer nivel a todos los usuarios, independientemente de la potencia de resolución y el tamaño de pantalla de sus dispositivos. Puede combinar diferentes trazados, formas y elementos de texto para crear impresionantes imágenes que serán nítidas y nítidas en todos los tamaños.

Esto no está disponible en ninguno de los formatos de imagen ráster con dimensiones fijas, simplemente porque nunca tendrían suficientes datos para llenar todos los espacios cuando se escalan extremadamente. SVG calcula la distancia entre los puntos para mantener las rutas constantemente conectadas para que la imagen permanezca nítida en cualquier escala.

Extremadamente flexible y admite animación.

A diferencia de las imágenes rasterizadas, que entregan la copia final de una imagen, las imágenes SVG son completamente editables ajustando los códigos usando un editor de texto o herramientas de dibujo especiales. Usando nombres de clase o ID de sus elementos SVG, puede diseñar o animar sus imágenes SVG usando CSS. La animación de imágenes SVG también es posible con Web Animation API, SMIL o WebGL.

Lo que es más importante, puede integrar sus imágenes SVG con otras tecnologías y documentos destacados de plataformas web abiertas. Los SVG se pueden escribir con JavaScript y diseñar con CSS como HTML.

Tamaño de archivo pequeño y compatible con SEO

Al existir en formato de texto, las imágenes SVG mejoran la accesibilidad de un sitio web, lo cual es un gran activo en el ranking de páginas. Más allá de eso, los motores de búsqueda pueden indexar el texto del elemento SVG y eso permite a los usuarios encontrar su sitio web usando palabras clave en su archivo SVG.

SVG se carga mucho más rápido ya que no tiene un archivo para descargar y sin necesidad de una solicitud HTTP. Mejorar la resolución de un archivo de imagen de trama significa aumentar la cantidad de puntos (píxeles). Esto aumentará el tamaño de la imagen, lo que retrasará el tiempo de carga de su sitio web. Esto está lejos de ser el caso cuando usa SVG. Como una imagen creada usando un conjunto de instrucciones y coordenadas, los tamaños de archivo SVG son increíblemente pequeños (cuando están optimizados) en comparación con cualquier otro tipo de archivo de imagen. Esto da como resultado un tiempo de carga más rápido, un mayor rendimiento de la página, una clasificación más alta en los motores de búsqueda y, al mismo tiempo, mejora la experiencia del usuario. Para obtener más información al respecto, visite SEO Consultant London

SVG tiene su propio modelo de objeto de documento

SVG existe como un documento separado, se considera que tiene su propia estructura y se ubica dentro del DOM normal. Esta reputación es crucial para el atributo viewBox, que nos permite crear un punto de vista de cualquier dimensión, dibujar imágenes en diferentes tamaños de lienzo y mostrarlas sin actualizar las propiedades SVG.

SVG es el formato de archivo de imagen del futuro

Sin la llegada de dispositivos más potentes con una resolución de pantalla increíblemente magnífica, los desarrolladores no tendrían que lidiar con los abrumadores dolores de cabeza de optimizar imágenes para diferentes dispositivos. Pero esto no va a ser más fácil en unos años a partir de ahora, junto con el creciente hambre de una mayor interactividad de los sitios web.

De alguna manera, manejar estos desafíos ofreciendo diferentes imágenes para que coincidan con la dimensión del punto de vista de los usuarios no es rentable. Y por el bien de la sustentabilidad del negocio al ahorrar ancho de banda, dinero y mejorar la experiencia del usuario, los esfuerzos para pasar al formato de imagen SVG inevitablemente se están convirtiendo en una prioridad principal. Hay una comunidad creciente de seguidores de SVG.

Antes de la introducción de SVG 1.1 (segunda edición) por parte del W3C el 16 de agosto de 2011, que posiblemente se esté revisando para una versión más nueva, SVG 1.0 y 1.1 (primera edición) ya estaban cambiando la forma en que manejamos las imágenes en Internet. Esta es una promesa de algo que vale más que el formato de imagen raster normal, que sigue siendo muy útil en nuestro estado actual de programación web. SVG no es el mejor formato de imagen en todos los casos. Se espera que las versiones posteriores de SVG aborden algunas de las desventajas de SVG; que se discutirá más adelante en este artículo.

Cuándo usar el formato de imagen SVG

Por supuesto, los formatos de imagen que dependen de la resolución siguen siendo los mejores para fotografías y otras imágenes bien detalladas. Aquí hay una lista de casos comunes donde los formatos de imagen SVG son los mejores.

1. Logotipos e iconos
2. Imágenes interactivas como tablas, gráficos, mapas, infografías
3. animaciones
4. Interfaces de aplicaciones
5. Diagramas simples e ilustraciones.
6. Efectos especiales como pegajoso o transformación de formas.
7. Obras de arte de baja intensidad y gráficos simples.

Inconvenientes de SVG para desarrolladores

SVG no es compatible con todos los navegadores: los navegadores antiguos tratan los SVG de la misma manera que un Windows XP obsoleto trataría las unidades flash o su Canon EOS 5DSr cuando intenta conectarlos. En pocas palabras, SVG no funciona en navegadores antiguos; IE8 y menor. Sin embargo, teniendo en cuenta que los navegadores heredados no son realmente parte de ninguna causa futura, junto con el hecho de que solo un puñado de personas todavía los usan, no es una razón importante para no usar SVG.

SVG no admite tantos detalles: al ser una combinación de rutas y puntos, SVG carece del marco para mostrar tantos detalles como los formatos de imagen ráster basados ​​en píxeles. SVG no funciona con nada capturado con una cámara. Por lo tanto, las fotos y otras formas de gráficos con tantos detalles se muestran mejor con formatos de imagen de trama debido a que admiten una mayor densidad de colores.

Comprender el código SVG: si bien se puede considerar que los desarrolladores saben cómo usar varios lenguajes de programación web, aumentar esta carga ha resultado ser un desafío. El patrón de código SVG no es realmente difícil ni totalmente diferente de los lenguajes de programación web. Pero crear o manipular imágenes llamativas requiere algo de esfuerzo. Esto no es en lo que todos los desarrolladores querrían invertir mucho tiempo cuando las imágenes de mapa de bits son útiles y no requieren esfuerzo para incrustarse.

Conclusión

El comportamiento de los gráficos en un sitio web en respuesta a su amplia gama de usuarios es un aspecto importante del desarrollo web actual. Y el formato de imagen SVG es la gran solución, en lugar de representar varios tamaños de imagen, como suele verse en nuestros diseños actuales. Esto se debe a que los navegadores calculan cómo se debe representar la imagen mediante un conjunto de instrucciones que garantizan imágenes claras y nítidas a cualquier escala.

Las imágenes de mapa de bits siguen siendo las mejores para imágenes muy detalladas, como fotografías, mientras que las imágenes SVG se utilizan para imágenes menos detalladas, como iconos, logotipos, gráficos, infografías, etc. creación de imágenes SVG y bibliotecas en línea para iconos y formas populares. La codificación solo debería ser necesaria cuando desee manipular sus imágenes SVG.

Háganos saber cómo usa SVG y sobre otros consejos geniales que no se comparten aquí.