Your cart is empty.
Keep shoppingGráficos SVG + Javascript
Highest Rated
3,107 students
Gráficos SVG + Javascript
Introduce SVG en tu portfolio.
Created byManuel Gomez Martinez
Last updated 2/2022
Spanish
What you'll learn
- Trabajar con gráficos svg en archivos html
- Bases de JS
- Animar gráficos svg desde css y desde js
- Crear Gráficos SVG desde Javascript
- Importar archivos desde softwares vectoriales como illustrator
- Programación modular y orientada a objetos con JS y gráficos vectoriales
- Generación procedural de gráficos vectoriales
- Mover SVG mediante eventos de teclado
- Colisiones entre gráficos creados SVG con formulas que se usan en videojuegos 2D
Explore related topics
Course content
6 sections • 66 lectures • 22h 2m total length
Requirements
- Solo HTML , lo demás esta explicado , JS completo y SVG desde 0
Description
Que són los gráficos SVG? :
Sus siglas Scalable Vector Graphics nos definen lo que són . Es un formato gráfico ,
que nos permite escalar o lo que es lo mismo aumentar el tamaño de la imagen
a gran escala y no pierde nitidez . Si comparamos una imagen png de buena calidad
podremos ver como su peso fácilmente supera los 500Kb de tamaño , sin embargo una imágen
SVG equivalente solo ocuparia unos 30Kb , y no solo eso , su calidad gráfica seria perfecta , cosa que si
un png se escala a su mismo tamaño seria un desastre.
¿Cuando debemos usar un formato y cuando usar otro?
PNG
En imágenes donde queremos realismo o imágenes artísticas , como en los concept arts y portadas
para videojuegos AAA se usa png , porque este formato además de trabajar con transparencias tiene
una plasticidad muy parecida a la pintura tradicional realista , cosa que podemos conseguir con photoshop.
También se usa en juegos 2D legacy donde aunque no es un estilo realista , necesitamos texturas que si lo sean .
SVG
En juegos web , aplicaciones , libros digitales interactivos , casinos virtuales etc. Se suele usar SVG por que
su peso es mucho menor y se consigue el tipo de ilustración más simple y con colores más planos . Esto no quiere
decir que no se pueda conseguir una ilustración compleja con svg , ya que maneja degradados también y distintas
técnicas de sombreado própias de este estilo gráfico. Desde mi punto de vista como diseñador de personajes además de programador , este curso es perfecto para programadores o diseñadores web que quieran incorporar este tipo de gráficos en sus trabajos y poder interactuar con ellos . Podrás incluir tus diseños hechos en illustrator , incorporar tú código en el html y poder hacerlo interactivo grácias al lenguaje de programación Javascript , cambiar los colores de
esos gráficos por medio de programación , moverlos , crear eventos para que el usuario de una web por ejemplo pulse una tecla y se mueva algo de ese diseño . Este curso te da las herramientas para que puedas hacer eso .
¿Para quién es este curso?
-Tendrás que conocer el lenguaje de marcado Html .
-Cualquier persona que quiera aprender las disciplinas que se detallan .
-Si quieres más información en el tema 1 tienes el video que es gratuito para todo el mundo y te indica el contenido.
Who this course is for:
- Estudiantes front-end que quieran añadir a su portfolio trabajos con SVG.
- Programadores front-end que quieran aprender a generar gráficos escalables vectoriales.
- Cualquiera que conozca HTML y quiera aprender Javascript y SVG .