그래픽 생성을위한 11 가지 JavaScript 프레임 워크

자바 스크립트 프레임 워크 : 그래픽 이미지
(이미지 출처 : Future)

자바 스크립트 프레임 워크는 다양한 기능을 수행 할 수 있습니다. 여기에서는 멋진 그래픽을 만드는 데 도움이되는 몇 가지 라이브러리를 살펴 보겠습니다.

브라우저는 몇 가지 고성능 드로잉 API 및 표면을 제공합니다. 가장 주목할만한 것은 캔버스 요소와 확장 가능한 벡터 그래픽 (SVG)입니다. 이 두 기능은 이제 거의 모든 데스크톱 및 모바일 브라우저에서 사용할 수 있지만,이를 사용하는 데 필요한 API는 다소 낮은 수준이며 '낮은 수준'은 일반적으로 단순한 작업을 수행하기 위해 지루하고 중복 된 코드로 많이 변환됩니다.

지루하고 중복 된 코드를 작성하는 것은 개발자가 일반적으로 즐겨하는 일 목록에서 높지 않기 때문에 최고의 코드 편집기 그리고 프로그래밍을위한 최고의 노트북 , 고맙게도 모든 브라우저 그리기 요구 사항에 도움이되는 몇 가지 라이브러리가 있습니다.



이 기사에서는 사용 가능한 몇 가지 옵션을 살펴 보겠습니다. 가장 인기있는 자바 스크립트 라이브러리를 살펴보고 강점과 약점에 대해 이야기하겠습니다. 우리는 또한 매우 흥미로운 틈새 요구를 충족시키는 잘 알려지지 않은 프로젝트 중 일부에 대해 약간의 설명을 할 것입니다.이 프로젝트는 필요할 때까지 필요하지 않은 종류입니다. 처음부터 시작 하시겠습니까? 탑 시도 웹 사이트 빌더 , 고려할 웹 호스팅 서비스가 귀하에게 적합합니다.

다른 각도에서 같은 얼굴을 그리는 방법

01. D3.js

그래픽 JavaScript 프레임 워크 : D3.js

D3.js는 Shirley Wu의 대화 형 Hamilton 시각화가 보여주는 것처럼 무한한 가능성을 제공합니다.(이미지 출처 : D3)

D3.js JavaScript 그래픽 라이브러리의 큰 보스입니다. 매주 백만 건 이상의 다운로드 해발 , 그것은 아마도 모든 그래픽 라이브러리 중에서 가장 잘 알려져 있고 널리 사용되는 것입니다. 그것은 자신의 Wikipedia 페이지 . 그리고, 그것을 직시합시다, 당신이 큰 시간에 성공했다는 것을 알 때 그렇지 않습니까?

D3를 사용하면 모든 종류의 데이터 시각화를 구축 할 수 있습니다. 당신은 그것의 예제 페이지 가능성의 세계를 볼 수 있습니다. 더 나은 방법은 Shirley Wu의 방문입니다. 대화 형 시각화 당신이 정말로 마음을 날리고 싶다면 뮤지컬 해밀턴의 모든 라인의.

D3는 포괄적 인 도구입니다. 자체 DOM 선택, AJAX 기능 및 독점 난수 생성기가 있습니다. D3의 각 구성 요소는 가져와야하는 자체 노드 모듈입니다. 예를 들어 선택 모듈은 d3 선택이라고합니다. 배열, 모양, 색상, 끌어서 놓기, 시간 등을위한 모듈도 있습니다.

D3의 힘은 복잡성의 절충안과 함께 제공됩니다. 학습 곡선은 가파르고 코드는 여전히 장황 할 수 있습니다. 막대 차트처럼 간단한 것을 만들려면 축, 눈금, 눈금을 수동으로 조립하고 막대를 나타내는 직사각형을 그려야합니다. 개발자들은 종종 D3를 효과적으로 사용하기 위해 필요한 낮은 수준의 이해에 대해 불평합니다.

복잡한 데이터 시각화를 만들려면 만들려는 시각화에 대한 낮은 수준의 이해가 필요하기 때문입니다. D3는 미리 구운 차트에 가장 적합한 옵션이 아닙니다. 이를 위해 '에서 찾을 수있는 몇 가지 다른 선택 사항이 있습니다. 성공의 구덩이 ' 훨씬 더 빨리.

