Gráficos SVG + Javascript

Introduza SVG no seu portfólio

Avaliação: 4.5 de 57 avaliações

Total de horas: 22

Aulas: 66

Introduza SVG no seu portfólio. O que são gráficos SVG? Scalable Vector Graphics (SVG) é um formato gráfico que nos permite escalar ou aumentar o tamanho da imagem sem perder nitidez. Se compararmos uma imagem PNG de alta qualidade, ela pode facilmente exceder 500Kb de tamanho, enquanto uma imagem SVG equivalente ocuparia apenas cerca de 30Kb. Além disso, a qualidade gráfica seria perfeita, ao contrário de uma imagem PNG escalada que seria um desastre. Quando devemos usar um formato em vez do outro? PNG: Este formato é usado para imagens realistas ou artísticas, como artes conceituais e capas de jogos de vídeo AAA. O formato PNG, além de suportar transparência, possui uma plasticidade semelhante à pintura realista tradicional, que pode ser alcançada com o Photoshop. Também é usado em jogos 2D legados onde são necessárias texturas realistas. SVG: Este formato é comumente usado em jogos web, aplicativos, livros digitais interativos, cassinos virtuais, etc. O SVG é preferido porque possui um tamanho de arquivo muito menor e permite ilustrações mais simples com cores planas. No entanto, isso não significa que ilustrações complexas não possam ser alcançadas com o SVG, pois ele também suporta gradientes e técnicas de sombreamento específicas desse estilo gráfico. Do meu ponto de vista como designer de personagens e programador, este curso é perfeito para desenvolvedores web ou designers que desejam incorporar gráficos SVG em seu trabalho e interagir com eles. Você poderá incluir seus designs criados no Illustrator, incorporar seu código em HTML e torná-los interativos usando a linguagem de programação Javascript. Você pode alterar as cores desses gráficos por meio da programação, movê-los e criar eventos para que os usuários de um site, por exemplo, possam interagir com o design. Este curso fornece as ferramentas para fazer tudo isso. Para quem é este curso? - Você deve ter conhecimento da linguagem de marcação HTML. - Qualquer pessoa que queira aprender as disciplinas detalhadas. - Se você deseja mais informações, há um vídeo gratuito no tópico 1 que explica o conteúdo do curso. O que você aprenderá: - Trabalhar com gráficos SVG em arquivos HTML - Noções básicas de JS - Animação de gráficos SVG usando CSS e JS - Criação de gráficos SVG a partir do Javascript - Importação de arquivos de software vetorial como o Illustrator - Programação modular e orientada a objetos com JS e gráficos vetoriais - Geração procedural de gráficos vetoriais - Movendo SVG através de eventos de teclado - Colisões entre gráficos SVG criados usando fórmulas usadas em jogos de vídeo 2D.