Las imágenes SVG se ven más nítidas en pantallas grandes y los enlaces se pueden insertar fácilmente en gráficos SVG usando Inkscape.
SVG puede tener tamaños de archivo más pequeños y puede animarse mediante código. Las animaciones SVG tienen ventajas sobre el formato .GIF porque se ven más nítidas, tienen tamaños de archivo más pequeños y responden mejor. Esto se debe a que las imágenes SVG constan de datos vectoriales, son independientes de la resolución y pueden escribirse en código XML. Las formas se componen de coordenadas. Se pueden insertar en páginas HTML usando varios metodos. Sin embargo, tenga cuidado al utilizar archivos SVG de Internet, ya que pueden contener código malicioso.
También es importante tener en cuenta que no todos los navegadores web los admiten por completo. Las animaciones CSS SVG puras no admiten tantas funciones de animación como las animaciones que utilizan Javascript.
Durante la investigación para este artículo, vi algunas imágenes SVG abriéndolas en un editor de texto en lugar de en un programa de gráficos. También miré la imagen rasterizada en el editor de código y vi que esto también era solo código.
Esto me llevó a investigar software para crear animaciones SVG y contenido interactivo HTML 5, ya que realmente no disfruto codificar imágenes o animaciones SVG desde cero a menos que sea muy básico.
Prefiero utilizar software vectorial para diseñar visualmente gráficos animados.
Personas inteligentes han estado escribiendo código para animar SVG durante años. Afortunadamente, existe software especializado para animar y exportar SVG para la web. Estos son algunos de los programas que investigué para este artículo.
Software para crear SVG animados para la web
No fui patrocinado ni me pidieron que escribiera ningún artículo gratuito o comercial sobre este software.
software empresarial
cocodrilo
cocodrilo es un editor de animación sin código para artistas y animadores en movimiento. Hay una opción gratuita muy limitada. Si desea todas las funciones, debe pagar mediante suscripción. Probé la cuenta gratuita y pensé que la interfaz de usuario era fácil de entender e incluso había una guía turística.
Tiene herramientas básicas de creación y edición de vectores, herramientas de transformación, funciones booleanas, máscaras y degradados. El programa tiene muchos tutoriales y buena documentación. Tienen un excelente blog que destaca las características del programa, artículos educativos y estudios de casos.
Me gusta tener una manera de crear una ruta de movimiento y luego configurar un objeto para que la siga.
Su complemento de WordPress ya no está disponible, pero escribieron una guía sobre cómo usar manualmente animaciones SVG en WordPress, lo que implica limpiar el código manualmente o usar el convertidor SVG en línea de WordPress. Antes de hacer esto, podría beneficiarse del uso de SVGOMG para optimizar su código de animación SVG y reducir el tamaño del archivo. Si decide utilizar SVG en línea, debe asegurarse de que el SVG sea confiable y crear el suyo propio es una forma de hacerlo.
animador expresivo
animador expresivo Now es un software de animación SVG de escritorio con una licencia de por vida de pago único para Windows y macOS.
Me gusta su interfaz de usuario y la forma en que funciona la línea de tiempo mejor que SVG Gator o cualquier software gratuito que haya probado. Para mí, esto parece un programa de animación vectorial estable y bien hecho, y realmente me gusta. Es intuitivo y tiene todas las funciones que necesitas para crear animaciones SVG simples y posiblemente más complejas (una vez que lo domine). Importa SVG muy bien y también admite la importación de imágenes rasterizadas, lo cual es bueno.
Expressive Animator es principalmente un programa basado en vectores que admite la importación de Figma, PDF y Adobe Illustrator. Cuenta con herramientas básicas de creación y edición de vectores, incluidas funciones booleanas, máscaras y trazados de recorte, y admite degradados, filtros y efectos, modos de fusión, cuadrículas, reglas y guías, filtrado de líneas de tiempo y opciones de ajuste. También incluye herramientas de texto y tipografía, fuentes nativas y vistas previas de fuentes. Me encanta poder ingresar a un grupo SVG en modo aislado y editarlo fácilmente.
Cada vez que mueves una forma en la línea de tiempo, se crea una ruta de movimiento que se puede editar más tarde.
Puede crear una ruta de movimiento a partir de la forma de otra forma en la animación haciendo clic derecho en la ruta y seleccionando Copiar como > Fotogramas clave de ruta de movimiento, luego pegándola en la forma que desea establecer como ruta de movimiento.
También admite diferentes curvas de flexibilización.
Me gusta cómo recorta las animaciones que creo al tamaño del documento al exportar, algo que SVG Gator no hace. Hay varios ajustes preestablecidos para tamaños de documentos/mesa de trabajo, y usted puede definir los suyos propios. Esto es algo que no puedo hacer en Moho porque Moho está limitado a formatos de vídeo.
El programa es muy intuitivo y logré hacer algunas cosas sólo para probarlo rápidamente. Me impresionó la variedad de opciones de exportación, que incluyen diferentes formatos SVG (SMIL, versiones anteriores, CSS y JS), Lottie (JSON y dotlottie), vídeos, imágenes (APNG y GIF) y secuencias de imágenes (SVG, PNG y JPEG).
Estos tutoriales son fáciles de seguir. canal de youtube.
También están desarrollando su propio software de edición de vectores llamado lienzo expresivo.
Rif
Rif es una herramienta de animación y contenido interactivo en línea para diseñadores de movimiento y desarrolladores de UI de videojuegos. Se basa en suscripción, con múltiples niveles de precios para profesionales y empresas, pero también hay una opción gratuita limitada. Rive tiene capacidades de animación muy avanzadas, incluyendo incluso el aparejo óseo. Definitivamente está dirigido a usuarios más avanzados, y si puede codificar y manejar nodos para una funcionalidad interactiva, entonces podría resultar útil. Esto no es lo que personalmente quiero. No creo que se exporte como SVG animado, pero tiene muchas otras opciones e incluye tiempo de ejecución del juego.
caballería
caballería es un software de animación 2D que no está basado en web y se puede descargar en Windows o Mac. Es un software basado en suscripción, pero existe una opción gratuita. También ofrecen a estudiantes y profesores de educación superior y superior un 70% de descuento en su versión profesional. La versión gratuita incluye exportación de animación SVG. La versión gratuita puede ser adecuada para aficionados y software de aprendizaje, con funciones de pago dirigidas a usuarios profesionales más avanzados.
animador de estilo
animador de estilo es una animación de gráficos en movimiento con pinceles vectoriales naturales. El software es desarrollado por MediaChance, la empresa que también fabrica Dynamic Auto Painter.
software libre
sonido
sonido es un programa gratuito y de código abierto para crear presentaciones SVG escaladas con cierta interactividad. No es estrictamente un programa de animación, pero sí muy útil. Las imágenes SVG se pueden importar al programa para crear presentaciones en las que se puede hacer clic. Las animaciones se pueden exportar a HTML o formato de vídeo. Creo que es fácil y rápido comenzar con este programa. Si está familiarizado con la codificación HTML básica, también puede reemplazar la imagen SVG con la que comenzó y la animación de demostración seguirá funcionando con ella si desea crear más animaciones o insertar enlaces a ellas en otro programa.
Envi
Enve es un programa de animación gratuito y de código abierto basado en SVG. No se ha actualizado en algunos años, pero encontré algunos tutoriales en YouTube.
gráficos de movimiento de fricción
Si está buscando una versión más desarrollada de Enve, es posible que desee consultar gráficos de movimiento de fricción En cambio, es una bifurcación de Enve que se encuentra en desarrollo activo.
Friction admite múltiples escenas y líneas de tiempo, efectos de texto y ruta, y efectos de sombreado de trama.
Creo que el cronograma de Friction es bueno y parece ser un programa engañosamente sólido. Con suerte, se volverá más estable y creo que sería bueno si hubiera más documentación y tutoriales en video para principiantes, ya que encuentro el programa un poco intimidante y no tan intuitivo como me gustaría cuando uso un programa como Affinity Designer. También me gustaría un tema ligero o algo más fácil de usar. Con suerte, se mejorará la exportación de animación CSS SVG, ni siquiera admite rutas de movimiento, y mucho menos gradientes o cualquier otro efecto, aunque estas funciones están disponibles en el programa. Si bien este es un proyecto muy prometedor, al menos estaré atento a él.
Imagen compuesta
Imagen compuesta Es gratuito y de código abierto. Probé la versión portátil de Synfig, pero no sabía cómo usarla tan rápido como otros programas que había probado porque tenía una curva de aprendizaje mayor y la interfaz de usuario era completamente diferente. Synfig tiene muchas características en comparación con algunos de los otros programas de código abierto que mencioné. Admite gráficos vectoriales y de mapas de bits. Synfig no tiene exportación de animación SVG, pero admite la exportación de animación Lottie. Prefiero la interfaz de usuario para gráficos de movimiento de fricción, pero Synfig podría ser excelente para alguien que esté dispuesto a probarlo y, al mirar los ejemplos en el sitio web, puede crear animaciones completas con él. Todavía está en desarrollo activo y se actualizó por última vez en mayo de este año.
Glaxo
Glaxo es un programa de animación gratuito y de código abierto para crear animaciones SVG y Lottie. Todavía se encuentra en las primeras etapas de desarrollo y encuentro que exportar o importar SVG no funciona tan bien como otros programas que he probado. El editor tiene errores y es difícil de usar, la línea de tiempo es demasiado básica y difícil de usar porque no muestra fotogramas clave y no se puede cambiar su tamaño fácilmente.
Glaxnimate viene incluido con Shotcut o se puede descargar desde Github y vincularlo con Kdenlive para agregar animación a los videos.
vivir
vivir es una aplicación web gratuita en línea para crear animaciones de dibujo CSS SVG muy simples y fáciles de usar a partir de gráficos SVG importados basados en trazos. Ideal para animaciones rápidas en la web.
Editor de mecha
Editor de mecha es una herramienta web gratuita y de código abierto para crear contenido animado e interactivo (incluidos juegos simples). Puede exportar GIF animados, vídeos, contenido interactivo HTML5, secuencias de imágenes PNG e imágenes SVG estáticas (no animadas ni interactivas). Tiene capacidades de interpolación y animación cuadro por cuadro.
Tangrama
Tangrama es un editor en línea gratuito para crear gráficos en movimiento sin usar código. Funciona mejor en navegadores basados en Chromium. Es intuitivo y fácil de usar, y hay muchos tutoriales a seguir. Incluso tiene una opción de visita guiada incorporada para explicar la interfaz. No necesitas una cuenta para usarlo, pero tiene una opción de registro si quieres compartir tus proyectos con otros.
Tiene herramientas de creación de vectores, interpolaciones, animaciones de deformación, rutas de movimiento,
Al intentar importar imágenes, descubrí que puede importar archivos SVG animados y cargar todos los fotogramas clave por grupo, pero no a lo largo de la línea de tiempo. Esto también se aplica a Expressive Animator y quizás también a otros programas.
No parece admitir la importación de gradientes, pero sí admite gradientes en el programa. Puede exportar vídeo MP4, WebM (VP9), GIF, PNG, WebP y JPEG. Pero no hay exportación animada de SVG o Lottie.
grafito
grafito es una aplicación de dibujo vectorial gratuita y de código abierto basada en web. Actualmente está en Alpha y aún no incluye animación, pero han publicado una hoja de ruta para la versión 1 que incluye funcionalidad de línea de tiempo de animación y un autor de animación SVG. El programa parece muy prometedor y se está desarrollando una versión de escritorio.
SVGOMG
SVGOMG es un sitio web para optimizar SVG animados para la web. Algunas configuraciones que encontré útiles en algunos SVG que optimicé al intentar activar o desactivar fueron «eliminar viewBox», las desactivé porque no quería eliminarlas. También marqué «Preferir viewBox al ancho/alto». A veces es necesario desactivar «Mover atributos de grupo a elementos»; de lo contrario, el SVG no se mostrará correctamente.
Gracias por leer.