D3는 캔버스 및 SVG로 렌더링 할 수 있습니다. 그러나 D3의 진정한 마법은 생성하는 그래픽에 '데이터 바인딩'기능이 있다는 것입니다. 들어오는 데이터가 변경됨에 따라 변경되는 차트를 생각해보십시오. SVG에서 각 그래픽 항목은 선택하고 업데이트 할 수있는 개별 요소입니다. 이것은 캔버스에서는 불가능하며 D3는 근본적으로 데이터 시각화를 지원하기 때문에 SVG가 일반적으로 선호되는 출력 형식입니다.

02. Chart.js

그래픽 JavaScript 프레임 워크 : Chart.js

Chart.js에는 미리 작성된 8 가지 차트 유형이 있으므로 사용자가 빠르게 시작하고 실행할 수 있습니다.(이미지 출처 : Chart.js)

Chart.js JavaScript로 강력한 차트를 작성하기위한 오픈 소스 프로젝트입니다. Chart.js와 D3의 큰 차이점은 D3로 거의 모든 것을 빌드 할 수 있지만 Chart.js는 선, 막대, 원형, 극좌표, 거품, 분산 형, 영역 및 혼합의 8 가지 사전 빌드 된 차트 유형으로 제한한다는 것입니다. 이것이 제한적인 것처럼 보이지만 Chart.js를 시작하기가 더 간단 해집니다. 이것은 데이터 VI의 전문가는 아니지만 기본 차트에 대해 알고있는 사람들에게 특히 그렇습니다.

구문은 모두 차트 유형을 중심으로 작성됩니다. 기존 캔버스 요소에서 새 차트를 초기화하고 차트 유형을 설정 한 다음 차트 옵션을 설정합니다. Chart.js는 캔버스로만 렌더링됩니다. 모든 최신 브라우저가 HTML 캔버스 요소를 지원하기 때문에 문제가되지 않지만 SVG 지원에 대한 요구 사항이있는 개발자에게는 문제가 될 수 있습니다.

또한 가능한 애니메이션에 제한이 있음을 의미합니다. 기본적으로 Chart.js는 모든 여유 방정식을 지원하며 하나의 속성 설정으로 애니메이션이 지정됩니다. 이렇게하면 애니메이션 차트를 빠르고 쉽게 얻을 수 있지만 개별 SVG 요소가 없으면 CSS3 전환 및 애니메이션을 사용하여 복잡한 애니메이션을 수행 할 수 없습니다.

D3와 달리 Chart.js는 모듈식이 아니므로 모든 함수 및 차트 유형에 대한 지원을 얻으려면 하나의 JavaScript 포함 만 필요합니다. 이렇게하면 시작하기가 더 쉬워 지지만 자산이 훨씬 더 커질 수 있습니다. 시간 축이 필요한 경우 특히 그렇습니다. Chart.js에는 최대 51kb의 압축 및 압축 된 Moment.js가 필요합니다. D3보다 Chart.js로 막대 차트를 만드는 것이 훨씬 쉽습니다. 그러나 단순함과 함께 제공되는 천장이 있습니다. 당신은 그것이 상자에서 할 일의 한계에 도달했음을 알 수 있습니다. 종종 개발자는 Chart.js와 같은 솔루션으로 시작한 다음 D3로 졸업합니다.

Chart.js의 단순함이 마음에 든다면 다음 옵션 인 Chartist를 정말 좋아할 것입니다.

03. 차티스트

그래픽 JavaScript 프레임 워크 : Chartist

Chartist 사용의 큰 이점 중 하나는 기본적으로 반응한다는 것입니다.(이미지 출처 : Chartist)

지도 작성자 은 크기가 작고 시작하기 쉬운 단순하고 간소화 된 차트 라이브러리를 목표로합니다. 또한 기본적으로 반응하도록 설계되었습니다. D3와 같은 프레임 워크는 차트 크기를 자동으로 조정하지 않지만 개발자가 이벤트에 연결하고 그래픽을 다시 그려야하기 때문에 이것은 생각보다 더 큰 문제입니다.

Chartist는 Chart.js에 비해 작습니다. 종속성이 전혀없는 10KB에 불과합니다. 선, 막대 및 원형의 세 가지 차트 유형 만 제공하기 때문일 수 있습니다. 이러한 유형에는 변형이 있지만 (예 : 산점도는 Chartist에서 선 유형 임) 작은 크기와 구성의 용이성은 즉시 사용할 수있는 차트 유형이 없기 때문에 상쇄됩니다.

