Saltar al contenido principal
Estás usando EDteam en
USD Lima – Perú Bogotá – Colombia Cochabamba – Bolivia
Curso: SVG desde cero | EDteam
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
87 calificaciones de 1.3K estudiantes HB Hércules Baranda Altamirano 31 may 2019
La nueva perspectiva de crear cosas en la web y con esa novedad que nos permite aprender nuesvas tegnologias que cada se desarrollan y evolucionan. Muy interesante que ya se pueda aplicar SVG en los sitios web.
JL José Ángel Lemus 28 feb 2022
Si te interesa más adentrarte en cómo funciona este recurso gráfico, definitivamente este curso es 100% recomendable para entender de manera sencilla el porqué de las cosas, y tener el control absoluto sobre este tipo de imágenes
JD Jeferson Dextre 17 sept 2020
Curso sorprendente como para hacer retos con svg .
DQ Darwin Eleazar Quispe Landeo 23 abr 2019
Me gusto el curso de SVG , aunque creo faltan algunas clases.
OM Olga Mucientes 12 ene 2021
Es un buen curso, en la forma de impartir la teoría especialmente.
Pero deben faltar videos de ejercicios y de proyecto final, estaría bien que lo completaran
EDteam te ayuda a dominar la tecnología con la mejor metodología en español.
1. ¿Qué es SVG?1.1 - Mapa de bits vs Graficos vectoriales 9:33 1.2 - Graficos vectoriales en la web SVG 10:15 1.3 - Estructura basica de SVG 9:35 1.4 - Sistema de coordenadas 9:19 1.5 - Insertar SVG en HTML 8:44 1.6 - Exportar SVG desde programas de diseño 13:45 1.7 - Recursos para obtener SVG desde la web 5:12 2. Formas básicas8:25 2.2 - Rectangulos y elipses 7:26 2.3 - Poligonos y Atributos de estilo 10:45 11:39 2.5 - Atributos de relleno y finales de linea 13:37 2.6 - Dibujando el logo de Vue.js 4:49 3. DOM SVG10:18 9:47 3.3 - Elementos G y Symbol 10:12 3.4 - Elementos Use e Imágenes 16:13 4. Transformaciones SVG4.1 - Transformaciones SVG: Translate 10:22 17:10 4.3 - Ejercicio con translate, scale y rotate 7:00 9:38 5. Paths12:25 12:19 12:08 8:44 9:07 13:22 14:23 6. Degradados13:37 6.2 - Degradados en SVG con javascript 10:29 6.3 - Angulo de degradado y spreadMethod 10:16 6.4 - Degradados radiales 4:09 7. Textos12:20 7:05 7.3 - Estilos y texto vertical 9:33 10:09 8. Máscaras y recortes8.1 - Recortes (clipPath) 7:12 8.2 - Recortes relativos al objeto 8:54 8.3 - Ejercicio recorte de texto 4:51 8.4 - ¿Cómo funcionan las máscaras? 5:29 8:29 8.6 - Ejercicio máscara de texto 11:02 9. Filtros6:38 9:42 9.3 - Componente transfer 11:05 8:30 10. Iconos SVG10.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 11:20 11. SVG Responsive21:03 5:43 3. Hacer un banner responsive 18:50 12. Animaciones con SVG7:40 6:48 3. Dejar la animación en el archivo SVG 11:22 4. Dejar la animación en el archivo SVG 17:36 5. Crear animación para un menú hamburguesa 14:30 6. Crear animación de un corazón 13:02 Obten acceso completo al cursoSVG desde cero Desbloquea solo este curso $20 USD
Conserva este curso de por vida con un único pago. Tendrás acceso completo a todos los cursos, rutas y escuelas de EDteam *Incluye todos los beneficios por comprar el curso
Crea gráficos vectoriales para la web usando código e interactua con ellos con CSS y JavaScript
¿Qué aprenderás? Personas que dominan HTML y CSS y quieren entender el diseño vectorial usando código. Diseñadores web o frontends que quieren dejar de usar PNG y quieren implementar SVG Diseñadores gráficos interesados en el código que quieran saber cómo funciona un grafico vectorial (deben saber como mínimo HTML antes)
Los mejores profesores de Latinoamérica
Toma apuntes sin salir de tus clases Cursos, talleres y rutas de aprendizaje 1. ¿Qué es SVG?1.1 - Mapa de bits vs Graficos vectoriales 9:33 1.2 - Graficos vectoriales en la web SVG 10:15 1.3 - Estructura basica de SVG 9:35 1.4 - Sistema de coordenadas 9:19 1.5 - Insertar SVG en HTML 8:44 1.6 - Exportar SVG desde programas de diseño 13:45 1.7 - Recursos para obtener SVG desde la web 5:12 2. Formas básicas8:25 2.2 - Rectangulos y elipses 7:26 2.3 - Poligonos y Atributos de estilo 10:45 11:39 2.5 - Atributos de relleno y finales de linea 13:37 2.6 - Dibujando el logo de Vue.js 4:49 3. DOM SVG10:18 9:47 3.3 - Elementos G y Symbol 10:12 3.4 - Elementos Use e Imágenes 16:13 4. Transformaciones SVG4.1 - Transformaciones SVG: Translate 10:22 17:10 4.3 - Ejercicio con translate, scale y rotate 7:00 9:38 5. Paths12:25 12:19 12:08 8:44 9:07 13:22 14:23 6. Degradados13:37 6.2 - Degradados en SVG con javascript 10:29 6.3 - Angulo de degradado y spreadMethod 10:16 6.4 - Degradados radiales 4:09 7. Textos12:20 7:05 7.3 - Estilos y texto vertical 9:33 10:09 8. Máscaras y recortes8.1 - Recortes (clipPath) 7:12 8.2 - Recortes relativos al objeto 8:54 8.3 - Ejercicio recorte de texto 4:51 8.4 - ¿Cómo funcionan las máscaras? 5:29 8:29 8.6 - Ejercicio máscara de texto 11:02 9. Filtros6:38 9:42 9.3 - Componente transfer 11:05 8:30 10. Iconos SVG10.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 11:20 11. SVG Responsive21:03 5:43 3. Hacer un banner responsive 18:50 12. Animaciones con SVG7:40 6:48 3. Dejar la animación en el archivo SVG 11:22 4. Dejar la animación en el archivo SVG 17:36 5. Crear animación para un menú hamburguesa 14:30 6. Crear animación de un corazón 13:02 Obten acceso completo al cursoSVG desde cero Desbloquea solo este curso $20 USD
Conserva este curso de por vida con un único pago. Tendrás acceso completo a todos los cursos, rutas y escuelas de EDteam *Incluye todos los beneficios por comprar el curso
Opciones para ver este curso $20 Obtén acceso de por vida solo a este curso
Obtén acceso a todos los cursos, rutas y escuelas de EDteam
Opciones para ver este curso $20 Obtén acceso de por vida solo a este curso
Obtén acceso a todos los cursos, rutas y escuelas de EDteam
