jQuery SVG vs. Raphael [fechado]


254

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.

Respostas:


194

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.


15
A documentação do RaphaelJS também não é ótima, é limitada e, às vezes, você precisa entrar na documentação do SVG ou do jQuery para obter todas as informações. Dito isto, com as demo (código fonte) disponíveis, o fórum e muitos usuários, consigo as respostas necessárias.
Roalt 01/09/10

11
Eu apenas comecei usando Raphael e encontrou a documentação a ser alguns dos melhores que eu vim através de uma API JavaScript, com exemplos muito claros ao lado das especificações mais formais
wheresrhys

71
Não esqueça que o RaphaelJS possui compatibilidade com versões anteriores ao VML para Internet Explorer. Isso é ENORME porque o SVG não funciona nos navegadores mais antigos.
Strongriley 19/10/11

3
A pergunta era especificamente sobre SVG, não sobre compatibilidade com versões anteriores. Se o desejo é gráficos vetoriais em vários navegadores, você está correto.
Anatoly G

4
Outro erro do jQuery SVG é que o projeto, embora o projeto seja opensoucer (GPL e MIT), parece ter sido abandonado pelo desenvolvedor (versão 1.4.5, última atualização em 28 de abril de 2012). O jquery.svg.dom causa alguns conflitos com o jQuery 1.8. Idealmente, eu iria esperar por alguém para assumir o projeto e espero colocá-lo em github
Hoffmann

53

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.


1
O bom suporte do IE ao Raphael é ótimo. Quadrados com cantos arredondados no IE ... não há problema;)?
Peter Ajtai

26

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 .


1
É Raphael v. 1.5.2 no momento.
gamedev topright

3
não é grande coisa notar que a versão atual é 2.1.2. Este comentário está esperando para obter a correção por algum outro cara em poucos anos ...
Tebe

Kopat 'Sho Ya Nashel, Alguns anos depois ... Agora é Raphael v2.2.1
Nathangrad

12

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ê.


11

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


6

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


12
Eu olhei para as telas em geral e para o Processamento em particular. O problema é que (até onde eu sei) os eventos do mouse não podem ser facilmente anexados a itens individuais na tela, para recursos como arrastar e soltar, ao contrário do SVG, que é totalmente exposto ao DOM.
27611 Luke Dennis

1
Não fiz um extenso trabalho com canvas, mas observe o plugin Flot-jquery, que usa canvas para gráficos. Ele lida com cliques de mouse muito bem.
Bharani

4
Cliques de mouse sim, mas não eventos dom nos itens da tela. De fato, para o Canvas, você não pode colocar o manipulador de eventos na tela (por causa do IE), embora possa colocá-lo em uma div que contém a tela.
Nosredna

3
a tela é ótima para bitmaps, o SVG é ótimo para gráficos vetoriais. A capacidade de escala do SVG é fantástica para isso. Eu acho que canvas e SVG são tecnologias complementares.
Anatoly G

Em relação aos eventos do mouse para tela, dê uma olhada no Easel.js, que lida com tudo isso para você.
Neil

6

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/


5

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.



5

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


3

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/




0

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.


1
Para renderização gráfica pura, concordo plenamente. A única coisa que o SVG / VML oferece que a tela não oferece é um DOM e uma hierarquia de eventos, pois os elementos desenhados são objetos DOM completos, em vez de um bitmap bruto. Com a tela, as cordas de clique X / Y são as melhores possíveis. De qualquer forma, o projeto já terminou há muito tempo, portanto não é relevante no momento, mas obrigado pela sua resposta. :)
Luke Dennis
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.