jQuery SVG vs Raphael [fechado]

https://stackoverflow.com/questions/588718

09-09-2019
|

Pergunta

Eu estou trabalhando em uma interface interativa usando SVG e JavaScript / jQuery, e eu estou tentando decidir entre Raphael jQuery SVG . Eu gostaria de saber

O que os trade-offs são entre os dois
Quando a dinâmica de desenvolvimento parece ser.

Eu não preciso o apoio VML / IE em Raphael, ou as habilidades de plotagem de jQuery SVG. Estou interessado principalmente da maneira mais elegante para criar, animar e manipular itens individuais em uma lona SVG.

Solução

Eu recentemente utilizado tanto Raphael e jQuery SVG - e aqui estão meus pensamentos:

Raphael

Pros: uma biblioteca boa partida, fácil de fazer um monte de coisas com SVG rapidamente. Bem escrito e documentado. Muitos exemplos e demos. arquitetura muito extensível. Grande com animação.

Contras: é uma camada sobre a marcação SVG real, faz com que seja difícil de fazer coisas mais complexas com SVG - como agrupamento (suporta conjuntos, mas não grupos). não faz grande w / a edição de elementos já existentes.

jQuery SVG

Pros: um plugin jQuery, se você já está usando jQuery. Bem escrito e documentado. Muitos exemplos e demos. Suporta a maioria dos elementos SVG, permite o acesso nativo a elementos facilmente

Contras: arquitetura não é tão extensível como Raphael. Algumas coisas poderiam ser mais bem documentados (como configure do elemento SVG). não faz grande w / a edição de elementos já existentes. Depende de semântica SVG para a animação -. O que não é grande

SnapSVG como uma versão SVG pura de Raphael

SnapSVG é o sucessor de Rafael. apoiou-se apenas no SVG habilitado navegadores e suporta quase todos os recursos do SVG.

Conclusão

Se você está fazendo algo rápido e fácil, Raphael é uma escolha fácil. Se você vai fazer algo mais complexo, optei por usar jQuery SVG porque eu posso manipular a marcação real significativamente mais fácil do que com Raphael. E se você quiser uma solução não-jQuery então SnapSVG é uma boa opção.

Outras dicas

Para a posteridade, eu gostaria de nota que acabei escolhendo Raphael, por causa da API limpa e apoio "livre" IE, e também porque o aparência desenvolvimento ativo promissores (apoio evento acabou de ser adicionado em 0,7, por exemplo). No entanto, vou deixar a pergunta sem resposta, e eu ainda estaria interessado em ouvir sobre as experiências dos outros, utilizando bibliotecas Javascript + SVG.

Eu sou um grande fã de Raphael ea dinâmica de desenvolvimento parece estar indo forte (versão 0.85 foi lançado na semana passada). Outra grande vantagem é que seu desenvolvedor, Dmitry Baranovskiy , está atualmente trabalhando em um mapeamento Raphael plugin, g.raphael , que parece como seu promete ser bastante escorregadio (há algumas amostras da saída das primeiras versões em Flickr ).

No entanto, apenas para jogar outro possível candidato na mistura biblioteca SVG, do Google SVG web parece muito promissor na verdade (mesmo que eu não sou um grande fã de flash, que ele usa para processar em navegadores não compatíveis com SVG). Provavelmente um para assistir, especialmente com o próximo SVG abre a conferência .

Raphael é definitivamente mais fácil de configurar e ir andando, mas nota que há maneiras de expressar as coisas em SVG que não são possíveis em Raphael. Como mencionado acima não existem "grupos". Isto implica que você não pode implementar camadas de coordenadas Transfomations. Em vez disso, é apenas um coordenar transformar disponíveis.

Se o seu projeto depende aninhados coordenar transforma, Raphael não é para você.

Oh Raphael mudou significativamente desde junho. Há uma nova biblioteca de gráficos que podem trabalhar com ele e estes são muito atraente. Raphael também suporta sintaxe de caminho SVG completo e está incorporando métodos de caminho muito avançadas. Venha ver 1.2.8+ no meu site (Shameless plug) e, em seguida, saltar sobre ao local do Dmitry de lá. http://www.irunmywebsite.com/raphael/raphaelsource.html

