¿Qué es un archivo SVG (y cómo lo usas)?

Un gráfico vectorial escalable (SVG) es un tipo único de formato de imagen. A diferencia de otras variedades, los SVG no se basan en píxeles únicos para componer las imágenes que ve. En cambio, usan datos “vectoriales”. Al usar SVG, obtendrá imágenes que pueden alcanzar cualquier resolución, lo cual es útil para el diseño web, entre muchos otros casos de uso. En este artículo, haremos la pregunta: ¿Qué es un archivo SVG? Luego le enseñaremos cómo usar el formato. ¡Vamos a eso! Suscríbase a nuestro canal de YouTube ¿Qué es un archivo SVG? Los SVG son elementos gráficos construidos con vectores. Para los no iniciados, un vector es un elemento con una magnitud y dirección específicas. En teoría, puede generar casi cualquier tipo de gráficos que desee usar una colección de vectores. Tome esta foto de un rectángulo azul con un borde negro y una sombra, por ejemplo:

Este es otro tipo de archivo de imagen llamado Portable Network Graphic (PNG), utilizado para ilustraciones y dibujos. Si desea reproducir algo similar usando gráficos vectoriales, debe generarlo con código XML (lo mismo utilizado para Sitemaps). El siguiente código podría lograr el mismo resultado:

En teoría, si toma este código e ingresa en un archivo HTML, verá un conjunto similar de rectángulos PNG, es decir, siempre que el navegador use los archivos SVG. Aunque ambas imágenes se ven iguales, los archivos SVG ofrecen una serie completa de ventajas que otros formatos no tienen. Por ejemplo, los SVG pueden mantener la calidad de la imagen a medida que crecen o baja.
Si continúa aumentando su rectángulo PNG, notará que su calidad comienza a disminuir en algún momento. Con un gráficos basados ​​en píxeles más complejos, la degradación se vuelve mucho más rápida. Sin embargo, los SVG se ven bien en cualquier resolución. ¿Por qué usar un archivo SVG? Muchos sitios web usan formatos como PNG y JPEG casi intercambiables. Sin embargo, los SVG no son tan versátiles. Si intenta recrear una foto compleja con vectores, generalmente llegará con archivos SVG masivos e inutilizables. Sin embargo, el formato SVG es una opción fantástica para un conjunto completo de otros escenarios:
Logotipos de diseño. Debido a que probablemente reutilizará logotipos en sitios web y redes sociales, el uso de SVG resuelve cualquier problema potencial de escalabilidad.
Diagramas. Los SVG se ajustan perfectamente a los diagramas y cualquier otro tipo de ilustración que se basa en líneas simples.
Elementos animados. Puede usar CSS para animar SVG, lo que los convierte en un componente útil en el diseño del sitio, especialmente para micro-interacciones. Diagramas y gráficos. Puede usar SVGS para crear gráficos y diagramas escalables que acepten animaciones.
Debido a que los SVG usan el formato XML, esto los hace e indexables. Los lectores de pantalla pueden interpretar archivos SVG siempre que use las etiquetas de accesibilidad correctas.
Finalmente, los archivos SVG tienden a ser mucho más bajos que los equivalentes de alta resolución. En el papel, esto significa que puede reducir parte del tamaño de su página y reducir el tiempo de carga. Sin embargo, si no tiene la intención de convertir la mayoría de sus imágenes en SVGS, el aumento del rendimiento probablemente será mínimo. Cómo crear un archivo SVG (2 modos) Hay dos enfoques que puede adoptar cuando se trata de archivos SVG. Puede crearlos desde cero o tomar una imagen existente y convertirla. Comencemos con el método manual.
1. Crear manualmente un archivo SVG que cree un archivo SVG generalmente no implica ingresar información vectorial como lo hicimos anteriormente. Este fue solo un ejemplo para mostrar el concepto. En su lugar, cree SVG como cualquier otro gráfico: usar un programa de diseño y guardar el archivo como SVG. Muchas herramientas de diseño gráfico modernos aceptan SVG. Algunas opciones principales incluyen:
Adobe Illustrator, Photoshop, Animated e InDesign

Microsoft Visio
Titular
Cañutillo
Las dos últimas opciones en esta lista son las soluciones de código abierto. Esto los convierte en una excelente opción para experimentar la creación de SVG sin pagar el software premium. De hecho, pueden ser todo lo que necesita. Si no tiene experiencia con el diseño gráfico, crear sus propios logotipos u otros elementos para su sitio web será un desafío. En este caso, la mejor opción será tomar las imágenes existentes y convertirlas en SVG. 2. Convierta las imágenes existentes en SVG, hay muchas herramientas gratuitas que puede usar para convertir imágenes de otros formatos a SVG. La mayoría del software mencionado en la última sección le permite abrir sus imágenes y guardarlas como archivos SVG. Si no desea descargar ningún software, también puede usar herramientas de conversión en línea, y hay muchos servicios a los que puede llamar. Un ejemplo es un vector mágico, que puede usar para convertir todos los tipos de archivos en SVG:
Nos gusta esta herramienta especial porque le muestra una vista previa de su archivo SVG antes de descargarlo. También puede usar un editor Built -in para hacer pequeños cambios y correcciones antes de descargar el archivo:
Por supuesto, esto es solo una opción. Otros servicios de convertidor PNG y JPG en SVG incluyen Convertio e IMG2GO. Deberá investigar un poco para encontrar la solución más adecuada para sus necesidades en nuestra experiencia, la mayoría de los convertidores SVG ofrecen resultados de calidad similares. Para obtener los mejores resultados posibles, el convertidor que usa no importa tanto como las imágenes que seleccione.
Por lo general, es lógico usar el formato SVG para imágenes “simples”, es decir, imágenes con bordes definidos y líneas limpias. Cuanto más compleja sea la imagen, más probabilidades de llegar a un archivo SVG masivo, una tarea de edición manual o animada. Cómo usar un archivo SVG (dentro y fuera de WordPress) Los SVG no son tan difíciles de usar. Agregar un archivo SVG a su sitio web es tan fácil como hacerse cargo de su código y meterlo en un documento HTML donde quiera pasar la imagen. Si usted y los visitantes de su sitio usan navegadores que aceptan archivos SVG (y la mayoría lo hacen en estos días) podrán ver el artículo. La animación de SVGS es, por supuesto, más complicada, porque requiere el uso de CS. Todo, el proceso cambia si usa WordPress. El sistema de gestión de contenido (CMS) no acepta los SVG en el cuadro. Si desea activar el soporte SVG para que pueda cargar archivos directamente a su sitio web, querrá usar un complemento como SAFE SVG:

También es posible activar manualmente el soporte de SVG en WordPress, pero el proceso es más involucrado. En este caso, el uso de un complemento es la opción más segura. Conclusión Adaptar su sitio para usar archivos SVG es mucho más fácil de lo que puede imaginar. El verdadero desafío consiste en el diseño de SVG desde cero o en elegir las imágenes correctas para convertirlas. Afortunadamente, hay muchas herramientas que puede usar para hacer ambas cosas.