SVG Desde Cero

Curso: SVG Desde Cero

Crea gráficos vectoriales para la web usando código e interactua con ellos con CSS y JavaScript

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 directamente con código. Es más, 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. Pre-requisitos para tomar el curso: Conocimientos en HTML, CSS Y JS

Poster del curso
Avatar

Alvaro Felipe

Curso: SVG Desde Cero

$ 20 USD

Accede de por vida a este curso

O actualiza a premium y accede a todos los cursos

Poster del curso
Avatar

Alvaro Felipe

Curso: SVG Desde Cero

$ 20 USD

Accede de por vida a este curso

O actualiza a premium y accede a todos los cursos

¿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?

Nivel

intermedio

+11horas

Temario del curso

¿Eres estudiante premium o has comprado este curso?Empieza aquí

¿Qué es SVG?

  • 1.1 - Mapa de bits vs Graficos vectoriales09:33
  • 1.2 - Graficos vectoriales en la web SVG10:15
  • 1.3 - Estructura basica de SVG09:35
  • 1.4 - Sistema de coordenadas09:19
  • 1.5 - Insertar SVG en HTML08:44
  • 1.6 - Exportar SVG desde programas de diseño13:45
  • 1.7 - Recursos para obtener SVG desde la web05:12

Formas básicas

  • 2.1 - Lineas y circulos08:25
  • 2.2 - Rectangulos y elipses07:26
  • 2.3 - Poligonos y Atributos de estilo10:45
  • 2.4 - Atributos de trazo11:39
  • 2.5 - Atributos de relleno y finales de linea13:37
  • 2.6 - Dibujando el logo de Vue.js04:49

DOM SVG

  • 3.1 - DOM SVG conceptos10:18
  • 3.2 - Namespaces y Defs09:47
  • 3.3 - Elementos G y Symbol10:12
  • 3.4 - Elementos Use e Imágenes16:13

Transformaciones SVG

  • 4.1 - Transformaciones SVG: Translate10:22
  • 4.2 - Scale17:10
  • 4.3 - Ejercicio con translate, scale y rotate07:00
  • 4.4 - Ejercicio con translate, scale y rotate07:00
  • 4.4 - Rotate y Skew09:38

Paths

  • 5.1 - Ejemplo de Path12:25
  • 5.2 - Path: Lineas12:19
  • 5.3 - SVG y Javascript12:08
  • 5.4 - Path: Arcos08:44
  • 5.5 - Ejemplo de Arcos09:07
  • 5.6 - Quadratic bezier13:22
  • 5.7 - Cubic bezier14:23

Degradados

  • 6.1 - Degradados en SVG13:37
  • 6.2 - Degradados en SVG con javascript10:29
  • 6.3 - Angulo de degradado y spreadMethod10:16
  • 6.4 - Degradados radiales04:09

Textos

  • 7.1 - Elemento text12:20
  • 7.2 - Alineacion07:05
  • 7.3 - Estilos y texto vertical09:33
  • 7.4 - Textos en una ruta10:09

Máscaras y recortes

  • 8.1 - Recortes (clipPath)07:12
  • 8.2 - Recortes relativos al objeto08:54
  • 8.3 - Ejercicio recorte de texto04:51
  • 8.4 - ¿Cómo funcionan las máscaras?05:29
  • 8.5 - Máscaras svg08:29
  • 8.6 - Ejercicio máscara de texto11:02

Filtros

  • 9.1 - Desenfoque06:38
  • 9.2 - Color matrix09:42
  • 9.3 - Componente transfer11:05
  • 9.4 - Combinar filtros31:08

Iconos SVG

  • 10.1 - Iconos con simbolos 11:28
  • 10.2 - Dibujar iconos con Adobe XD 10:11
  • 10.3 - Iconos SVG desde archivo externo 10:59
  • 10.4 - Crear iconos SVG con javascript 10:24
  • 10.5 - Identifiers 11:20

SVG Responsive

  • 11. SVG responsive01:02:55

Animaciones con SVG

  • 12 - Animaciones SVG01:29:23

¿Por qué elegir EDteam?

Profesores reales

Profesores reales

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

Especialidades

Especialidades

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

Aprende con proyectos

Aprende con proyectos

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

Comunidad

Comunidad

No te quedes con dudas, busca apoyo en la comunidad, ayuda a tus compañeros y gana reputación.

Seguimiento de aprendizaje

Seguimiento de aprendizaje

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

Clases en vivo

Clases en vivo

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