Chartist는 캔버스 대신 SVG로 렌더링하여 모양과 느낌 측면에서 훨씬 더 사용자 정의 할 수있을뿐만 아니라 상호 작용 및 애니메이션에 대한 훨씬 더 많은 제어를 제공합니다. 그러나 캔버스에 대한 렌더링 액세스 권한이 없다는 것은 특정 작업을 수행하는 데 더 많은 시간을 할애 할 수 있음을 의미합니다. 예를 들어 캔버스를 이미지 (toDataURI)로 렌더링하는 API가 있습니다. SVG에는 해당 옵션이 없으므로 차트를 이미지로 내보내는 것이 훨씬 더 까다로울 것입니다. 이상적인 세계에서는 두 모드로 렌더링 할 수있는 옵션이 있습니다.

Chartist 차트는 사용 가능한 옵션이 적기 때문에 Chart.js보다 구성하기가 더 쉽습니다. 상당히 많은 기능으로 이러한 차트를 확장 할 수 있지만 단순성에 초점을 맞춘다는 것은 정의상 단순하다는 것을 의미합니다. Chartist는 기본적인 차트 솔루션이 필요한 사람들을위한 훌륭한 솔루션입니다. 차트는 특정 축을 따라 데이터를 설정하고 특정 방식으로 그룹화하는 방법에 대한 일종의 지식이 필요하기 때문에 본질적으로 구성하기가 어렵습니다. Chartist는 차트 작성 부분을 가능한 한 간단하게 만들지 만 차트 생성에 익숙해지면 더 강력한 솔루션이 필요할 수 있습니다.

Chartist는 React 및 Angular를 포함한 오픈 소스 프레임 워크 지원도 나열합니다. 사이트에는 Vue 패키지에 대한 언급이 없습니다.

04. Britecharts

그래픽 JavaScript 프레임 워크 : Britecharts

Britecharts는 D3를 래핑하므로 작동 방식을 배우지 않고도 D3 기능을 즐길 수 있습니다.(이미지 출처 : Britecharts)

Britecharts D3를 래핑하는 차트 라이브러리입니다. 이것은 Eventbrite에 의해 만들어졌으며, 그는 허용 Apache V2 라이선스에 따라 프로젝트를 오픈 소스 화했습니다.

매우 최소한이지만 미적으로 만족스러운 차트 세트를 제공합니다. 바닐라 D3를 사용하여 막대 차트를 만드는 것은 상당한 작업이 될 수 있지만 Britecharts의 래핑은 새 barChart 개체를 만든 다음 너비와 높이를 설정하는 것처럼 간단합니다.

barChart.width(500).height(500);

Britecharts는 Chartist와 같은 라이브러리에서 제공하는 것보다 많은 선, 막대, 도넛, 글 머리 기호, 산점도, 스파크 라인 및 단계와 같은 모든 기본 차트 유형을 지원합니다. 또한 기본 도구 설명 및 범례 기능을 제공합니다. 차트의 애니메이션은 내장되어 있으며 Eventbrite는 아름다운 색 구성표를 제공합니다.

궁극적으로 Britecharts는 기본 차트 기능을위한 훌륭한 옵션입니다. 구성 개체는 매우 간단하며 D3 자체에 대해 알 필요없이 D3의 강력한 기능을 사용할 수 있습니다. 많은 개발자는 D3를 사용하여 처음부터 완전한 차트를 작성하는 것보다이 옵션이 더 매력적인 옵션임을 알게 될 것입니다.

안드로이드 폰용 스타일러스 만드는 법

또한 D3의 데이터 바인딩 측면에 중점을 두어 기본 데이터가 변경 될 때 변경해야하는 차트에 매우 적합합니다. 사용 가능한 유형이 다소 제한적이지만 확장하여 고유 한 새 차트 유형을 만들 수있는 기본 차트 유형도 있습니다.

05. 다이빙 유형

그래픽 JavaScript 프레임 워크 : Taucharts

Taucharts는 사용자에게 데이터 시각화의 기본 사항을 알려줍니다.(이미지 출처 : Taucharts)

다이빙 스타일 구현하기 쉬운 API로 D3의 복잡성을 감싼 또 다른 차트 솔루션입니다. 그것은 개념을 기반으로 구축되었습니다 그래픽의 문법 , 작가 Leland Wilkinson의 책. 다양한 종류의 데이터를 표시하기 위해 데이터 시각화를 사용하는시기와 방법에 대한 이해를 제공합니다.

