Pasar al contenido principal

¡Feliz Día México 🇲🇽! Lo celebramos con 20% de descuento en todo EDteam. La oferta termina en

Alexys Lozada
Jose Luján
Manu Rodríguez
Jose Luján
Luis Avilés
Álvaro Felipe
Jose Luján
Beto Quiroga
Jon MirCha
Álvaro Felipe
Alexys Lozada, Álvaro Felipe, Jon MirCha
Beto Quiroga
Alexys Lozada
Alexys Lozada
Jose Luján
Álvaro Felipe
Álvaro Felipe
Alexys Lozada
Jose Luján
Manu Rodríguez
Jose Luján
Luis Avilés
Álvaro Felipe
Jose Luján
Beto Quiroga
Jon MirCha
Álvaro Felipe
Alexys Lozada, Álvaro Felipe, Jon MirCha
Beto Quiroga
Alexys Lozada
Alexys Lozada
Jose Luján
Álvaro Felipe
Álvaro Felipe
Jon MirCha
Jon MirCha
Alexys Lozada, Jose Luján
Alexys Lozada, Jose Luján
Alexys Lozada, Jose Luján
Camilo Adobe

SVG Desde Cero

SVG (Scalable Vector Graphics) es un formato de imágenes vectoriales para web en formato XML. Es decir, puedes crearlas con programas como Illustrator o Sketch pero también con código. O crearlas en illustrator y luego manipularlas por código, animándolas con CSS o creando interacciones con JavaScript. SVG es un estándar de la W3C y tiene soporte completo por todos los navegadores

https://app.ed.team/cursos/svg?30
¿Qué aprenderás?
  • Exportar gráficos SVG desde Illustrator y manipularlos por CSS y JavaScript.
  • Comprender el sistema de coordenadas y la sintaxis de SVG.
  • Crear efectos y gráficos SVG con código e integrarlos a proyectos web.
¿Qué conocimientos necesitas?
Intermedio
  • +10 horas
  • Certificado
  • Proyecto final
  • Clases grabadas

Temario del curso

EDteam tiene los temarios más detallados en español

2. Formas básicas

  • Lineas y circulos
  • Rectangulos y elipses
  • Poligonos y Atributos de estilo
  • Atributos de trazo
  • Atributos de relleno y finales de linea
  • Dibujando el logo de Vue.js

3. DOM SVG

  • DOM SVG conceptos
  • Namespaces y Defs
  • Elementos G y Symbol
  • Elementos Use e Imágenes

4. Transformaciones SVG

  • Transformaciones SVG: Translate
  • Scale
  • Ejercicio con translate, scale y rotat
  • Ejercicio con translate, scale y rotate
  • Rotate y Skew

5. Formas avanzadas

  • Ejemplo de Path
  • Path: Lineas
  • SVG y Javascript
  • Path: Arcos
  • Ejemplo de Arcos
  • Quadratic bezier
  • Cubic bezier

6. Degradados

  • Degradados en SVG
  • Degradados en SVG con javascript
  • Angulo de degradado y spreadMethod
  • Degradados radiales

7. Textos

  • Elemento text
  • Alineacion
  • Estilos y texto vertical
  • Textos en ruta

8. Máscaras y recortes

  • Recortes (clipPath)
  • Recortes relativos al objeto
  • Ejercicio recorte de texto
  • ¿Cómo funcionan las máscaras?
  • Máscaras svg
  • Ejercicio máscara de texto

9. Filtros

  • Desenfoque
  • Color matrix
  • Componente transfer
  • Combinar filtros

10. Iconos SVG

  • Iconos con simbolos
  • Dibujar iconos con Adobe XD
  • Iconos SVG desde archivo externo
  • Crear iconos SVG con javascript
  • Identifiers

11. SVG Responsive

  • SVG responsive

¿Por qué estudiar en EDteam?

Profesores reales

Todos nuestros profesores tienen experiencia real en aulas. Porque no basta saber un tema, sino saber enseñarlo.

Especialidades

Las especialidades son rutas de aprendizaje detalladas que te llevan a traves de cursos cortos a tu objetivo.

Aprende con proyectos

Somos la primera plataforma en incluir un proyecto del mundo real (no un examen) para completar los cursos.

Suscripción o compra

Compra los cursos que necesites con acceso de por vida o suscribete y accede a todos nuestros cursos y especialidades

Clases en vivo

Toda la semana tenemos clases en vivo en las que nuestros estudiantes interactuan con los profesores y sus compañeros.

Seguimiento de aprendizaje

Lleva seguimiento de tus avances, tomar notas y obtén un certificado de culminación desde nuestra plataforma.

.
0
25