Eu acho que não é totalmente independentes, mas se você considerar tela? algo como JS Processo pode torná-lo mais simples.

Você também deve dar uma olhada em svgweb. Ele usa flash para tornar SVG no IE, e, opcionalmente, em outros navegadores (nos casos em que ele suporta mais do que o próprio navegador faz).

http://code.google.com/p/svgweb/

Vou jogar o meu voto por trás Raphael - o apoio cross-browser, API limpa e atualizações consistentes (até agora) o tornam uma alegria para uso. Ele joga muito bem com jQuery também. Processing é legal, mas mais útil como uma demo para o material sangramento de ponta no momento.

Como um novato Javascript, achei amostras Rapahel não é tão fácil, eu recomendo http://cancerbero.mbarreneche.com / raphaeltut , que é um verdadeiro tutorial passo a passo.

Para aqueles que não se preocupam com IE6 / IE7, o mesmo cara que escreveu Raphael construído um motor SVG especificamente para navegadores modernos: Snap.svg .. eles têm um site muito bom com boa docs: http://snapsvg.io

snap.svg não poderia ser mais fácil de usar para fora da direita da caixa e pode manipular / SVGs existentes de atualização ou gerar novos. Você pode ler essas coisas no snap.io sobre a página, mas aqui está uma rápida lista:

Contras

Para fazer uso dos recursos do encaixe você deve renunciar ao apoio ao navegadores mais antigos. Raphael suporta navegadores como o IE6 / IE7 tirar recursos só são suportados pelo IE9 e para cima, Safari, Chrome, Firefox e Opera.

Pros

Implementos todos os recursos do SVG como mascarar, recorte, padrões, gradientes completas, grupos e muito mais.
capacidade de trabalhar com SVGs existentes:. Conteúdo não precisa ser gerada com a pressão para que ele funcione com Snap, o que lhe permite criar o conteúdo com quaisquer ferramentas de design comum
suporte a animação completa usando um simples, fácil de implementar JavaScript API
Funciona com cordas de SVGs (por exemplo, SVG arquivos carregados via Ajax) sem ter que realmente torná-los primeiro, semelhante a um recipiente recurso ou folha de sprite.

Confira se você estiver interessado: http://snapsvg.io

Uma vez que não é ainda mencionado aqui: Você também deve dar uma olhada Dojox.drawing , que também oferece boas capacidades de desenho SVG. Ele tem um conjunto impressionante de recursos. Eu estou apenas começando um projeto com ele, mas parece-me que é muito superior (pelo menos em termos de recursos) para Raphael e JQuerySVG.

Esta apresentação convenceu-me a usá-lo em vez de Raphael / JQuerySVG: http://www.slideshare.net/elazutkin / dojo-GFX-svg-in-the-real-world-2114082

Referência: http://dojotoolkit.org/reference-guide/dojox/index.html

Referência em DojoCampus: http://docs.dojocampus.org/dojox/drawing

Fazer download Dojo (incluindo Dojox): http://dojotoolkit.org/download/

Outra biblioteca SVG javascript você pode querer olhar é d3.js. http://d3js.org/

Eu prefiro usar RaphaelJS porque tem grandes habilidades cross-browser. No entanto, alguns efeitos SVG e VML não pode ser alcançado com RaphaelJS (gradientes complexos ...).

O Google também desenvolveu uma biblioteca própria para ativar o suporte SVG no IE: http://svgweb.googlecode.com/files/svgweb-2009 -08-20-B.zip

Se você não precisa de suporte VML e IE8, em seguida, usar de lona (PaperJS por exemplo). Olhe mais recente IE10 demos para o Windows 7. Eles têm animações incríveis em Canvas. SVG não é capaz de fazer qualquer coisa perto deles. No geral lona está disponível em todos os navegadores móveis. SVG não está funcionando em versões anteriores do Android 2.0- 2.3 (que eu saiba)

Sim, lona não é escalável, mas tão rápido que você pode redesenhar toda a tela mais rápido, então navegador capaz de porto vista de rolagem.

Da minha perspectiva otimizações da Microsoft fornece meios para usar lona como motor GDI regular e implementar aplicações gráficas como as fazemos para Windows agora.

Licenciado em: CC-BY-SA com atribuição

Não afiliado a StackOverflow