기본적으로 선, 막대, 산점도, 영역 및 패싯 차트가 있습니다. 그러나 The Grammar of Graphics의 개념을 'Taucharts Language'로 구현하여 자체 데이터 시각화를 구현할 수있는 프레임 워크를 제공합니다.

Taucharts는 매우 매력적으로 보이며 D3를 기반으로 구축되어 매력적이고 강력한 옵션입니다. 하지만 개발자는 그 힘을 최대한 활용하기 위해 The Grammar of Graphics를 읽어야한다는 느낌이 있습니다.

지금까지 차트와 데이터 시각화 만 다루었습니다. 이는 차트 그리기가 브라우저의 그래픽 라이브러리에 대한 가장 일반적인 사용 사례이기 때문입니다. 그러나 결코 유일한 것은 아닙니다. 그래픽에 대한 또 다른 일반적인 시나리오는 물론 애니메이션입니다.

06. Two.js

그래픽 JavaScript 프레임 워크 : Two.js

Twos.js는 2D 애니메이션을 처리 할 때 자체적으로 제공됩니다.(이미지 출처 : Two.js)

D3.js와 혼동하지 마십시오. two.js 웹에서 2 차원 드로잉을위한 오픈 소스 JavaScript 라이브러리입니다. 또한 최신 브라우저에서 SVG, Canvas 및 WebGL의 세 가지 그래픽 옵션을 모두 타겟팅 할 수 있습니다.

Two.js는 그리기에 엄격하게 초점을 맞추고 미리 작성된 차트 또는 선택할 수있는 대화 형 구조가 없다는 점에서 D3와 다소 유사합니다. 즉, D3와 마찬가지로 수행하려는 드로잉 유형과 two.js가 제공하는 구성으로이를 달성하는 방법에 대한 기본적인 이해가 필요합니다. 원을 그리는 것은 다소 간단합니다. 반면에 상세한 애니메이션을 만드는 것은 훨씬 더 복잡한 작업입니다. Two.js는 전체 드로잉의 지루함이 아닌 드로잉 모양의 지루함 만 추상화합니다.

Two.js는 또한 생성 한 모든 개체를 추적하므로 언제든지 참조하고 애니메이션을 적용 할 수 있습니다. 이것은 게임 개발을하고 있고 충돌 감지와 같은 것을 추적해야하는 자산이있는 경우 특히 중요합니다. 애니메이션 루프가 내장되어있어 애니메이션 프레임에 대해 걱정할 필요가 없으며 다음과 같은 애니메이션 라이브러리에 쉽게 연결할 수 있습니다. GreenSock .

two.js는 강력하지만 자유 형식의 특성으로 인해 일부 개발자는 시작 방법을 모를 수 있으며 2D 드로잉 및 애니메이션을위한 틈새 도구에 가깝습니다. 또 다른 훌륭한 옵션은 pts.js입니다.

07. Pts.js

그래픽 자바 스크립트 프레임 워크 : Pts.js

icloud storage is full message를 중지하는 방법
미리 결정된 Pts 방법론은 대화 형 시각화 및 애니메이션에 적합합니다.(이미지 출처 : pts.js)

Pts 2 차원 도면 라이브러리이기도합니다. 그러나 two.js와는 근본적으로 다른데, 이는 드로잉과 애니메이션을 어떻게 조립해야하는지에 대해 미리 결정된 방법론 (공간, 형태 및 포인트)을 사용하기 때문입니다. 개발자가 이것을 설명하기 위해 사용하는 비유는 실제 세계에서 나온 것입니다. 공간은 종이입니다. 형태는 연필입니다. 그리고 요점은 당신의 아이디어입니다.

구현 측면에서 공간은 캔버스 요소입니다. 캔버스 요소가 생성되면 여기에 플레이어를 추가 할 수 있습니다. 이들은 함수 또는 객체 일 수 있습니다. 이러한 기능과 객체는 공간에있는 미리 결정된 인터페이스를 따라야합니다. Pts는 TypeScript를 기반으로하므로 사용하는 도구가 자동 완성 기능이있는 도구를 제안 할 가능성이 높으므로 이들이 무엇인지 추측 할 필요가 없습니다.

