jQuery SVG vs. Raphael [폐쇄

https://stackoverflow.com/questions/588718

09-09-2019
|

문제

SVG 및 JavaScript/JQuery를 사용하여 대화식 인터페이스를 작업하고 있으며 라파엘 그리고 JQuery SVG. 알고 싶어요

트레이드 오프가 둘 사이에있는 것
개발 모멘텀이있는 것 같습니다.

Raphael에서 VML/IE 지원 또는 jQuery SVG의 플로팅 능력이 필요하지 않습니다. 나는 주로 SVG 캔버스에서 개별 품목을 만들고 애니메이션하고 조작하는 가장 우아한 방법에 관심이 있습니다.

해결책

나는 최근에 Raphael과 JQuery SVG를 모두 사용했으며 여기에 내 생각이 있습니다.

라파엘

장점 : 좋은 스타터 라이브러리, SVG로 많은 일을 쉽게 할 수 있습니다. 잘 쓰여지고 문서화되어 있습니다. 많은 예와 데모. 매우 확장 가능한 아키텍처. 애니메이션이 좋습니다.

단점 : 실제 SVG 마크 업의 레이어이며 그룹화와 같이 SVG로 더 복잡한 작업을 수행하기가 어렵습니다 (그룹은 지원하지만 그룹은 지원하지 않음). 이미 기존 요소를 편집 할 수 없습니다.

JQuery SVG

장점 : jQuery 플러그인, 이미 jQuery를 사용하는 경우. 잘 쓰여지고 문서화되어 있습니다. 많은 예와 데모. 대부분의 SVG 요소를 지원하고 요소에 쉽게 접근 할 수 있습니다.

단점 : 라파엘만큼 확장 가능한 아키텍처. SVG 요소 구성과 같은 일부는 더 잘 문서화 될 수 있습니다. 이미 기존 요소를 편집 할 수 없습니다. 애니메이션의 SVG 의미론에 의존합니다.

snapsvg 라파엘의 순수한 SVG 버전으로

SnapSVG는 라파엘의 후계자입니다. SVG 지원 브라우저에서만 지원되며 SVG의 거의 모든 기능을 지원합니다.

결론

빠르고 쉬운 일을하고 있다면 Raphael은 쉬운 선택입니다. 더 복잡한 일을하려면 Raphael보다 실제 마크 업을 훨씬 쉽게 조작 할 수 있기 때문에 jQuery SVG를 사용하기로 결정했습니다. 그리고 비 쿼리 솔루션을 원한다면 SnapSVG가 좋은 선택입니다.

다른 팁

후손을 위해, 나는 깨끗한 API와 "무료"IE 지원 때문에 라파엘을 선택하게되었고, 또한 적극적인 개발 유망해 보입니다 (예 : 이벤트 지원은 0.7로 추가되었습니다). 그러나 나는 그 질문을 답변받지 않고 남겨두고, 나는 여전히 JavaScript + SVG 라이브러리를 사용하여 다른 사람들의 경험에 대해 듣고 싶을 것입니다.

나는 라파엘의 열렬한 팬이며 개발 모멘텀이 강력 해지고있는 것 같습니다 (버전 0.85는 지난 주 말에 출시되었습니다). 또 다른 큰 장점은 개발자라는 것입니다. 드미트리 바라 노프 스키, 현재 Raphael 차트 플러그인을 작업 중입니다. G.Raphael, 그 모양은 꽤 매끄럽게 보이는 것처럼 보입니다 (초기 버전의 출력 샘플이 몇 개 있습니다. flickr).

그러나 또 다른 가능한 경쟁자를 SVG 라이브러리 믹스에 던지기 위해 Google의 SVG 웹 실제로 유망한 것처럼 보입니다 (비 SVG 호환 브라우저에서 렌더링하는 데 사용하는 플래시의 열렬한 팬이 아니더라도). 아마도 다가오는 것과 함께 볼 것입니다 SVG 오픈 컨퍼런스.

라파엘은 확실히 설정하고 가기가 더 쉽지만, Raphael에서는 불가능한 SVG를 표현하는 방법이 있다는 점에 유의하십시오. 위에서 언급 한 바와 같이 "그룹"은 없습니다. 이는 좌표 수혈 층을 구현할 수 없음을 의미합니다. 대신 사용 가능한 좌표 변환은 하나뿐입니다.

당신의 디자인이 중첩 좌표 변환에 의존한다면, 라파엘은 당신을위한 것이 아닙니다.

오 라파엘은 6 월부터 크게 움직였습니다. 함께 작동 할 수있는 새로운 차트 라이브러리가 있으며 눈길을 사로 잡습니다. Raphael은 또한 전체 SVG 경로 구문을 지원하며 실제로 고급 경로 방법을 통합하고 있습니다. 내 사이트에서 1.2.8+ (Shameless Plug)를보고 거기에서 Dmitry 사이트로 튀어 오릅니다.http://www.irunmywebsite.com/raphael/raphaelsource.html

나는 그것이 완전히 관련이 없다고 생각하지만 캔버스를 고려 했습니까? 같은 것 프로세스 JS 더 간단하게 만들 수 있습니다.

SVGWeb도 살펴 봐야합니다. 플래시를 사용하여 IE에서 SVG를 렌더링하고 선택적으로 다른 브라우저에서 (브라우저 자체보다 더 많은 것을 지원하는 경우) Flash를 사용합니다.

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

나는 크로스 브라우저 지원, 깨끗한 API 및 일관된 업데이트 (지금까지) 라파엘 뒤에 투표를 던질 것입니다. 그것은 jQuery 와도 아주 훌륭하게 재생됩니다. 가공은 시원하지만 현재 출혈에 대한 물건의 데모로 더 유용합니다.

JavaScript 초보자로서 Rapahel 샘플이 쉽지 않다는 것을 알았습니다. http://cancerbero.mbarreneche.com/raphaeltut, 이것은 실제 단계별 자습서입니다.

IE6/IE7에 관심이없는 사람들을 위해 Raphael을 쓴 같은 사람은 현대식 브라우저를 위해 특별히 SVG 엔진을 만들었습니다. Snap.svg .. 그들은 좋은 문서가있는 정말 멋진 사이트를 가지고 있습니다. http://snapsvg.io

Snap.SVG는 바로 상자에서 사용하기가 더 쉽지 않으며 기존 SVG를 조작/업데이트하거나 새 제품을 생성 할 수 있습니다. Snap.io의 페이지 에서이 내용을 읽을 수는 있지만 여기에 빠른 다운이 있습니다.

단점

Snap의 기능을 사용하려면 이전 브라우저를 지원해야합니다. Raphael은 IE6/IE7과 같은 브라우저를 지원하며 SNAP 기능은 IE9 이상, Safari, Chrome, Firefox 및 Opera에서만 지원됩니다.

프로

마스킹, 클리핑, 패턴, 풀 그라디언트, 그룹 등과 같은 SVG의 전체 기능을 구현합니다.
기존 SVG와 함께 작업 할 수있는 기능 : SNAP와 함께 작동하기 위해 SNAP로 컨텐츠를 생성 할 필요는 없으므로 공통 설계 도구로 컨텐츠를 만들 수 있습니다.
간단하고 구현하기 쉬운 JavaScript API를 사용한 전체 애니메이션 지원
자원 컨테이너 또는 스프라이트 시트와 유사하게 실제로 먼저 렌더링하지 않고도 SVGS (예 : AJAX를 통해로드 된 SVG 파일)와 함께 작동합니다.

관심이 있으시면 확인하십시오. http://snapsvg.io

아직 여기에 언급되지 않았으므로 : 당신은 또한 dojox.rawing, 또한 우수한 SVG 드로잉 기능을 제공합니다. 매우 인상적인 기능 세트가 있습니다. 방금 프로젝트를 시작했지만 Raphael과 JQuerySVG보다 훨씬 우수한 것 같습니다 (적어도 기능 측면에서).

이 프레젠테이션은 Raphael/JQuerySVG 대신 사용하도록 설득했습니다.http://www.slideshare.net/elazutkin/dojo-gfx-svg-in-the-leal-world-2114082

참조:http://dojotoolkit.org/reference-guide/dojox/index.html

Dojocampus에 대한 참조 :http://docs.dojocampus.org/dojox/drawing

dojo 다운로드 (Dojox 포함) :http://dojotoolkit.org/download/

보고 싶은 또 다른 SVG JavaScript 라이브러리는 D3.JS입니다. http://d3js.org/

나는 Raphaeljs를 사용하는 것이 좋습니다. 그러나 Raphaeljs (복잡한 그라디언트 ...)에서는 일부 SVG 및 VML 효과를 달성 할 수 없습니다.

Google은 또한 IE에서 SVG 지원을 가능하게하기 위해 자체 라이브러리를 개발했습니다.http://svgweb.googlecode.com/files/svgweb-2009-08-20-b.zip

VML 및 IE8 지원이 필요하지 않은 경우 캔버스 (예 : PaperJS)를 사용하십시오. Windows 7 용 IE10 데모를보십시오. 캔버스에는 놀라운 애니메이션이 있습니다. SVG는 그들과 가까운 일을 할 수 없습니다. 모든 모바일 브라우저에서 전체 캔버스를 사용할 수 있습니다. SVG는 초기 버전의 Android 2.0-2.3에서 작동하지 않습니다 (내가 아는 것처럼)

예, 캔버스는 확장 가능하지는 않지만 너무 빠르므로 전체 캔버스를 더 빨리 다시 그리면 포트를 스크롤 할 수 있습니다.

내 관점에서 Microsoft의 최적화는 캔버스를 일반 GDI 엔진으로 사용하고 Windows를 위해 수행하는 것과 같은 그래픽 응용 프로그램을 구현하는 수단을 제공합니다.

라이센스 : CC-BY-SA ~와 함께 속성

제휴하지 않습니다 StackOverflow