Posts da Tag: Edição de SVG - Blog da TreinaWeb

Desenvolvimento Front-end

Começando com SVG no Front-End – Parte 3 – Animações com mo.js (Motion Graphics)

Olá Web Developers! Vamos ver como criar animações incríveis de elementos SVG usando o mo.js. Esse é o terceiro post de três sobre como começar a usar SVG.

Na segunda parte vimos como iniciar na criação de SVG com o Inkscape. Agora veremos como fazer animações de SVG com JavaScript.

O que é mo.js?

mo.js é uma biblioteca JavaScript para criar belas animações com ótima performance com uma API bem simples. Podemos animar elementos HTML, mas sua principal função é animar elementos SVG. No exemplo abaixo podemos ver o poder desta biblioteca, tudo feito com SVG e utilizando apenas o mo.js.

Sim, isso é um SVG animado com JavaScript, não é um vídeo!!!

Iniciando com mo.js

Instalação

Primeiro é preciso inserir a biblioteca do mo.js no seu projeto. Você pode adicionar com <script src="https://cdn.jsdelivr.net/npm/@mojs/core"></script> ou instalando com o npm executando npm i @mojs/core e importando com import mojs from '@mojs/core.

Criando Formas

Vamos começar criando um círculo (circle). Para isso utilizamos o método .Shape(), para o qual passamos um objeto com algumas configurações.

new mojs.Shape({
    shape: 'circle',
    fill:  '#F64040',
    radius: 20,
    isShowStart: true,
})

Há outras formas como rect, polygon, line, cross, equal, curve e zigzag. Também podemos criar nossa própria forma com SVG e registrar com o nome que quisermos, nos permitindo animá-la.

O código acima terá o seguinte resultado:

Vamos entender o que passamos para o método .Shape():

  • shape indica a forma que queremos criar. Pode ser uma das já existentes ou o nome de uma forma que nós registramos com nosso próprio SVG.
  • fill indica a cor de preenchimento do elemento, assim como vimos nos posts anteriores. Então você pode usar aqui outras propriedades do SVG, como stroke, strokeWidth, etc
  • radius é usado para indicar o raio da forma
  • isShowStart indica se a forma deve iniciar visível na tela, pois você pode querer que a forma apenas seja exibida quando a animação iniciar

No exemplo que fizemos, o círculo foi criado e injetado no corpo da nossa página, mas provavelmente você vai querer ter controle sobre onde nossa forma será inserida. Para isso basta adicionar ao objeto de configuração a propriedade parent. Você pode passar o seletor do elemento que receberá a forma, como “#meu-id”, ou passar o próprio elemento HTML.

Animando Formas

Quando executamos o método .Shape() teremos como retorno um objeto com as configurações que criamos e métodos que podemos usar para executar a animação. Então vamos salvar esse retorno:

