EDteam - Curso Gratis SVG Desde Cero [MEGA]

Descripción de: 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 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

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

• HTML
• CSS
• JavaScript
• DOM

Temario del curso

EDteam tiene los temarios más detallados en español

1. ¿Qué es SVG?

• Mapa de bits vs Graficos vectoriales
• Graficos vectoriales en la web SVG
• Estructura basica de SVG
• El sistema de coordenadas (ver video gratis)
• Insertar SVG en HTML
• Exportar SVG desde programas de diseño
• Recursos para obtener SVG desde la web

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 (ver video gratis)
• Dibujando el logo de Vue.js

3. DOM SVG

• DOM SVG conceptos (ver video gratis)
• Namespaces y Defs
• Elementos G y Symbol
• Elementos Use e Imágenes

4. Transformaciones SVG

• Transformaciones SVG: Translate
• Scale
• Ejercicio con translate, scale y rotate (ver gratis)
• 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 (ver video gratis)

6. Degradados

• Degradados en SVG (ver video gratis)
• Degradados en SVG con javascript
• Angulo de degradado y spreadMethod
• Degradados radiales

7. Textos

• Elemento text
• Alineacion
• Estilos y texto vertical
• Textos en ruta (ver video gratis)

8. Máscaras y recortes

• Recortes (clipPath)
• Recortes relativos al objeto
• Ejercicio recorte de texto (ver video gratis)
• ¿Cómo funcionan las máscaras?
• Máscaras svg
• Ejercicio máscara de texto

9. Filtros

• Desenfoque
• Color matrix
• Componente transfer
• Combinar filtros (ver video gratis)

10. Iconos SVG

• Iconos con simbolos
• Dibujar iconos con Adobe XD (ver gratis)
• Iconos SVG desde archivo externo
• Crear iconos SVG con javascript
• Identifiers

11. SVG Responsive

• SVG responsive

Link de Descarga

Parte 1

Parte 2

Parte 3

Parte 4

Contraseña/Password: www.descargasnsn.com

SHARE

Milan Tomic

Hi. I’m Designer of Blog Magic. I’m CEO/Founder of ThemeXpose. I’m Creative Art Director, Web Designer, UI/UX Designer, Interaction Designer, Industrial Designer, Web Developer, Business Enthusiast, StartUp Enthusiast, Speaker, Writer and Photographer. Inspired to make things looks better.

• 
• 
• 
• 
•