SVG Desde Cero

Curso: SVG Desde Cero

intermedio
10 horas

También puedes acceder a todos los cursos con un solo pago

Sube a premium

SVG Desde Cero

Toma este curso
SVG Desde Cero

Curso: SVG Desde Cero

intermedio
+10 horas
Sube a premium

Y accede a todos los cursos con un solo pago

SVG Desde Cero

SVG Desde Cero

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

Nivel: intermedio
Fecha de lanzamiento: 05 de dic.
Duración: +10 horas
(Ver temario)
Calificación: 4.7
(Ver 19 opiniones)

* Accede a este y a todos los cursos, talleres y especialidades

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

¿Qué aprenderás en este curso?

  • 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 previos necesitas?

Avatar

Prof. Alvaro Felipe

@alvarofelipeVer perfil

Autodidacta. Obsesionado con el emprendimiento y el desarrollo personal. Todo lo puedo en EDteam que me fortalece. EDy es mi pastor y con él nada me faltará.

Temario del curso

¿Qué es SVG?

  • 1.1 - Mapa de bits vs Graficos vectoriales

  • 1.2 - Graficos vectoriales en la web SVG

  • 1.3 - Estructura basica de SVG

  • 1.4 - Sistema de coordenadas

  • 1.5 - Insertar SVG en HTML

  • 1.6 - Exportar SVG desde programas de diseño

  • 1.7 - Recursos para obtener SVG desde la web

Formas básicas

  • 2.1 - Lineas y circulos

  • 2.2 - Rectangulos y elipses

  • 2.3 - Poligonos y Atributos de estilo

  • 2.4 - Atributos de trazo

  • 2.5 - Atributos de relleno y finales de linea

  • 2.6 - Dibujando el logo de Vue.js

DOM SVG

  • 3.1 - DOM SVG conceptos

  • 3.2 - Namespaces y Defs

  • 3.3 - Elementos G y Symbol

  • 3.4 - Elementos Use e Imágenes

Transformaciones SVG

  • 4.1 - Transformaciones SVG: Translate

  • 4.2 - Scale

  • 4.3 - Ejercicio con translate, scale y rotate

  • 4.4 - Rotate y Skew

Paths

  • 5.1 - Ejemplo de Path

  • 5.2 - Path: Lineas

  • 5.3 - SVG y Javascript

  • 5.4 - Path: Arcos

  • 5.5 - Ejemplo de Arcos

  • 5.6 - Quadratic bezier

  • 5.7 - Cubic bezier

Degradados

  • 6.1 - Degradados en SVG

  • 6.2 - Degradados en SVG con javascript

  • 6.3 - Angulo de degradado y spreadMethod

  • 6.4 - Degradados radiales

Textos

  • 7.1 - Elemento text

  • 7.2 - Alineacion

  • 7.3 - Estilos y texto vertical

  • 7.4 - Textos en una ruta

Máscaras y recortes

  • 8.1 - Recortes (clipPath)

  • 8.2 - Recortes relativos al objeto

  • 8.3 - Ejercicio recorte de texto

  • 8.4 - ¿Cómo funcionan las máscaras?

  • 8.5 - Máscaras svg

  • 8.6 - Ejercicio máscara de texto

Filtros

  • 9.1 - Desenfoque

  • 9.2 - Color matrix

  • 9.3 - Componente transfer

  • 9.4 - Combinar filtros

Iconos SVG

  • 10.1 - Iconos con simbolos

  • 10.2 - Dibujar iconos con Adobe XD

  • 10.3 - Iconos SVG desde archivo externo

  • 10.4 - Crear iconos SVG con javascript

  • 10.5 - Identifiers

SVG Responsive

  • 1. SVG responsive

  • 2. Logo responsive

  • 3. Hacer un banner responsive

Animaciones con SVG

  • 1. Crear el Loader

  • 2. Animar el Loader

  • 3. Dejar la animación en el archivo SVG

  • 4. Dejar la animación en el archivo SVG

  • 5. Crear animación para un menú hamburguesa

  • 6. Crear animación de un corazón

Avatar

Prof. Alvaro Felipe

@alvarofelipeVer perfil

Autodidacta. Obsesionado con el emprendimiento y el desarrollo personal. Todo lo puedo en EDteam que me fortalece. EDy es mi pastor y con él nada me faltará.

Empieza a aprender SVG Desde Cero

¿Aún no te decides? Mira una clase gratis

Mostrar precios en

  • Mensual
  • Semestral
  • Anual

Premium

$360240USDAhorras $120 USD

Paga 8 meses y obtén 12

Gráfico de tabla

Alcanza tus metas con todos los cursos y funciones premium.

  • Paga 8 meses y obtén 12

  • Todos los beneficios del plan gratis

  • Acceso completo a todo EDteam

  • Sin límite de reproducciones diarias

  • Sin anuncios

  • Certificado de culminación

  • Todos los cursos (107+)

  • Todos los workshops (30+)

  • Todas las especialidades (19+)

  • 3+ cursos nuevos cada mes

  • Reproducción automática de clases

  • Descarga recursos adicionales de cursos

  • Clases y talleres bonus en cursos

  • Reportes semanales de estudios (pronto)

  • Paga 8 meses y obtén 12

  • Todos los beneficios del plan gratis

  • Acceso completo a todo EDteam

  • Sin límite de reproducciones diarias

  • Sin anuncios

  • Certificado de culminación

  • Todos los cursos (107+)

  • Todos los workshops (30+)

  • Todas las especialidades (19+)

  • 3+ cursos nuevos cada mes

  • Reproducción automática de clases

  • Descarga recursos adicionales de cursos

  • Clases y talleres bonus en cursos

  • Reportes semanales de estudios (pronto)

  • Ver todas las características

unicorn-head-smile¿Tienes un EDycupón?

*Los planes premium no tienen permanencia obligatoria. Cancela cuando quieras

Pago único

Sólo este curso

$20USD
Gráfico de tabla

Conserva este curso de por vida y obtén un certificado con un único pago.

  • Acceso de por vida a este curso

  • Certificado de culminación

  • Red social educativa

  • Sin límite de reproducciones diarias

  • Sin anuncios

  • Guarda tus apuntes de clases

  • Reproducción automática de clases

  • Guarda el avance de tus estudios

  • Descarga los recursos de las clases

  • Acceso de por vida a este curso

  • Certificado de culminación

  • Red social educativa

  • Ver todas las características

¿Quieres regalar este curso?

19 calificaciones de los estudiantes (4.7)

Cargando Calificaciones...

Ver más opiniones