const animation = new mojs.Shape({
    ...

Para iniciar a animação basta executar o método .start() do retorno que salvamos em animation. Então vamos criar um botão para executarmos a animação quando quisermos.

<button onclick="startAnimation()" >Iniciar</button>
function startAnimation(){
    animation.start();
}

Obviamente que não acontecerá nada, pois nós ainda não indicamos quais propriedades queremos animar. Para animar uma propriedade nós passamos um objeto, onde a chave será o valor inicial e o valor será o valor final.

Pense como exemplo a propriedade radius, que indicamos o valor inicial como 20. Se quisermos animar esta propriedade, precisamos mudar o 20 para um objeto. Vamos fazer algumas alterações e depois entender o que foi feito:

const animation = new mojs.Shape({
  shape: 'circle',
  fill: {
    '#F64040': '#FC46AD'
  },
  radius: {
    20: 80
  },
  duration: 2000,
  isYoyo: true,
  isShowStart: true,
  easing: 'elastic.inout',
  repeat: 1,
})

Mudamos o valor de fill de apenas #F64040 para um objeto que possui como chave #F64040 e #FC46AD como valor. Isso fará a animação iniciar com o valor da chave e ir para o valor de #FC46AD.

O mesmo fizemos com o radius, fazendo com que na animação ele vá de 20 para 80.

Adicionamos a propriedade duration, indicando que queremos uma animação com duração de 2 segundos (2000 milisegundos).

Também adicionamos outras propriedades que podem ajudar a deixar a animação interessante: isYoyo indica se queremos que a animação, ao chegar ao final, faça o caminho inverso, voltando ao estado inicial. easing nos permite indicar uma função de animação e repeat indica quantas vezes queremos que a animação seja repetida.

Teremos o seguinte resultado:

Dentro do objeto de configuração também podemos passar funções que serão executadas a cada momento da animação, como onProgress, onStart, onFirstUpdate, onUpdate, onComplete, etc, nos possibilitando ter mais controle da animação.

Burst

Também temos outras funcionalidades que nos facilitam a criação de animações mais complexas. O Burst nos ajuda a criar um efeito parecido com uma explosão, como no exemplo abaixo:

Para conseguir esse resultado, primeiro vamos mudar o .Shape para .Burst e mudar um pouco as nossas configurações:

const animation = new mojs.Burst({
  radius: { 0: 100 },
  count: 5,
  angle: { 360: 0 },
  children: {
    shape: 'circle',
    fill: { '#F64040': '#FC46AD' },
    radius: { 20: 80 },
    duration: 2000
  }
})

Veja que as propriedades relacionadas à nossa forma circle foram para dentro de um campo children. Agora ele é um elemento filho da nossa animação.

Na parte de fora nós configuramos a explosão. radius do lado de fora indica o tamanho do elemento da explosão, enquanto o radius dentro de children está indicando o raio de cada um dos círculos.

Usamos angle para girar o nosso elemento, e count nos permite indicar quantos círculos nós queremos.

Esta foi uma introdução bem simples ao mo.js. Brinque com suas propriedades e veja exemplos que há no site da biblioteca para ter ideias. Compartilhe aí nos comentários com a gente a sua criação.


Desenvolvimento Front-end

Começando com SVG no Front-End – Parte 2 – Trabalhando com Inkscape

Olá Web Developers! Vamos ver como começar a trabalhar com o Inkscape para criar imagens para nossos projetos para a web. Esse é o segundo post de três sobre como começar a usar SVG.

O que é Inkscape e por que usá-lo?

O Inkscape é um software open-source usado para a criação de imagens vetoriais, assim como Adobe Illustrator e Corel Draw.

Ele é gratuito, leve e usa o SVG como formato nativo de seus arquivos. Isso significa que ao salvar um trabalho feito no Inkscape, já podemos usar em nossos projetos web, sem medo nenhum de incompatibilidade.

Este programa pode não ter uma interface muito bonita, mas ele tem um grande poder. Com o tempo você se acostuma.

Iniciando com Inkscape

Formas

A maioria das ferramentas que você irá utilizar estão no canto esquerdo do programa. A primeira coisa a se aprender é desenhar formas. Para acelerar seu trabalho, tente decorar os atalhos:

  • Retângulo – R
  • Elipse – E
  • Estrela – *

Se você desenhar segurando a tecla Ctrl, a forma será feita mantendo proporções em suas dimensões. Isso permitirá que você utilize a ferramenta de retângulo para desenhar um quadrado ou a ferramenta de elipse para desenhar um círculo.

Se segurar Shift a forma será desenhada a partir de seu centro.

Para selecionar algum elemento, utilize a ferramenta de seleção, que pode ser acessada usando a tecla S. Com esta ferramenta você pode redimensionar a forma, e se clicar nela os controles serão alterados para que você possa rotacioná-la.

Cores

Ao ter algum elemento selecionado, podemos escolher a cor do contorno e do preenchimento.

Utilize o atalho Ctrl + Shift + F e você terá a ferramenta mostrada na imagem abaixo:

Em Fill podemos escolher a cor de preenchimento do elemento, em Stroke paint a cor do contorno e em Stroke style a grossura e estilo da linha do contorno.

Caso queira criar um efeito de gradiente, utilize o atalho G. Com isso você poderá indicar a posição e direção do gradiente, e junto à ferramenta anterior poderá escolher as cores de cada parte do gradiente.

Caso queira copiar a cor de um elemento (famoso “conta-gotas”), utilize o atalho D.

Desenhando

Linhas

Nem sempre vamos utilizar apenas formas prontas. Para desenhar suas próprias formas, a ferramenta mais utilizada é a de criação de curvas de Bezier. Para acessá-la você pode usar o atalho B.

Conforme você clica e arrasta irá criar curvas. Depois você pode editar essas curvas utilizando a ferramenta de edição de nós, que pode ser acessada pelo atalho N.

Nós e Segmentos

Um nó é cada ponto de uma forma, e um segmento é a linha entre dois nós, como você pode ver na imagem acima no desenho do matinho. Para selecionar um ou mais nós utilizamos a ferramenta de edição de nós N.

Ainda temos algumas opções que podemos alterar nestes elementos, que se encontram marcados na imagem abaixo. Mas vamos aprender a usar os atalhos. Vou seguir aqui a mesma ordem presente na imagem abaixo.

  1. Duplo clique – ao clicar duas vezes em um segmento você criará um novo nó
  2. Delete – apaga o nó selecionado, mantendo os outros nós ligados
  3. Shift + J – junta dois nós
  4. Shift + B – quebra o segmento selecionado, separando-o da forma inicial
  5. Alt + J – junta dois nós criando um novo segmento
  6. Alt + Backspace – apaga o segmento entre dois nós
  7. Shift + C – deixa o nó selecionado criar cantos
  8. Shift + S – deixa o nó selecionado criar formas mais suaves
  9. Shift + Y – deixa o nó selecionado criar segmentos simétricos
  10. Shift + A – deixa o nó selecionado criar formas mais suaves automaticamente

Finalização da Imagem

Um atalho muito importante é quando finalizamos uma imagem e queremos definir qual a área da imagem será visível ou exportada. Selecione os elementos e utilize o atalho Ctrl + Shift + R. Para exportar a imagem para outros formatos de imagem, utilize o atalho Ctrl + Shift + E. Caso queira utilizar em SVG mesmo, basta salvar com Ctrl + S.

Outras coisas básicas a se saber também é o Zoom, que basta segurar a tecla Ctrl e rolar a rodinha do mouse. Para mover o que você enxerga basta clicar com a rodinha do mouse e arrastar. Para espelhar a forma na vertical pressione V e na horizontal pressione H.

Esta foi apenas uma introdução bem breve. Ainda há muito mais no Inkscape. No próximo post veremos como animar nossos SVG’s.


Desenvolvimento Front-end

Começando com SVG no Front-End – Parte 1

Olá Web Developers! Vamos ver a importância do SVG para o desenvolvimento web e como começar a usá-lo. Esse é o primeiro post de três sobre como usar SVG.

O que é SVG?

O nome SVG vem de Scalable Vector Graphics (Gráficos Vetoriais Escaláveis). Ele é basicamente um formato de imagem vetorial suportado pelos navegadores e que pode ser animado/modificado por CSS e JavaScript. Para saber mais sobre imagens vetoriais e a diferença em relação às imagens comuns, dê uma olhadinha no nosso post sobre O que são imagens vetoriais?.

Quais as vantagens do SVG?

O SVG possui várias vantagens, como:

  • podem ser animados por CSS e modificados por JavaScript
  • por serem imagens vetoriais, você pode alterar o tamanho livremente sem perda de qualidade da imagem
  • podem ser embutidos no HTML, diminuindo a quantidade de requisições
  • você não precisa de um super editor de imagens para trabalhar com SVG. Algumas coisas simples você pode editar com o seu próprio editor de código ou usar até mesmo um programa gratuito online
  • possui várias funcionalidades que ainda são impossíveis ou muito complexas de se fazer com HTML e CSS, nos permitindo criar formas e efeitos mais complexos para nossas páginas web
  • como pode ser integrado com CSS, podemos usar Media Queries para criar imagens responsivas

Começando com SVG

Não precisamos de editor de imagem para começar com SVG. Você pode usar o mesmo programa que usa para escrever seu HTML.

Podemos criar uma imagem SVG em um arquivo .svg e depois chamar em nosso HTML usando a tag <img>, mas também pode-se, dentro do seu próprio HTML, criar uma tag <svg> e começar a escrever o código dentro dele.

Vamos começar a declarar um retângulo. Para isso usamos o elemento <rect>.

<svg>
     <rect width="200" height="100"  fill="red" x="10" y="30" stroke="green" stroke-width="5" ></rect>
</svg>

Teremos o seguinte resultado:

Vamos entender o que fizemos:

  • <rect> declara que queremos criar um retângulo
  • width e height servem para declararmos a largura e altura do elemento
  • fill serve para declararmos a cor do preenchimento do elemento
  • x e y servem para indicarmos a posição do elemento
  • stroke nos permite declarar a cor da linha de contorno do elemento
  • stroke-width declara a grossura da linha de contorno do elemento

Outro elemento muito comum é o <circle>, que serve para criar um círculo.

<svg>
    <circle r="30" cx="50" cy="40" fill="blue" stroke="orange" stroke-width="5" ></circle>
</svg>

Vamos entender o que fizemos:

  • <circle> declara que queremos criar um círculo
  • r indica o raio do círculo, então é por aqui que indicamos o tamanho
  • ao invés de posicionarmos o círculo com x e y, são usadas as propriedades cx e cy

Há outros elementos também como line, polyline, polygon, path e text.

SVG com CSS e JavaScript

Como dito anteriormente, o SVG pode facilmente ser integrado com CSS e JavaScript, permitindo que a gente o controle como quisermos.

Como exemplo, vamos criar um outro círculo, mas ao invés de escrever as propriedades diretamente na tag <circle>, vamos adicionar uma classe CSS e escrever essas propriedades no CSS.

<svg>
  <circle class="meu-circulo" ></circle>
</svg>
.meu-circulo{
  r: 30;
  cx: 50;
  cy: 40;
  fill: lightgreen;
  stroke: orange;
  stroke-width: 5;
}

Lembre-se que podemos fazer animações com CSS. Vamos criar uma transição simples para quando passarmos a seta do mouse por cima do círculo, mudando sua posição e cores:

.meu-circulo{
  r: 30;
  cx: 50;
  cy: 40;
  fill: lightgreen;
  stroke: orange;
  stroke-width: 5;
  transition: all 1s ease;
}

.meu-circulo:hover{
  cx: 70;
  fill: green;
  stroke-width: 10;
}

Também podemos integrar com JavaScript. Vamos pegar esse <circle> e criar uma função que aumente o r dele ao clicarmos:

const circle = document.querySelector('.meu-circulo');
let r = 30;

circle.addEventListener('click', () => {
    r += 10;
    circle.style.r = r;
})

Teremos o seguinte resultado:

É importante saber que só podemos integrar o SVG com CSS e JavaScript se ele estiver no corpo do HTML, como fizemos. Se você chamar uma imagem SVG com a tag <img> não dará certo.

No próximo post veremos como começar a trabalhar com o Inkscape, um software gratuito para a criação de imagens vetoriais que utiliza o SVG como formato de arquivo.