예를 들어 공백에는 지정할 수있는 시작 기능이 있습니다. 공간이 준비되었을 때 실행되는 코드입니다. 이러한 기능 내에서 공간에 대한 그리기는 양식 객체를 사용하여 발생합니다. 양식 개체는 모든 종류의 모양을 그릴 수 있으며 점은 이러한 항목이 공간에있는 위치입니다.

Pts는 주로 대화 형 시각화 및 애니메이션을 만들기 위해 설계된 것으로 보입니다. 그것의 구현은 매우 추상적이지만 흥미 롭습니다. 개발자는 Pts가 요구하는 '공간, 형태, 점'모델을 이해하기 어려울 수 있습니다. 이것은 단순히 도형을 그리고 애니메이션화하는 것 외에도 해결해야 할 또 다른 정신적 장애물입니다.

08. Anime.js

그래픽 JavaScript 프레임 워크 : Anime.js

Anime.js는 애니메이션 타이밍에 도움이되는 엇갈린 시스템에서 작동합니다.(이미지 출처 : Anime.js)

Anime.js 주로 애니메이션 라이브러리입니다. 겹치거나 다른 실행의 발생에 의존하는 복잡한 애니메이션을 더 간단하게 만들 수 있도록 내장 스 태거 시스템이 있습니다. 애니메이션이 함께 시간을 맞추거나 서로에 의해 트리거되는 것은 일반적입니다. 스 태거 링 시스템은 페이지에서 발생하는 모든 일을 추적하고 애니메이션 타이밍을 수동으로 구성하는 오버 헤드를 약간 덜어 주므로이를 구현하기가 더 쉽습니다.

지금까지 다룬 그리기 라이브러리와 달리 anime.js에는 도형 그리기를위한 API가 없습니다. 대신 모양이 이미 존재하고 애니메이션을 적용하려고한다고 가정합니다. 이것은 two.js와 같은 라이브러리와 함께 사용하기에 좋습니다. Anime.js는 CSS 속성, SVG, DOM 및 심지어 JavaScript 객체에 애니메이션을 적용하는 기능을 지원합니다.

Anime.js는 기존 그림을 애니메이션하는 데 좋은 옵션이며 다른 라이브러리와 결합 될 가능성이 높습니다. GreenSock과 같은 것에 대한 대안으로 간주되어야하며 다른 드로잉 라이브러리를 대체하는 것이 아닙니다. Anime.js는 대화 형 웹 경험의 일부로 발생해야하는 더 복잡한 애니메이션에 사용될 수 있습니다.

09. PixiJS

그래픽 JavaScript 프레임 워크 : PixiJS

PixiJS는 Adobe Flash에서 빌드 및 사용 된 API가 포함 된 2D 드로잉 라이브러리이므로(이미지 출처 : PixiJS)

PixiJS 또 다른 2D 도면 라이브러리입니다. 주요 목적은 2D 그래픽을보다 쉽게 ​​표시, 애니메이션 및 관리 할 수 ​​있도록하는 것이므로, 그리고 애니메이션을 적용해야하는 모든 모양과 이미지를 유지하는 것에 대해 걱정하지 않고 경험이나 게임 구축에 집중할 수 있습니다. 게임을 제작하는 경우 자산 (또는 스프라이트)이 관리하기 어려운 숫자로 빠르게 팽창 할 수 있습니다. (저장할 자산이 많습니까? 가장 신뢰할 수있는 곳에 안전하게 보관하십시오. 클라우드 스토리지 .)

PixiJS의 매력적인 측면은 Adobe Flash에서 광범위하게 구축되고 사용 된 API에서 비롯된다는 것입니다. 이는 경험이 친숙하게 느껴지므로 Flash 배경에서 온 개발자에게 큰 이점입니다. 또한 Apple의 SpriteKit과 유사합니다.

PixiJS는 게임 엔진이 아니므로 게임에 사용하는 경우 충돌 감지와 같은 작업을 처리 할 도구 나 물리학을 찾을 수 없습니다. 대담한 느낌이 든다면 실제 게임 엔진이나 자신이 직접 만든 엔진으로 포장해야합니다.

PixiJS는 WebGL로 렌더링합니다. WebGL은 브라우저에서 GPU 가속 그래픽을 수행하기위한 엔진입니다. 즉, 많은 시스템 리소스를 사용하고 개별 GPU (그래픽 처리 장치)로 렌더링 할 때 최상의 성능을 발휘하는 애니메이션 및 그래픽에 유용합니다. 이는 게임 및 3D 그래픽 프로그램을 실행하는 데 필요한 데스크탑 인 OpenGL을 기반으로합니다. 내부적으로 WebGL은 HTML 캔버스 요소를 사용합니다.

