Los archivos de Gráficos Vectoriales Escalables (SVG) son fantásticos para el desarrollo o el diseño web. Este tipo de imágenes no se pixelan si se amplían o reducen, y suelen ser más ligeras que opciones como los JPEG. Sin embargo, abrir y editar archivos SVG puede ser un reto sin las herramientas adecuadas.
Aprender a abrir un archivo SVG es esencial si quieres editarlo antes de subirlo a WordPress. Algunas herramientas te permitirán tanto abrir como editar archivos SVG, lo que significa que podrás crear los gráficos que necesitas para tu sitio web.
En este artículo, hablaremos brevemente de lo que son los archivos SVG. Repasaremos por qué son tan populares y hablaremos de cuándo deberías utilizarlos. Luego te mostraremos cómo convertir archivos a SVG y cómo abrirlos. ¡Vamos a ello!
¿Qué Es un Archivo SVG?
Un vector es un objeto definido por uno o más puntos conectados entre sí. Cuando combinas suficientes vectores, puedes crear prácticamente cualquier tipo de gráfico que quieras.
Un archivo SVG es una colección de datos vectoriales reunidos en formato XML. Por ejemplo, este logotipo de Kinsta.
A diferencia de un PNG o un JPEG, esa imagen es todo vectores en lugar de píxeles. Este es el aspecto de ese mismo archivo si lo abres con un editor de texto.
La mayor parte de los datos de ese archivo se encuentran dentro del elemento path. Este elemento ayuda a definir vectores en cualquier dirección. Añadimos un poco de color a las líneas utilizando CSS.
Si intentas abrir un archivo JPEG o PNG con un editor de texto, lo único que verás es un galimatías. Sin embargo, puedes tomar otro formato de imagen y convertirlo en SVG traduciendo esos píxeles en rutas o vectores. Te mostraremos cómo funciona en un minuto, pero por ahora, vamos a discutir por qué y cuándo utilizar archivos SVG.
Por qué Utilizar un Archivo SVG
Un archivo SVG se utiliza para cualquier tipo de gráfico que puedas necesitar escalar. Normalmente, si intentas modificar diferentes tamaños de imagen, te encontrarás con problemas de pixelación. Los archivos SVG, en cambio, son infinitamente escalables porque estás trabajando con vectores en lugar de píxeles.
Como puedes ver, la imagen no se distorsiona ni se pixela en absoluto al cambiar su tamaño. Eso hace que los archivos SVG sean perfectos para logotipos, ilustraciones, imágenes destacadas, gráficos en línea y mucho más. También significa que puedes reducir el tamaño del archivo de imagen para acelerar tu sitio de WordPress, sin comprometer la calidad.
Aquí tienes un rápido vistazo a algunos de los archivos SVG que utilizamos en nuestro sitio web, para que tengas una referencia de los tipos de gráficos de los que hablamos.
Además de ser infinitamente escalables, los archivos SVG ofrecen otras muchas ventajas, entre las que se incluyen
- Están indexados por Google. Los archivos SVG aparecen en las búsquedas de imágenes de Google, lo que significa que no suponen ningún inconveniente desde el punto de vista de la optimización de los motores de búsqueda (SEO).
- Tienen un tamaño de archivo relativamente pequeño. Si tomas una imagen o ilustración sencilla y la guardas en los formatos SVG, JPEG y PNG, el primero suele tener un tamaño de archivo mucho menor que el resto. Sin embargo, eso sólo funciona para las imágenes «simples», de las que hablaremos en un momento.
- Puedes animar archivos SVG. Como se trata de archivos XML o de código, puedes añadirles estilizo y animar los archivos SVG utilizando CSS.
Aunque los archivos SVG son increíblemente versátiles, no son adecuados para todas las situaciones. Si comparas SVG con JPEG y PNG, te darás cuenta rápidamente de que las dos últimas opciones son mucho mejores cuando se trata de gráficos y fotografías complejas.
Mira este archivo JPEG, por ejemplo. No es una imagen de alta resolución, pero es más que suficiente para distinguir los detalles.
Cuando conviertas ese archivo JPEG a SVG utilizando cualquiera de las herramientas disponibles en Internet, acabarás con muchos menos detalles.
Esa imagen no sólo carece de detalles y colores, sino que además tiene un tamaño de archivo mayor que el original. Esto se debe a que los datos vectoriales se acumulan rápidamente cuando se trata de fotografías u otros tipos de gráficos complejos.
En resumen, los SVG deberían ser tu formato preferido para las imágenes con menos líneas, como los logotipos y las ilustraciones. Sin embargo, cuando se trata de fotografías, es mejor que te quedes con los JPEG y PNG de alta resolución (siempre que los optimices).
Cómo convertir un archivo SVG
El software de edición de fotos que elijas debería permitirte tomar otros tipos de archivos de imagen y convertirlos al formato SVG y viceversa. Aquí tienes un ejemplo rápido utilizando una de nuestras herramientas gratuitas de edición de fotos favoritas, llamada Photopea.
Si no tienes acceso a un software de edición de fotos, hay muchas herramientas online gratuitas que pueden tomar imágenes en casi cualquier formato y exportarlas a SVG o viceversa. El inconveniente de utilizar estas herramientas gratuitas es que los resultados no suelen ser tan detallados como te gustaría.
Según nuestra experiencia, el uso de software gratuito de conversión de imágenes suele dar como resultado archivos SVG sin color o archivos que apenas se parecen a la imagen original. Sin embargo, convertir archivos SVG a otros formatos de imagen es mucho más sencillo y casi nunca supone una pérdida de calidad apreciable, independientemente de la herramienta que utilices.
Cómo Abrir Archivos SVG (3 Formas)
Hay varias formas de abrir archivos SVG, dependiendo de lo que quieras hacer con ellos. Empecemos hablando de los navegadores.
1. Utilizando un navegador
A diferencia de otros archivos gráficos, cuando abras un SVG, por defecto, se ejecutará en tu navegador. Esto se debe a que tu ordenador reconoce los SVG no como gráficos, sino como archivos XML.
Los archivos SVG existen desde hace tiempo y alrededor del 33% de los sitios web los utilizan de una forma u otra. Es decir, la mayoría de los navegadores modernos son compatibles con los archivos SVG, incluidos Edge, Firefox, Chrome, Safari y prácticamente cualquier otra opción que se te ocurra.
A menos que utilices un navegador muy extraño o anticuado (lo que no debería ser así), podrás ejecutar archivos SVG con un par de clics. Sin embargo, no puedes editar archivos SVG desde el navegador. Para ello, tendrás que utilizar un editor de texto o un programa de edición de imágenes.
2. Abrir Archivos SVG con un Editor de Texto
Como los archivos SVG son imágenes basadas en XML, puedes abrirlos y modificarlos con un editor de texto. Anteriormente, te mostramos el aspecto del logotipo de Kinsta como SVG. También hemos visto su código.
En teoría, puedes modificar o crear un archivo SVG con un editor de texto. Sin embargo, eso sólo funciona para imágenes muy simples con pocos vectores. Para un archivo como el de arriba, modificar cada vector a mano es casi imposible.
Lo que puedes hacer es añadir CSS utilizando un editor de texto, lo que es bastante sencillo. En ese ejemplo, puedes ver que hemos rellenado las líneas del vector con el característico color morado de Kinsta. Puedes utilizar CSS para añadir cualquier tipo de estilo que quieras al archivo vectorial, incluidas las animaciones. Eso es algo que no puedes hacer con los formatos de imagen tradicionales.
3. Utilizar un Editor de Fotos o Imágenes
La mayoría de los programas modernos de edición de fotos incluyen soporte para archivos SVG. Eso significa que puedes abrirlos, editarlos y luego guardar los cambios o exportar la imagen a otros formatos.
Cuando trabajes con un archivo SVG utilizando un software de edición de fotos, tendrás acceso a todas las mismas herramientas que puedes utilizar para personalizar otros tipos de imágenes. Esto te permite editar el SVG, añadir más detalles, eliminar partes del mismo y, básicamente, hacer todo lo que quieras.
Los programas de edición de imágenes o fotos también ofrecen la forma más fácil de crear archivos SVG desde cero. Puedes utilizar herramientas vectoriales o de trazado para diseñar imágenes y guardarlas en formato SVG. Una vez que tus archivos SVG estén listos, puedes subirlos a WordPress para que los visitantes puedan verlos.
Resumen
Los SVG son perfectos para las ilustraciones y los gráficos sencillos, como los logotipos. Afortunadamente, hay muchas herramientas que puedes utilizar para gestionar este tipo de contenido. Además, los archivos SVG son compatibles con la mayoría de los navegadores de Internet.
En cuanto a cómo abrir un archivo SVG, hay tres formas de hacerlo:
- Utiliza un navegador
- Abre los archivos SVG con un editor de texto
- Utiliza un editor de fotos o imágenes
¿Necesitas ayuda con tu diseño web? En Kinsta, todos nuestros planes de alojamiento incluyen soporte 24/7 de nuestros desarrolladores de WordPress de primera clase.
