Udemy
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
Development
Web Development Data Science Mobile Development Programming Languages Game Development Database Design & Development Software Testing Software Engineering Development Tools No-Code Development
Business
Entrepreneurship Communications Management Sales Business Strategy Operations Project Management Business Law Business Analytics & Intelligence Human Resources Industry E-Commerce Media Real Estate Other Business
Finance & Accounting
Accounting & Bookkeeping Compliance Cryptocurrency & Blockchain Economics Finance Finance Cert & Exam Prep Financial Modeling & Analysis Investing & Trading Money Management Tools Taxes Other Finance & Accounting
IT & Software
IT Certification Network & Security Hardware Operating Systems Other IT & Software
Office Productivity
Microsoft Apple Google SAP Oracle Other Office Productivity
Personal Development
Personal Transformation Personal Productivity Leadership Career Development Parenting & Relationships Happiness Esoteric Practices Religion & Spirituality Personal Brand Building Creativity Influence Self Esteem & Confidence Stress Management Memory & Study Skills Motivation Other Personal Development
Design
Web Design Graphic Design & Illustration Design Tools User Experience Design Game Design Design Thinking 3D & Animation Fashion Design Architectural Design Interior Design Other Design
Marketing
Digital Marketing Search Engine Optimization Social Media Marketing Branding Marketing Fundamentals Marketing Analytics & Automation Public Relations Advertising Video & Mobile Marketing Content Marketing Growth Hacking Affiliate Marketing Product Marketing Other Marketing
Lifestyle
Arts & Crafts Beauty & Makeup Esoteric Practices Food & Beverage Gaming Home Improvement Pet Care & Training Travel Other Lifestyle
Photography & Video
Digital Photography Photography Portrait Photography Photography Tools Commercial Photography Video Design Other Photography & Video
Health & Fitness
Fitness General Health Sports Nutrition Yoga Mental Health Dieting Self Defense Safety & First Aid Dance Meditation Other Health & Fitness
Music
Instruments Music Production Music Fundamentals Vocal Music Techniques Music Software Other Music
Teaching & Academics
Engineering Humanities Math Science Online Education Social Science Language Teacher Training Test Prep Other Teaching & Academics
AWS Certification Microsoft Certification AWS Certified Solutions Architect - Associate AWS Certified Cloud Practitioner CompTIA A+ Cisco CCNA Amazon AWS CompTIA Security+ AWS Certified Developer - Associate
Graphic Design Photoshop Adobe Illustrator Drawing Digital Painting InDesign Character Design Canva Figure Drawing
Life Coach Training Neuro-Linguistic Programming Personal Development Mindfulness Meditation Personal Transformation Life Purpose Emotional Intelligence Neuroscience
Web Development JavaScript React CSS Angular PHP WordPress Node.Js Python
Google Flutter Android Development iOS Development Swift React Native Dart Programming Language Mobile Development Kotlin SwiftUI
Digital Marketing Google Ads (Adwords) Social Media Marketing Google Ads (AdWords) Certification Marketing Strategy Internet Marketing YouTube Marketing Email Marketing Retargeting
SQL Microsoft Power BI Tableau Business Analysis Business Intelligence MySQL Data Analysis Data Modeling Big Data
Business Fundamentals Entrepreneurship Fundamentals Business Strategy Online Business Business Plan Startup Blogging Freelancing Home Business
Unity Game Development Fundamentals Unreal Engine C# 3D Game Development C++ 2D Game Development Unreal Engine Blueprints Blender
30-Day Money-Back Guarantee
Development Web Development SVG

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.
Highest Rated
Rating: 4.9 out of 54.9 (598 ratings)
2,381 students
Created by Willian Justen de Vasconcellos
Last updated 7/2020
Portuguese
30-Day Money-Back Guarantee

What you'll 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

Course content

15 sections • 45 lectures • 5h 40m total length

  • Preview04:32
  • Preview06:12
  • Preview02:01
  • Por que usar?
    08:39
  • Quando usar?
    02:54
  • Como criar?
    01:12
  • Onde baixar?
    02:13

  • Como imagem
    03:41
  • Como background-image
    03:26
  • Via iframe/object/embed
    02:28
  • Como Data URIs
    03:48
  • Como inline
    05:14

  • Plano Cartesiano
    02:54
  • ViewBox e Viewport
    09:18
  • preserveAspectRatio
    06:55
  • Formas Básicas
    13:18
  • O elemento Path
    09:03
  • Elementos Containers
    09:17

  • Métodos para estilizar pt1
    06:18
  • Métodos para estilizar pt2
    08:02
  • Peso das propriedades
    04:02
  • Fill e Stroke
    08:25
  • Colorindo ícones com mais de uma cor
    07:20

  • Tornando o SVG Fluido
    11:25
  • Tornando o SVG Responsivo e Adaptativo
    12:47

  • Fixando o uso de ícones com Symbol
    11:49
  • Usando o Icomoon
    07:45

  • Criando nosso boilerplate
    21:56

  • Editando e preparando o visual do nosso loader
    06:17
  • Usando Keyframes para animar
    12:16

  • Entendendo o que é SMIL
    03:46
  • Criando uma animação simples
    07:34
  • Famoso Morph Path
    06:11
  • Especificando um caminho para a animação
    03:56

  • Utilizando JS para estilizar e criar novos elementos
    12:51
  • Algumas bibliotecas aconselhadas
    06:59

Requirements

  • Conhecimentos básicos de HTML e CSS. Javascript será um bônus.
  • Editor de Texto
  • Vontade de aprender =)

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.

Who this course is for:

  • Pessoas que queiram aprender como o SVG funciona não só superficialmente.
  • Designers que desejam entregar um design melhorado e preparado para os desenvolvedores.
  • Desenvolvedores que queiram criar páginas mais dinâmicas, preocupados com performance e qualidade.

Instructor

Willian Justen de Vasconcellos
Engenheiro de Software
Willian Justen de Vasconcellos
  • 4.7 Instructor Rating
  • 33,315 Reviews
  • 212,431 Students
  • 8 Courses

Olá, me chamo Willian Justen e sou Engenheiro de Software com anos experiência, já tendo trabalhado em grandes empresas como Toptal, Globo, HUGE, Queremos/WeDemand entre outras. Sempre focando na qualidade e melhor entrega para o usuário. Escrevo bastante no meu blog, falando sobre SVG, CSS, JS e minhas experiências como desenvolvedor.

  • Udemy for Business
  • Teach on Udemy
  • Get the app
  • About us
  • Contact us
  • Careers
  • Blog
  • Help and Support
  • Affiliate
  • Terms
  • Privacy policy
  • Cookie settings
  • Sitemap
  • Featured courses
Udemy
© 2021 Udemy, Inc.