Pasar al contenido principal
Alexys Lozada
José Luján
Manuel Rodriguez
José Luján
Luis Avilés
Álvaro Felipe
José Luján
Beto Quiroga
Jonathan MirCha
Jonathan MirCha
Álvaro Felipe
Alexys Lozada, Álvaro Felipe, Jonathan MirCha
Beto Quiroga
Alexys Lozada
Alexys Lozada
José Luján
Álvaro Felipe
Álvaro Felipe
Jonathan MirCha
Jonathan MirCha
Alexys Lozada, José Luján
Alexys Lozada, José Luján
Alexys Lozada, José Luján
Camilo Adobe
Álvaro Felipe
José Luján
Jonathan MirCha
Álvaro Felipe
Álvaro Felipe
Beto Quiroga, Alexys Lozada
Álvaro Felipe
Juan Villalvazo
Luis Avilés
Jonathan MirCha
Jonathan MirCha
Jonathan MirCha
Alexys Lozada
José Luján
Manuel Rodriguez
José Luján
Luis Avilés
Álvaro Felipe
José Luján
Beto Quiroga
Jonathan MirCha
Jonathan MirCha
Álvaro Felipe
Alexys Lozada, Álvaro Felipe, Jonathan MirCha
Beto Quiroga
Alexys Lozada
Alexys Lozada
José Luján

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