jQuery SVG vs. Raphael [fechado]

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

1. Quais são os trade-offs entre os dois
2. Onde o momento do desenvolvimento parece estar.

Não preciso do suporte do VML / IE no Raphael ou das habilidades de plotagem do jQuery SVG. Estou interessado principalmente na maneira mais elegante de criar, animar e manipular itens individuais em uma tela SVG.

Recentemente, usei o Raphael e o jQuery SVG - e aqui estão os meus pensamentos:

Rafael

Prós: uma boa biblioteca inicial, fácil de fazer muitas coisas com o SVG rapidamente. Bem escrito e documentado. Muitos exemplos e demonstrações. Arquitetura muito extensível. Ótimo com animação.

Contras: é uma camada sobre a marcação SVG real, dificulta a execução de coisas mais complexas com SVG - como agrupamentos (suporta conjuntos, mas não grupos). Não funciona muito bem com edição de elementos já existentes.

jQuery SVG

Prós: um plug-in jquery, se você já estiver usando o jQuery. Bem escrito e documentado. Muitos exemplos e demonstrações. Suporta a maioria dos elementos SVG, permite acesso nativo a elementos facilmente

Contras: arquitetura não tão extensível quanto Rafael. Algumas coisas podem ser melhor documentadas (como configure o elemento SVG). Não funciona muito bem com edição de elementos já existentes. Confia na semântica SVG para animação - o que não é tão bom.

SnapSVG como uma versão SVG pura do Raphael

SnapSVG é o sucessor de Raphael. Ele é suportado apenas nos navegadores habilitados para SVG 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ê for fazer algo mais complexo, optei por usar o jQuery SVG porque posso manipular a marcação real significativamente mais fácil do que com o Raphael. E se você deseja uma solução não-jQuery, o SnapSVG é uma boa opção.

Para a posteridade, gostaria de observar que acabei escolhendo o Raphael, por causa da API limpa e do suporte "gratuito" do IE, e também porque o desenvolvimento ativo parece promissor (o suporte ao evento foi adicionado em 0,7, por exemplo). No entanto, deixarei a pergunta sem resposta e ainda estaria interessado em ouvir sobre as experiências de outras pessoas usando bibliotecas Javascript + SVG.

Eu sou um grande fã de Raphael e o momento de desenvolvimento parece estar forte (a versão 0.85 foi lançada na semana passada). Outra grande vantagem é que seu desenvolvedor, Dmitry Baranovskiy , está atualmente trabalhando em um plug-in de gráficos Raphael, g.raphael , que parece estar se tornando muito liso (existem algumas amostras da saída das primeiras versões no Flickr ) .

No entanto, apenas para lançar outro candidato possível à mistura de bibliotecas SVG, a SVG Web do Google parece muito promissora (mesmo que eu não seja um grande fã do Flash, que ele usa para renderizar em navegadores não compatíveis com SVG). Provavelmente alguém para assistir, especialmente com a próxima conferência SVG Open .

Raphael é definitivamente mais fácil de configurar e seguir em frente, mas observe que existem maneiras de expressar coisas no SVG que não são possíveis no Raphael. Como observado acima, não há "grupos". Isso implica que você não pode implementar camadas de transfomações de coordenadas. Em vez disso, há apenas uma transformação de coordenadas disponível.

Se o seu design depende de transformações de coordenadas aninhadas, o Raphael não é para você.

Oh Raphael mudou significativamente desde junho. Existe uma nova biblioteca de gráficos que pode trabalhar com ela e isso é muito atraente. O Raphael também suporta a sintaxe completa do caminho SVG e está incorporando métodos de caminho realmente avançados. Venha ver 1.2.8+ no meu site (plugue Shameless) e depois pule para o site do Dmitry a partir daí. http://www.irunmywebsite.com/raphael/raphaelsource.html

Eu acho que não é totalmente independente, mas você considerou a tela? algo como Process JS pode torná-lo mais simples.

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

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

Darei meu voto a favor do Raphael - o suporte entre navegadores, a API limpa e as atualizações consistentes (até agora) tornam o uso divertido. Também funciona muito bem com o jQuery. O processamento é legal, mas mais útil como uma demonstração para coisas de ponta no momento.

Como iniciante em Javascript, achei as amostras do Rapahel não tão fáceis, recomendo http://cancerbero.mbarreneche.com/raphaeltut , que é um verdadeiro tutorial passo a passo.

Para quem não se importa com o IE6 / IE7, o mesmo cara que escreveu o Raphael criou um mecanismo svg especificamente para navegadores modernos: Snap.svg .. eles têm um site muito bom com bons documentos: http://snapsvg.io

O snap.svg não poderia ser mais fácil de usar imediatamente e pode manipular / atualizar SVGs existentes ou gerar novos. Você pode ler essas coisas no snap.io sobre a página, mas aqui está uma rápida descrição:

Contras

• Para usar os recursos do snap, você deve renunciar ao suporte para navegadores mais antigos. O Raphael suporta navegadores como IE6 / IE7; os recursos de snap são suportados apenas pelo IE9 e posterior, Safari, Chrome, Firefox e Opera.

Prós

• Implementa todos os recursos do SVG, como máscaras, recortes, padrões, gradientes completos, grupos e muito mais.

• Capacidade de trabalhar com SVGs existentes: o conteúdo não precisa ser gerado com o Snap para que ele funcione com o Snap, permitindo que você crie o conteúdo com qualquer ferramenta de design comum.

• Suporte completo a animação usando uma API JavaScript simples e fácil de implementar

• Funciona com cadeias de SVGs (por exemplo, arquivos SVG carregados via Ajax) sem precisar renderizá-los primeiro, semelhante a um contêiner de recursos ou uma planilha de sprites.

verifique se você está interessado: http://snapsvg.io

Como ainda não foi mencionado aqui: você também deve dar uma olhada no Dojox.drawing , que também fornece bons recursos de desenho SVG. Ele tem um conjunto impressionante de recursos. Estou apenas começando um projeto com ele, mas parece-me que é muito superior (pelo menos em termos de recursos) ao Raphael e ao JQuerySVG.

Esta apresentação me convenceu 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 no Dojocampus: http://docs.dojocampus.org/dojox/drawing

Faça o download do Dojo (incluindo o Dojox): http://dojotoolkit.org/download/

Outra biblioteca svg javascript que você pode querer procurar é o d3.js. http://d3js.org/

Eu prefiro usar o RaphaelJS porque possui ótimas habilidades entre navegadores. No entanto, alguns efeitos SVG e VML não podem ser alcançados com o RaphaelJS (gradientes complexos ...).

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

Se você não precisar de suporte a VML e IE8, use o Canvas (PaperJS, por exemplo). Veja as últimas demonstrações do IE10 para Windows 7. Elas têm animações incríveis no Canvas. O SVG não é capaz de fazer nada próximo a eles. O Canvas geral está disponível em todos os navegadores móveis. O SVG não está funcionando nas versões anteriores do Android 2.0- 2.3 (como eu sei)

Sim, o Canvas não é escalável, mas é tão rápido que você pode redesenhar todo o canvas mais rapidamente do que o navegador capaz de rolar a porta de exibição.

Do meu ponto de vista, as otimizações da Microsoft oferecem meios de usar o Canvas como mecanismo GDI comum e implementar aplicativos gráficos, como fazemos agora no Windows.