SVG ou Canvas: Qual o melhor recurso para criar formas geométricas?

06/03/2017

0

Oi gente, tudo bem?

Estou num projeto em que várias (várias mesmo) figuras geométricas serão geradas para o usuário final.

Estou pensando em adotar um desses dois recursos, e estou avaliando alguns critérios, como facilidade do manuseio, a qualidade do desenho, qual que oferece mais recursos e que também seja o mais leve para aplicar numa página. Para terem uma ideia, as páginas serão parecidas com aqueles infográficos e usarei somente recursos do html (não usarei imagens) para fazer essa formas, e posso utilizar várias dessas formas numa páginas só (aproximadamente umas 50).

Minha pergunta é qual desses recursos me é melhor nessa ocasião, se é o canvas ou o svg.
Larissa Aguiar

Larissa Aguiar

Responder

Post mais votado

08/03/2017

Olá Larissa, tudo bem por aí?

Então, considerando que no seu projeto um requerimento é o desenho de infográficos, e que critérios como facilidade do manuseio, qualidade do desenho e que seja o mais leve para aplicar uma página, aqui vai uma breve análise:

Quanto a qualidade, o SVG seria a melhor opção, já que os detalhes do desenho em alta qualidade são preservados ao redimensionar ou imprimir.
Se você quer adicionar interatividade, o SVG ganha um ponto mais, já que permite adicionar e remover facilmente "nós" e tratar eventos.

Canvas seria recomendado para desenhar muitos objetos pequenos em uma superfície relativamente pequena (tipo aqueles mapas de previsão do tempo, com muitos objetos não-poligonais sobre eles), pintar o fundo de tela de um vídeo de outra cor. A especificação do HTML5 Canvas recomenda que seu uso não é recomendado para tarefas aonde outros elementos se encaixem mais.

Para escalabilidade, acessibilidade (o que você pinta em um Canvas é somente um agrupamento de pixels! Não é possível ler ou interpreta-lo por dispositivos de assistência), além de que Canvas só funcionam com Javascript, entao se não está nos planos utilizá-lo, o SVG seria a melhor opção.

Espero que tenha ficado claro, um abraço!

Luis Mesa

Luis Mesa
Responder

Mais Posts

13/03/2017

Larissa Aguiar

Oi Luís, ficou claro sim!

Pelo visto vai ter que ser o SVG mesmo!

Obrigada!
Responder

30/06/2017

Dayan Barros

SVG é o melhor e é mais fácil de fazer, só a animação que não é tão simples.

Agora com o Adobe Animate, você consegue exportar em Canvas. Faz a animação e ele exporta.

Abs
Responder

04/07/2017

Larissa Aguiar

Obrigada pela ajuda Dayan :)

Vi que o illustrator tbm gera SVG para mim!

Facilita bastante :)
Responder

17/07/2017

Raphael Alves

Só para ir se preparando, o google acusa bastante o tamanho do SVG pelo PageSpeed, seria legal você comprimir o SVG.

Abraaço.
Responder

18/07/2017

Dayan Barros

Só para ir se preparando, o google acusa bastante o tamanho do SVG pelo PageSpeed, seria legal você comprimir o SVG.

Abraaço.


No caso, ele acusa se você usar o SVG como background, se usar no html direto, ele não acusa.

Abs
Responder

19/07/2017

Raphael Alves

Com certeza, o melhor seria criar um arquivo só para os SVG's e puxar os mesmos dentro do html.

Abraaço.
Responder

Assista grátis a nossa aula inaugural

Assitir aula

Saiba por que programar é uma questão de
sobrevivência e como aprender sem riscos

Assistir agora

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários, consulte nossa política de privacidade.

Aceitar