SVG와 JavaScript / jQuery를 사용하여 대화 형 인터페이스를 작업 중이며 Raphael 과 jQuery SVG 중에서 결정하려고합니다 . 알고 싶습니다
- 둘 사이의 절충점
- 개발 추진력이있는 곳.
Raphael에서 VML / IE 지원이나 jQuery SVG의 플로팅 기능이 필요하지 않습니다. SVG 캔버스에서 개별 항목을 생성, 애니메이션 및 조작하는 가장 우아한 방법에 주로 관심이 있습니다.
SVG와 JavaScript / jQuery를 사용하여 대화 형 인터페이스를 작업 중이며 Raphael 과 jQuery SVG 중에서 결정하려고합니다 . 알고 싶습니다
Raphael에서 VML / IE 지원이나 jQuery SVG의 플로팅 기능이 필요하지 않습니다. SVG 캔버스에서 개별 항목을 생성, 애니메이션 및 조작하는 가장 우아한 방법에 주로 관심이 있습니다.
답변:
최근에 Raphael과 jQuery SVG를 모두 사용했으며 다음은 내 생각입니다.
장점 : SVG를 사용하여 많은 작업을 쉽게 수행 할 수있는 좋은 스타터 라이브러리. 잘 작성하고 문서화했습니다. 많은 예제와 데모. 매우 확장 가능한 아키텍처. 애니메이션에 좋습니다.
단점 : 실제 SVG 마크 업 위에있는 레이어이므로 그룹화 (그룹은 지원하지만 세트는 지원하지 않음)와 같이 SVG로 더 복잡한 작업을 수행하기가 어렵습니다. 이미 존재하는 요소를 훌륭하게 편집하지 않습니다.
장점 : 이미 jQuery를 사용하고 있다면 jquery 플러그인. 잘 작성하고 문서화했습니다. 많은 예제와 데모. 대부분의 SVG 요소를 지원하고 요소에 쉽게 액세스 할 수 있습니다
단점 : 라파엘만큼 확장 할 수없는 아키텍처. SVG 요소 구성과 같은 일부 문서를 더 잘 문서화 할 수 있습니다. 이미 존재하는 요소를 훌륭하게 편집하지 않습니다. SVG 시맨틱은 애니메이션에 의존합니다.
SnapSVG는 Raphael의 후속 제품입니다. SVG 지원 브라우저에서만 지원되며 SVG의 거의 모든 기능을 지원합니다.
빠르고 쉬운 일을한다면, Raphael은 쉬운 선택입니다. 좀 더 복잡한 작업을 수행하려는 경우 Raphael보다 실제 마크 업을 훨씬 쉽게 조작 할 수 있기 때문에 jQuery SVG를 사용하기로 선택했습니다. 비 jQuery 솔루션을 원한다면 SnapSVG가 좋은 옵션입니다.
나는 Raphael의 열렬한 팬이며 개발 모멘텀이 강해지고있는 것 같습니다 (지난 주에 0.85 버전이 출시되었습니다). 또 다른 큰 장점은 개발자이다 드미트리 Baranovskiy는 , 현재 플러그인, 차트 라파엘에 노력하고 있습니다 g.raphael를 (출력의 몇 가지 샘플에 이른 버전이있다 그것의 꽤 빠르로 거듭나 같이있는 모습, 플리커 ) .
그러나 SVG 라이브러리 믹스에 또 다른 경쟁자를 던지기 위해 Google의 SVG 웹 은 실제로 매우 유망한 것으로 보입니다 (SVG 호환 브라우저가 아닌 브라우저에서 렌더링하는 데 사용되는 플래시의 팬은 아니지만). 아마도 곧 다가올 SVG Open 컨퍼런스에서 볼 것 입니다.
오 라파엘은 6 월부터 크게 성장했습니다. 함께 사용할 수있는 새로운 차트 라이브러리가 있으며 이는 매우 주목할만한 것입니다. Raphael은 완전한 SVG 경로 구문을 지원하며 실제로 고급 경로 방법을 통합하고 있습니다. 내 사이트 (Shameless plug)에서 1.2.8 이상을 본 다음 그곳에서 Dmitry 사이트로 튀어 오릅니다. http://www.irunmywebsite.com/raphael/raphaelsource.html
나는 그것이 전혀 관련이 없다고 생각하지만 캔버스를 고려 했습니까? Process JS 와 같은 것이 더 간단해질 수 있습니다.
svgweb도 살펴 봐야합니다. 플래시를 사용하여 IE에서 svg를 렌더링하고 선택적으로 다른 브라우저에서 (브라우저 자체보다 많은 것을 지원하는 경우).
Javascript 초보자로서 Rapahel 샘플이 그렇게 쉽지 않다는 것을 알았습니다. http://cancerbero.mbarreneche.com/raphaeltut 은 실제 단계별 자습서입니다.
IE6 / IE7에 관심이없는 사람들을 위해 Raphael을 작성한 동일한 사람은 현대 브라우저를 위해 특별히 svg 엔진을 만들었습니다 : Snap.svg . 그들은 좋은 문서가있는 정말 멋진 사이트를 가지고 있습니다 : http://snapsvg.io
snap.svg는 즉시 사용하기가 쉽지 않고 기존 SVG를 조작 / 업데이트하거나 새로운 SVG를 생성 할 수 있습니다. snap.io에서 페이지에 관한 내용을 읽을 수 있지만 다음과 같이 요약하면됩니다.
단점
찬성
마스킹, 클리핑, 패턴, 전체 그라디언트, 그룹 등과 같은 SVG의 모든 기능을 구현합니다.
기존 SVG로 작업 할 수있는 기능 : Snap을 사용하기 위해 Snap으로 컨텐츠를 생성 할 필요가 없으므로 일반적인 디자인 도구를 사용하여 컨텐츠를 작성할 수 있습니다.
간단하고 구현하기 쉬운 JavaScript API를 사용하여 완벽한 애니메이션 지원
리소스 컨테이너 나 스프라이트 시트와 마찬가지로 SVG를 실제로 렌더링하지 않고도 SVG 문자열 (예 : Ajax를 통해로드 된 SVG 파일)과 함께 작동합니다.
관심이 있으시면 확인하십시오 : http://snapsvg.io
여기에서는 아직 언급되지 않았 으므로 Dojox.drawing 도 살펴보아야합니다. Dojox.drawing 도 우수한 SVG 그리기 기능을 제공합니다. 매우 인상적인 기능 세트가 있습니다. 방금 프로젝트를 시작했지만 Raphael 및 JQuerySVG보다 훨씬 뛰어납니다 (적어도 기능면에서).
이 프리젠 테이션은 Raphael / JQuerySVG 대신에이를 사용하도록 설득했습니다 : http://www.slideshare.net/elazutkin/dojo-gfx-svg-in-the-real-world-2114082
참조 : http://dojotoolkit.org/reference-guide/dojox/index.html
Dojocampus에 대한 참조 : http://docs.dojocampus.org/dojox/drawing
Dojo 다운로드 (Dojox 포함) : http://dojotoolkit.org/download/
보려는 또 다른 svg 자바 스크립트 라이브러리는 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 지원이 필요하지 않은 경우 Canvas (예 : PaperJS)를 사용하십시오. Windows 7 용 최신 IE10 데모를보십시오. Canvas에는 놀라운 애니메이션이 있습니다. SVG는 그들과 가까운 어떤 것도 할 수 없습니다. 캔버스는 모든 모바일 브라우저에서 사용할 수 있습니다. SVG는 Android 2.0-2.3의 초기 버전에서 작동하지 않습니다 (알다시피)
예, Canvas는 확장 할 수 없지만 너무 빨라 브라우저가 뷰 포트를 스크롤 할 수있는 것보다 전체 캔버스를 더 빨리 다시 그릴 수 있습니다.
내 관점에서 볼 때 Microsoft의 최적화 기능은 Canvas를 일반 GDI 엔진으로 사용하고 Windows와 같은 그래픽 응용 프로그램을 구현하는 수단을 제공합니다.