SVG와 HTML5 Canvas의 차이점은 무엇입니까? 둘 다 나에게 똑같은 일을하는 것 같다. 기본적으로 둘 다 좌표 점을 사용하여 벡터 아트 워크를 그립니다.
내가 무엇을 놓치고 있습니까? SVG와 HTML5 Canvas의 주요 차이점은 무엇입니까? 왜 하나를 선택해야합니까?
답변
Wikipedia 참조 : http://en.wikipedia.org/wiki/Canvas_element
SVG는 브라우저에서 도형을 그리기위한 초기 표준입니다. 그러나 SVG는 기본적으로 더 높은 수준에 있습니다. 그 이유는 그려진 각 모양이 장면 그래프 또는 DOM에서 객체로 기억되고 이후에 비트 맵으로 렌더링되기 때문입니다. 즉, SVG 객체의 속성이 변경되면 브라우저가 자동으로 장면을 다시 렌더링 할 수 있습니다.
위의 예에서 직사각형이 그려지면 시스템에서 그려 졌다는 사실을 잊습니다. 위치를 변경하려면 사각형으로 덮일 수있는 모든 개체를 포함하여 전체 장면을 다시 그려야합니다. 그러나 동등한 SVG의 경우 직사각형의 위치 속성을 간단히 변경할 수 있으며 브라우저는이를 다시 그리는 방법을 결정합니다. 캔버스를 레이어로 칠한 다음 특정 레이어를 다시 만드는 것도 가능합니다.
SVG 이미지는 XML로 표현되며 복잡한 장면은 XML 편집 도구로 만들고 유지 관리 할 수 있습니다.
SVG 장면 그래프를 사용하면 이벤트 핸들러를 객체와 연결할 수 있으므로 직사각형이 onClick 이벤트에 응답 할 수 있습니다. 캔버스에서 동일한 기능을 얻으려면 마우스 클릭의 좌표를 그려진 사각형의 좌표와 수동으로 일치시켜 클릭되었는지 여부를 확인해야합니다.
개념적으로 캔버스는 SVG가 구축 될 수있는 하위 수준의 프로토콜입니다. [인용 필요] 그러나 이것은 (일반적으로) 경우가 아니며 독립적 인 표준입니다. Canvas 용 장면 그래프 라이브러리가 있고 SVG에는 비트 맵 조작 기능이 있기 때문에 상황이 복잡합니다.
업데이트 : 마크 업 언어 능력 때문에 SVG를 사용합니다. XSLT로 처리 할 수 있고 노드에 다른 마크 업을 저장할 수 있습니다. 마찬가지로 마크 업 (화학)에 SVG를 포함 할 수 있습니다. 이를 통해 마크 업 조합으로 SVG 속성 (예 : 렌더링)을 조작 할 수 있습니다. 이것은 Canvas에서 가능할 수 있지만 훨씬 더 어렵다고 생각합니다.
답변
SVG는 “그리기”프로그램과 같습니다. 드로잉은 각 모양에 대한 드로잉 지침으로 지정되며 모든 모양의 일부를 변경할 수 있습니다. 드로잉은 모양 지향적입니다.
캔버스는 “페인트”프로그램과 같습니다. 픽셀이 화면에 닿으면 그것이 바로 당신의 그림입니다. 다른 픽셀로 덮어 쓰는 것 외에는 모양을 변경할 수 없습니다. 그림은 픽셀 지향적입니다.
일부 프로그램에서는 도면을 변경할 수있는 것이 매우 중요합니다. 예를 들어 드 래프팅 앱, 다이어그램 작성 도구 등. 따라서 SVG는 여기에서 이점이 있습니다.
일부 예술적 프로그램에서는 개별 픽셀을 제어 할 수있는 것이 중요합니다.
SVG보다 Canvas에서 마우스 드래그를 통한 사용자 조작을위한 뛰어난 애니메이션 성능을 얻는 것이 더 쉽습니다.
컴퓨터 화면의 단일 픽셀은 종종 4 바이트의 정보를 소비하며 요즘 컴퓨터 화면에는 몇 메가 바이트가 걸립니다. 따라서 사용자가 이미지를 편집 한 다음 다시 업로드 할 수 있도록하려면 Canvas가 불편할 수 있습니다.
대조적으로 SVG를 사용하여 전체 화면을 덮는 몇 가지 모양을 그리는 것은 몇 바이트를 차지하고 빠르게 다운로드되며 다른 방향으로 내려갈 때와 동일한 이점으로 쉽게 다시 업로드 할 수 있습니다. 따라서 SVG는 Canvas보다 빠를 수 있습니다.
Google은 SVG로 Google지도를 구현했습니다. 이는 웹 앱에 빠른 성능과 부드러운 스크롤을 제공합니다.
답변
Canvas와 SVG의 상위 수준 요약
캔버스
- 픽셀 기반 (Dynamic .png)
- 단일 HTML 요소 (개발자 도구에서 요소 검사. 캔버스 태그 만 볼 수 있음)
- 스크립트를 통해서만 수정
- 이벤트 모델 / 사용자 상호 작용은 세분화됩니다 (x, y).
- 더 작은 표면, 더 많은 수의 개체 (> 10k) 또는 둘 다에서 성능이 더 좋습니다.
SVG
- 모양 기반
- DOM의 일부가되는 여러 그래픽 요소
- 스크립트 및 CSS를 통해 수정
- 이벤트 모델 / 사용자 상호 작용이 추상화 됨 (직사각형, 경로)
- 적은 수의 개체 (<10k), 더 큰 표면 또는 둘 다에서 성능이 향상됩니다.
자세한 차이점은 http://msdn.microsoft.com/en-us/library/ie/gg193983(v=vs.85).aspx 를 참조 하십시오.
답변
그들이 무엇인지, 그들이 당신을 위해 무엇을하는지에는 차이가 있습니다.
- SVG는 확장 가능한 벡터 그래픽을위한 문서 형식입니다.
- Canvas는 벡터 그래픽을 특정 크기의 비트 맵으로 그리기위한 자바 스크립트 API입니다.
형식 대 API에 대해 조금 더 자세히 설명하려면 :
svg를 사용하면 다양한 도구에서 파일을보고, 저장하고, 편집 할 수 있습니다. 캔버스를 사용하면 그냥 그리면 화면의 결과 이미지와 별도로 방금 한 작업에 대해 아무것도 유지되지 않습니다. 두 가지 모두에 애니메이션을 적용 할 수 있으며 SVG는 지정된 요소와 속성 만보고 다시 그리기를 처리하는 반면, 캔버스에서는 API를 사용하여 각 프레임을 직접 다시 그려야합니다. 둘 다 크기를 조정할 수 있지만 SVG는 자동으로 수행하지만 캔버스를 다시 사용하면 주어진 크기에 대한 그리기 명령을 다시 실행해야합니다.
답변
SVG와 Canvas에서 저를 가장 감동시킨 두 가지는
DOM없이 Canvas를 사용할 수있는 기능. SVG는 DOM에 크게 의존하고 복잡성이 증가함에 따라 성능이 저하됩니다. 게임 디자인처럼.
SVG 사용의 장점은 Canvas에없는 플랫폼간에 해상도가 동일하게 유지된다는 것입니다.
이 사이트에서 더 많은 세부 정보가 제공됩니다. http://dev.opera.com/articles/view/svg-or-canvas-choosing-between-the-two/
답변
그것은 절대적으로 귀하의 필요 / 요구 사항에 달려 있습니다.
-
화면에 이미지 / 차트 만 표시하려면 캔버스가 권장됩니다. (예 : PNG, GIF, BMP 등)
-
예를 들어 차트 위에 마우스를 올려 놓으면 디스플레이 품질을 손상시키지 않고 특정 영역을 확대하려는 경우 그래픽의 기능을 확장하려면 SVG를 선택합니다. (좋은 예는 AutoCAD, Visio, GIS 파일입니다).
셰이프 커넥터가있는 동적 흐름도 생성 도구를 구축하려면 CANVAS보다 SVG를 선택하는 것이 좋습니다.
-
화면 크기가 커지면 더 많은 픽셀을 그려야하므로 캔버스가 저하되기 시작합니다.
-
화면에서 개체 수가 증가
하면 DOM 에 개체 를 계속 추가하면서 SVG 성능이 저하 되기 시작합니다 .
또한 참조하십시오 : http://msdn.microsoft.com/en-us/library/gg193983(v=vs.85).aspx
답변
SVG
사용 사례에 따라 SVG는 로고, 차트에 사용됩니다. 그 이유는 벡터 그래픽을 그리고 잊어 버렸기 때문입니다. 크기 조정 (또는 확대 / 축소)과 같이 뷰 포트가 변경되면 자동으로 조정되며 다시 그릴 필요가 없습니다.
캔버스
캔버스는 화면에 픽셀을 페인팅하여 수행되는 비트 맵 (또는 래스터)입니다. 주어진 영역에서 게임이나 그래픽 경험 ( https://www.chromeexperiments.com/webgl ) 을 개발하는 데 사용되며 픽셀을 페인트하고 다른 영역을 다시 그려 변경합니다. 래스터 유형이므로 뷰 포트가 변경되면 완전히 다시 그려야합니다.
참고
http://www.sitepoint.com/7-reasons-to-consider-svgs-instead-of-canvas
http://en.wikipedia.org/wiki/WebGL
http://vector-conversions.com/vectorizing/raster_vs_vector.html
