Udemy

Platform

Português

Language

Web Development

Category

Aprendendo SVG Do Início ao Avançado

Aprenda tudo que você precisa para começar a criar incríveis interações com SVG na Web.

4.97 (616 reviews)

Students

5.5 hours

Content

Jul 2020

Last Update
Regular Price

Topics

SKILLSHARE
SkillShare
Unlimited access to all SkillShare courses
EXCLUSIVE 30-DAY FREE TRIAL

What you will learn

O que é o SVG

Como criar um SVG

As formas de se utilizar um SVG

Formas básicas e estrutura

Como estilizar com CSS

Criar elementos responsivos e adaptativos

Criar Sprites utilizando Gulp

Criar Animações como Loaders

Criar Animações utilizando SMIL

Introdução as Bibliotecas JS de manipulação

Como usar filtros

Acessibilidade no SVG

Trabalhar com Performance


Description

Antes de comprar direto, peça um cupom, você pode ganhar ótimos descontos <3

O curso tem como objetivo passar desde os conceitos básicos do SVG até os mais avançados, permitindo criar basicamente o que se quiser com SVG. O curso é desenvolvido em pequenos módulos com vídeos curtos, facilitando assim o aprendizado e o desenvolvimento do aluno, visando sempre uma didática simples, concisa e bastante aplicada a prática de trabalho.

Existem alguns projetos ao decorrer do curso, para aplicarmos os conceitos aprendidos, fazendo com que o aluno perceba sua evolução e também comece a trabalhar mais em sua parte criativa e com código.


Screenshots

Aprendendo SVG Do Início ao Avançado
Aprendendo SVG Do Início ao Avançado
Aprendendo SVG Do Início ao Avançado
Aprendendo SVG Do Início ao Avançado

Content

Introdução ao SVG

Introdução

História

O que é?

Por que usar?

Quando usar?

Como criar?

Onde baixar?

Como usar e suas vantagens/desvantagens?

Como imagem

Como background-image

Via iframe/object/embed

Como Data URIs

Como inline

A estrutura do SVG

Plano Cartesiano

ViewBox e Viewport

preserveAspectRatio

Formas Básicas

O elemento Path

Elementos Containers

Estilizando o SVG

Métodos para estilizar pt1

Métodos para estilizar pt2

Peso das propriedades

Fill e Stroke

Colorindo ícones com mais de uma cor

Projeto #1 - Construindo um SVG responsivo e adaptativo

Tornando o SVG Fluido

Tornando o SVG Responsivo e Adaptativo

Sistemas de Ícones em SVG

Fixando o uso de ícones com Symbol

Usando o Icomoon

Projeto #2 - Criando um boilerplate em Gulp para gerar sprites

Criando nosso boilerplate

Projeto #3 - Criando um loader com SVG e CSS Animations

Editando e preparando o visual do nosso loader

Usando Keyframes para animar

Animações SVG com SMIL

Entendendo o que é SMIL

Criando uma animação simples

Famoso Morph Path

Especificando um caminho para a animação

Manipulando SVG com JS

Utilizando JS para estilizar e criar novos elementos

Algumas bibliotecas aconselhadas

Criando animações com as propriedades de Stroke

Criando um loader animado usando propriedades do stroke

Fazendo o efeito de desenhar

Usando o scroll para controlar o desenho

Filtros SVG

Alguns tipos de filtros

Criando uma animação com filtros

Acessibilidade no SVG

Dicas e informações para deixar tudo mais acessivel

Performance

Criando e Exportando com Illustrator

Usando ferramentas para otimizar

Busque Conhecimento e Agradecimentos

Projeto Awesome-SVG, outros e agradecimentos


Reviews

R
Rafael8 October 2020

O professor conhece profundamente os recursos do SVG. Eu conheci o SVG usando a biblioteca D3.js sem saber o que acontecia nos bastidores e este curso me iluminou para usar melhor esta biblioteca e arriscar animar logos e outros conteúdos dos sites.

L
Leo20 August 2020

