SVG ou Canvas: Qual o melhor recurso para criar formas geométricas?
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.
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
Curtidas 0
Melhor post
Luis Mesa
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!
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!
GOSTEI 5
Mais Respostas
Larissa Aguiar
06/03/2017
Oi Luís, ficou claro sim!
Pelo visto vai ter que ser o SVG mesmo!
Obrigada!
Pelo visto vai ter que ser o SVG mesmo!
Obrigada!
GOSTEI 1
Dayan Barros
06/03/2017
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
Agora com o Adobe Animate, você consegue exportar em Canvas. Faz a animação e ele exporta.
Abs
GOSTEI 1
Larissa Aguiar
06/03/2017
Obrigada pela ajuda Dayan :)
Vi que o illustrator tbm gera SVG para mim!
Facilita bastante :)
Vi que o illustrator tbm gera SVG para mim!
Facilita bastante :)
GOSTEI 0
Raphael Alves
06/03/2017
Só para ir se preparando, o google acusa bastante o tamanho do SVG pelo PageSpeed, seria legal você comprimir o SVG.
Abraaço.
Abraaço.
GOSTEI 0
Dayan Barros
06/03/2017
Só para ir se preparando, o google acusa bastante o tamanho do SVG pelo PageSpeed, seria legal você comprimir o SVG.
Abraaço.
Abraaço.
No caso, ele acusa se você usar o SVG como background, se usar no html direto, ele não acusa.
Abs
GOSTEI 0
Raphael Alves
06/03/2017
Com certeza, o melhor seria criar um arquivo só para os SVG's e puxar os mesmos dentro do html.
Abraaço.
Abraaço.
GOSTEI 0