Si eres diseñador (gráfico o web) seguramente trabajas mucho con archivos svg, y es que sus ventajas son muchas:
- Son archivos vectoriales que se pueden escalar infinitamente sin perder calidad
- Pesan bastante menos que el png equivalente
- Son soportados por todos los navegadores web (en serio, deja los png)
- Puedes abrirlos y editarlos en cualquier programa de edición vectorial (Illustrator, Afinity Designer, Figma, Adobe Xd, Gravit Designer, Inkscape, etc.)
Pero un inconveniente que siempre me ha molestado de trabajar con archivos svg es que cuando los veo desde el explorador de Windows lucen así:
Solo veo su nombre junto con el icono de la aplicación predeterminada que lo abre (Affinity Designer en este caso).
Si existiera una forma de previsualizarlos desde el explorador la vida volvería a tener alegría, ¿cierto? ¡Hay una forma! Y funciona tanto en Windows 7 como en Windows 10.
SVG Viewer Extension
Todo lo que hace falta es instalar un pequeño programita llamado SVG Viewer Extension que como su nombre lo dice, es una extensión para el explorador de Windows que agrega soporte para SVG. Solo tienes que ir al repositorio en https://github.com/maphew/svg-explorer-extension/releases y descargar la versión correcta para tu sistema operativo (hay versión para 32 y 64 bits).
Una vez instalado (en mi caso Windows 10 de 64 bits) seguirás viendo los archivos svg en tu explorador igual que antes. Aun no puedes ver los svg porque necesitas regenerar la caché del explorador. Hay un truco muy sencillo para lograrlo: cambiar el programa predeterminado para abrirlos. Clic derecho > Abrir con > Elegir otra aplicación. Asegúrate de marcar la casilla Siempre usar esta aplicación para abrir archivos svg.
En mi caso elegí abrirlos con Chrome. Eso regeneró la caché y voila.
Como ves, en la esquina inferior derecha verás un icono del programa que abre este tipo de archivos. Como yo uso Affinity Designer (y escogí Chrome solo para regenerar la caché) volveré a cambiar el programa y queda así:
¿Dónde encontrar archivos svg?
No vas a diseñar desde cero todas tus imágenes svg así que te dejo unos sitios que te ayudarán mucho:
- Flaticon https://flaticon.com El que uso todos los días, tiene miles de iconos gratuitos y otros de pago
- Undraw https://undraw.co/illustrations Una hermosa colección de Katerina Limpitsouni
- SVG Porn https://svgporn.com/ Logos libres de tecnologías y marcas para desarrolladores
- Vecteezy https://vecteezy.com Miles de imágenes gratis (aunque debes dar créditos al autor o pagar para tener la licencia)
- Free Vector https://www.freevector.com/ Como el veectezy, puedes descargar imágenes gratis dándole créditos al autor o pagar para tener las licencias.
Si ese artículo te gustó, déjame un comentario o compártelo en tus redes. Hasta la próxima.
Si eres desarrollador web y quieres dominar el formato SVG, tenemos un curso que te enseñará como comprender el código SVG, integrarlo a tus proyectos web y agregarle animaciones. Encuéntralo en https://ed.team/cursos/svg