Curso muito bom para quem nao tem nenhuma noçao, ele realmente te ensina do Basico ao Avançado. Curso essencial para quem é Front End Developer e para quem trabalha com desenvolvimento web. Recomendado!!!

J
Jonatan3 August 2020

Curso excelente! O Willian é excelente instrutor é o conteúdo é completissimo ealém de muito relevante para Front Ends.

A
Ana5 July 2020

Incrível o conteúdo, a didática é maravilhosa. Realmente cumpre com o prometido do básico ao avançado.

R
Reginaldo2 July 2020

O conteúdo atendeu completamente as minhas expectativas. O Willian domina muito bem o assunto, tem uma excelente didática. Sua dedicação no planejamento e execução de suas aulas fazem o complexo se tornar simples. Parabéns Willian, muito obrigado por compartilhar seu conhecimento.

B
Bruno21 October 2019

Todos os cursos do Willian sempre é focado em o que você realmente precisa saber, compro todos os cursos dele porque já conheço a qualidade e sei que não vou me arrepender!

E
Eric24 April 2019

Muito bom! Estou gostando do cursos. Todas as dúvidas que eu tinha estão sendo esclarecidas! Parabéns!

J
Junior20 April 2019

Como nos demais cursos de sua autoria, o instrutor apresenta os assuntos de forma sempre muito simples, prática, concisa e objetiva. Bom curso para quem quer conhecer o SVG.

H
Hyngrid7 March 2019

Gostei bastante. Em português não encontrei nenhum conteúdo tão interessante como esse. Sempre que preciso consultar alguma coisa relacionada, acesso o site do instrutor. Cheguei a me inscrever em outros cursos, mas não fiz ainda.

J
Joao3 March 2019

Estou no inicio do curso, mas já estou gostando. O professor domina muito bem o assunto e explica de forma clara e objetiva.

J
João24 November 2018

Excelente curso e didática do professor! Eu já tinha uma certa noção do básico do SVG, mas assistir as aulas iniciais fazem toda a diferença no decorrer do curso. Só deixo aqui como sugestão um curso com exemplos mais avançados do SVG... Parabéns, Willian Justen!

B
Bruno8 October 2018

Excelente curso, tanto para novatos quanto para experientes na área. Um ponto só para melhorar seria cativar um pouco pra galera exercitar e praticar, só acho que faltou isso. De resto, parabéns, só falta agora o de filtros SVG =D

Y
Yasmin1 October 2018

Está sendo uma experiência boa, os videos são curtos, então se eu tiver algo pra fazer e quiser primeiro terminar a aula, não vou ter que esperar uma eternidade. Está bem explicativo, no geral estou tendo uma boa experiência, mesmo eu não sabendo nada em html, css e pior ainda SVG, espero que continue assim.

J
Japhet4 September 2018

Um ótimo curso, recomendado, matou todas as minhas curiosidades sobre o mundo do SVG, curso excelente.

E
Evandro13 August 2018

Parabéns pelo curso Willian, achei muito bem explicado e um pouco inovador, até porque eu não sabia nada de SVG e pelo que vi só tinham conteúdos em inglês. Como eu já sabia mexer no illustrator foi muito legal pois editei minhas logos e estou trabalhando em cima do meu projeto com imagens responsivas agora. Pretendo seguir para o greensocks como sugeriu, só que espero ter uma promoção para eu pegar o curso. Abraço, sucesso!!!


Coupons

DateDiscountStatus
12/10/202025% OFFExpired
4/9/202130% OFFExpired

Related Courses

SKILLSHARE
How to use SVG images with WordPress & Elementor
How to use SVG images with WordPress & Elementor
SKILLSHARE
What is SVG: How to use it with HTML/CSS
What is SVG: How to use it with HTML/CSS
SKILLSHARE
Design PERSONALIZED SVG cut files (of people!) | From photograph to digital Etsy Product
Design PERSONALIZED SVG cut files (of people!) | From photograph to digital Etsy Product

844366

Udemy ID

5/10/2016

Course created date

11/23/2019

Course Indexed date
Bot
Course Submitted by

Twitter
Telegram