Gráficos vetoriais SVG: ilustrar e animar com código
A course by Javier Usobiaga FerrerWeb designer
A course by Javier Usobiaga Ferrer, Web designer
Aprenda a trabalhar com ilustrações vetoriais em seus sites de internet, da linha à animação interativa
Javier Usobiaga - Web Designer e co-fundador da Marta Armada do estudo Swwweet - vai ensiná-lo a tirar o máximo proveito do formato SVG (Scalable Vector Graphics), um tipo de arquivo vetorial para uso em navegadores que surge como alternativa ao JPG, PNG e GIF e que se caracteriza por ser escalável, interativo e responsivo. Você descobrirá seus efeitos, filtros e animações e poderá criar ilustrações e peças animadas com código HTML, CSS e JavasScript.
Javier também ensina no Domestika o curso [Introdução ao Desenvolvimento Responsivo da Web]. com HTML e CSS "](https://www.domestika.org/es/courses/74-introduccion-al-desarrollo-web-responsive-con-html-y-css) , onde você pode aprender os fundamentos do Frontend Web Development, conhecimento que virá muito bem como uma base para aproveitar ao máximo este curso de gráficos vetoriais SVG.
O que você aprenderá neste curso online?
32 aulas & 28 downloads
Etiquetas e atributos básicos
5 minutos, 16 segundos
Estilos no SVG
4 minutos, 57 segundos
Rótulos de linha, polilinha e polígono
5 minutos, 21 segundos
Rótulo do traçado (caminho)
4 minutos, 45 segundos
O atributo viewbox
4 minutos, 6 segundos
Tags de texto
6 minutos, 55 segundos
O que está incluído neste curso?
Você começará a conhecer o trabalho e as influências no mundo do SVG de Javier Usobiaga.
Abaixo, você entenderá como o formato SVG funciona em sua forma mais básica para poder alterá-lo e otimizá-lo. Para isso, você começará a escrever um gráfico básico sem editores visuais apenas com o editor de código, descobrirá como aplicar estilos através de atributos e CSS, saberá como os rótulos de linha, polilinha e polígono funcionam e os rótulos de rastreamento que permitem criar um número infinito de curvas, linhas e pontos. Você também verá os atributos da caixa de visualização que permitem criar janelas virtuais (delimitar a parte visível de um gráfico e zoom) e rótulos de texto.
Depois de conhecer as ferramentas básicas, será hora de aprender a usar outras ferramentas de otimização, como editores vetoriais e ferramentas de código, com as quais você poderá agrupar, definir e reutilizar elementos SVG para salvar várias linhas de código.
A próxima fase será incorporar o SVG na web, para isso, Javier explicará maneiras de carregar um SVG (imagem de conteúdo, imagem de fundo, com JavaScript ...), sua aplicação em relação aos sistemas de ícones, seu papel na web responsiva , dicas para melhorar a experiência do leitor de tela e como otimizar o formato SVG em todos os navegadores.
Em seguida, você descobrirá os efeitos em SVG (transformações, gradientes, padrões, máscaras e filtros) e os tipos de animação (com CSS, sequência, desenho e interativo) incluindo algumas animações avançadas como aquelas feitas com JavasScript, aquelas aplicadas a caixas de seleção animadas. as mutações ou morphings e as animações ao longo de um traço.
Recommended software & tools for this course
What is this course's project?
Você fará uma ilustração com elementos vetoriais animados. O assunto é gratuito e você pode fazer um projeto tão simples ou complexo quanto quiser, colocando em prática as ferramentas que você viu durante o curso.
Projetos de alunos do curso
Who is this online course for?
Para programadores, designers, ilustradores e qualquer um que tenha interesse em design e curiosidade ao desenvolver novos projetos com HTML e CSS.
Requirements and materials
Conhecimento prévio básico de HTML e CSS é necessário.
Com relação aos materiais e ferramentas necessários para concluir o curso, você deve ter um computador, um editor de código e um editor de gráficos vetoriais (como Illustrator, Sketch, Inkscape ou similar).
Avaliações
- há 9 meses
Muy puntual, da la clase muy bien y es entendible, con ejercicios faciles y buenos.
- há 1 ano
EXCELENTE CURSO
- há 1 ano
Gostei muito
- há 2 anos
excellent course for beginners.
- há 2 anos
excelente curso lo recomiento explica muy bien y se entiende todo
Ele também gosta muito de sua faceta como professor de Web Design em renomados workshops e escolas como Elisava, IDEP.
A Usobiaga entende a web como um todo, não só o quão bonita ela pode ser na tela do computador, mas também sua usabilidade em diferentes dispositivos e circunstâncias.
Em suas palavras "Eu acho que tão importante quanto a estética é a rapidez com que carrega ou o quão bem ele responde, e eu acho que na nossa indústria frequentemente esquecemos disso."
Conteúdo
- U1
Introdução
- Apresentação
- Influências
- U2
SVG Basic
- Etiquetas e atributos básicos
- Estilos no SVG
- Rótulos de linha, polilinha e polígono
- Rótulo do traçado (caminho)
- O atributo viewbox
- Tags de texto
- U3
Ferramentas e otimização
- Editores de vetores e exportação
- Organização do SVG
- Otimização SVG
- U4
Incorporando SVG à web
- Formas de carregar um SVG na web
- Sistemas de ícones
- SVG responsivo
- Acessibilidade no SVG
- Suporte nos navegadores
- U5
Efeitos no SVG
- Transformações
- Gradientes
- Padrões
- Máscaras e traçados de recorte
- Filtros
- U6
Animação no SVG
- Tipos de animação no SVG
- Animação com CSS
- Animação de sequência
- Animação desenhada
- Animação interativa
- U7
Interação e animação avançada
- Animação com JavaScript
- Bibliotecas JavaScript para animação
- Caixa de seleção animada
- Mutação (morphing) em SVG
- Animação ao longo de um acidente vascular cerebral
- Inspiração
- PF
Projeto final
- Gráficos vetoriais SVG: ilustrar e animar com código
O que esperar de um curso da Domestika
Aprenda no seu ritmo
Aproveite para aprender desde casa, sem um horário fixo e no seu ritmo. É você quem define sua disponibilidade.
Aprenda com os melhores profissionais
Aprenda métodos e técnicas fundamentais com os melhores profissionais do setor criativo.
Conheça os maiores especialistas
Cada professor compartilha seus conhecimentos com entusiasmo e explicações claras, oferecendo uma perspectiva profissional em cada aula.
Certificates
PLUSIf you're a Plus member, get a certificado personalizado signed by your teacher for every course. Share it on your portfolio, social media, or wherever you like.
Sente-se na primeira fila
Com vídeos da melhor qualidade, você não perderá nenhum detalhe! Graças ao acesso ilimitado, você pode assistir às aulas todas as vezes que precisar para aperfeiçoar sua técnica.
Compartilhe conhecimentos e ideias
Pergunte, peça opiniões e ofereça soluções. Compartilhe sua experiência de aprendizagem com outros alunos da comunidade tão criativos como você.
Conecte-se a uma comunidade criativa global
Esta comunidade acolhe milhões de pessoas do mundo todo, curiosas e apaixonadas por descobrir e expressar sua criatividade.
Assista a cursos produzidos de maneira profissional
A Domestika seleciona cuidadosamente seus professores e produz cada curso internamente para garantir uma experiência de aprendizagem online excelente.
Perguntas frequentes
SVG (Scalable Vector Graphics) é um formato baseado em XML para criar gráficos vetoriais que podem ser ampliados sem perder qualidade. É muito usado no desenvolvimento web para ícones, ilustrações, animações e gráficos interativos.
O curso é voltado para pessoas com conhecimentos intermediários em desenvolvimento web. Recomenda-se ter experiência básica em HTML, CSS e JavaScript para aproveitar melhor o conteúdo.
Você deve ter conhecimentos básicos de HTML, CSS e JavaScript, além de estar familiarizado com algum editor de código. Não é preciso ser expert, mas uma base em tecnologias web ajuda a acompanhar o curso.
Você vai aprender a criar gráficos SVG personalizados, animar elementos com CSS e JavaScript, integrar ícones, aplicar estilos avançados, trabalhar com caminhos, gradientes e padrões, além de otimizar arquivos SVG para a web.
O curso ensina a animar SVG usando JavaScript acessando o DOM e modificando atributos, e com CSS usando keyframes para criar efeitos visuais, transições e sequências animadas.
O curso explica que atributos SVG como fill e stroke permitem estilos diretos, enquanto o CSS oferece mais controle, reutilização e manutenção, especialmente útil em projetos grandes e componentes reutilizáveis.
Você vai aprender a usar o atributo viewBox, ajustar preserveAspectRatio e aplicar técnicas de design responsivo para que os SVGs se adaptem de forma fluida a qualquer dispositivo ou resolução.