CursosCurso SVG Desde Cero [MEGA]Link

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

Contenido SVG Desde Cero:

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