SVG ou Canvas: Qual o melhor recurso para criar formas geométricas?
06/03/2017
0
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
Post mais votado
08/03/2017
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
Mais Posts
13/03/2017
Larissa Aguiar
Pelo visto vai ter que ser o SVG mesmo!
Obrigada!
30/06/2017
Dayan Barros
Agora com o Adobe Animate, você consegue exportar em Canvas. Faz a animação e ele exporta.
Abs
04/07/2017
Larissa Aguiar
Vi que o illustrator tbm gera SVG para mim!
Facilita bastante :)
17/07/2017
Raphael Alves
Abraaço.
18/07/2017
Dayan Barros
Abraaço.
No caso, ele acusa se você usar o SVG como background, se usar no html direto, ele não acusa.
Abs
19/07/2017
Raphael Alves
Abraaço.
Clique aqui para fazer login e interagir na Comunidade :)