진지한 그래픽 개발자는 WebGL의 힘에 감사 할 것입니다. 그러나 이러한 경험은 저전력 시스템에서 저하 될 수 있습니다. 이 기사를 모으는 동안에도 많은 PixiJS 데모가 내 시스템에서 눈에 띄는 속도 저하를 일으켜 복잡한 그래픽 및 애니메이션에 필요한 고급 기능이 없습니다.

어도비 애프터 이펙트와 같은 무료 비디오 편집 소프트웨어

10. Zdog

그래픽 JavaScript 프레임 워크 : Zdog

Zdog은 2D 도면을 사용하여 3D 모양을 제공합니다.(이미지 출처 : Zdog)

지금까지 논의한 대부분의 드로잉 엔진은 2 차원입니다. 화면과의 상호 작용의 대부분은 X 및 Y 축을 따라 2 차원에서 발생하기 때문입니다. 3 차원 도면과 애니메이션은 일반적으로 훨씬 더 복잡합니다.

Zdog 거의 본질적으로 평평한 의사 3D 경험을 구축하기위한 라이브러리입니다. 3D 공간에서 드로잉을 개념화하는 동안 평면 모양으로 렌더링하기 때문에 가상 3D라고합니다. 시각적 트릭을 사용하여 2D 개체를 3D로 표시합니다. 그 효과는 정말 흥미 롭습니다. 애니메이션을 보면 완전히 입체적으로 보이지만 스크린 샷을 찍으면 평면 이미지입니다. 다음은 회전 마리오 데모입니다.

렌더링이 2D이기 때문에 Zdog은 Canvas 또는 SVG로 렌더링 할 수 있습니다. Zdog은 단순한 개체의 3D 애니메이션을위한 환상적인 옵션입니다. 특히 해당 자산이 평면 디자인의 측면을 통합하는 경우에 그렇습니다. 3D 애니메이션을 원하지만 3D 그래픽 엔진의 복잡한 세계에 갇히고 싶지 않은 개발자는 Zdog이 적절한 솔루션을 찾을 수 있습니다. 또한 평면 이미지에 초점을 맞춘 Zdog은 복잡한 그래픽 이미지의 3D 렌더링에 필요한 것보다 훨씬 더 간단한 인터페이스와 훨씬 높은 성능을 제공 할 수 있습니다.

자산 관리 및 충돌 감지와 같은 게임 엔진의 요소가 없으므로 게임 엔진에 래핑하거나 이러한 고려 사항을 수동으로 처리해야합니다. 이는 Zdog이 랜딩 페이지의 분리 된 3D 애니메이션에 가장 적합하다는 것을 의미합니다.

11. Snap.svg

그래픽 JavaScript 프레임 워크 : Snap.svg

Snap.svg에는 SVG 요소를 선택한 다음 여기에 요소를 그릴 수있는 API가 있습니다.(이미지 출처 : Snap.SVG)

Snap.svg 'jQuery가 DOM을 사용하는 것처럼 쉽게 SVG 자산으로 작업 할 수 있습니다'라고 말합니다. jQuery 참조에서 Snap.svg가 약간 오래되었지만 API가 jQuery만큼 쉽게 느껴지고 이는 매우 강력한 것임을 알 수 있습니다.

Snap.svg에는 기본 SVG 요소를 선택한 다음 요소를 그리기위한 깔끔하고 간단한 API가 있습니다. SVG 애니메이션을위한 빠른 솔루션을 찾는 개발자에게 가장 적합합니다. 애니메이션이 단순하고 애니메이션 엔진에 대한 지식이 많지 않은 경우 특히 좋은 옵션입니다. 다소 오래되었지만 SVG로 작업하는 가장 쉬운 방법 일 수 있으므로 간과해서는 안됩니다.

Snap.svg는 단순함으로 새롭습니다. SVG를 선택하고 작업하는 작업으로 범위가 지정되며 그 이상이 되려고하지 않습니다. Snap은 SVG로 그리기 및 렌더링하기 위해 여기에서 다른 그래픽 라이브러리와 결합 할 수 있습니다. 기존 SVG가 있고 쉽게 작업 할 수있는 방법을 원하는 경우에도 좋습니다.

이 기사는 원래 인터넷 잡지에 게재되었습니다.

관련 기사: