Canvas vs SVG : 작업에 적합한 도구 선택-CSS 튜토리얼-php.cn

html5 캔버스 vs. SVG : 어떤 것을 선택해야합니까?

html5 캔버스 및 SVG는 모두 멋진 그래픽과 시각 효과를 만드는 데 사용할 수있는 표준 HTML5 기술을 기반으로합니다. 이 기사는 주요 질문에 대해 설명합니다. 프로젝트에서 선택하기에 어떤 기술이 더 적합합니까? 다시 말해, 어떤 경우에는 SVG보다 HTML5 캔버스를 사용하는 경향이 있습니까? Canvas vs SVG: Choosing the Right Tool for the Job 먼저, HTML5 캔버스와 SVG를 간단히 소개합시다.

키 포인트

html5 캔버스 및 SVG는 모두 그래픽 및 시각적 경험을 만드는 데 사용되는 HTML5 기술입니다. 캔버스는 해상도에 의존하며 그래픽, 게임 그래픽, 아트 워크 또는 기타 시각적 이미지를 동적으로 렌더링하는 데 사용됩니다. SVG (확장 가능한 벡터 그래픽)는 스케일링시 품질을 유지하는 XML 파일 형식입니다.

html5 캔버스 및 SVG는 완전히 다르게 작동합니다. 캔버스는 픽셀이 그려지면 폐기되는 즉각적인 그래픽 시스템입니다. SVG는 검증 모드를 채택하며, 그린 모든 객체가 브라우저의 내부 모델에 추가되며 개발자에게는 쉽지만 성능에 영향을 줄 수 있습니다.

html5 캔버스는 그래픽 집약적 인 대화식 게임, 생성 아트 및 작은 표면에 그려야하는 많은 객체가있는 장면에 이상적입니다. 그러나 Retina 디스플레이에 확대되거나 표시되면 품질이 떨어질 수 있습니다. SVG는 확장 성이 필요한 시나리오 (예 : 건축 및 엔지니어링 도면, 생물 도면 및 조직 도면)와 같은 시나리오에 바람직합니다. SVG는 인간과 기계가 읽을 수 있으므로 접근성 측면에서도 더 좋습니다. html5 캔버스 및 SVG는 고급 시나리오를 위해 결합 할 수 있습니다. 예를 들어, 캔버스 기반 게임은 SVG 이미지를 Spritz로 사용할 수 있거나 드로잉 프로그램은 SVG를 사용하여 사용자 인터페이스를 설계하고 캔버스 요소를 도면에 포함시킬 수 있습니다.

html5 캔버스는 무엇입니까?

whatwg 사양은 다음과 같이 캔버스 요소를 소개합니다

캔버스 요소는 스크립트가 그래프, 게임 그래픽, 아트 워크 또는 기타 시각적 이미지를 즉석에 렌더링하기위한 해상도 의존적 비트 맵 캔버스를 제공합니다.

즉, 태그는 JavaScript 프로그래밍 가능한 인터페이스를 사용하여 픽셀별로 래스터 이미지 픽셀을 작성하고 조작 할 수있는 표면을 제공합니다.

이것은 기본 코드 예입니다 (기본 캔버스 모양을 보여주기 위해 Codepen 예제를 여기에 포함시켜야합니다)

해상도 의존성으로 인해

에서 생성 된 이미지는 Zoom을 확대하거나 망막 디스플레이에 표시 될 때 품질이 저하 될 수 있습니다.

단순한 모양을 그리는 것은 빙산의 끝 일뿐입니다. HTML5 CANVAS API를 사용하면 아크, 경로, 텍스트, 그라디언트 등을 그릴 수 있습니다. 픽셀별로 이미지 픽셀을 작동 할 수도 있습니다. 즉, 그래픽의 특정 영역에서 색상을 대체하고 도면을 애니메이션하고 캔버스에 비디오를 그리며 외관을 변경할 수 있습니다.

SVG 란 무엇입니까? SVG는 확장 가능한 벡터 그래픽을 나타냅니다. 사양에 따라 : SVG는 2 차원 그래픽을 설명하는 데 사용되는 언어입니다. 독립형 형식으로 사용하거나 다른 XML과 혼합 될 때 XML 구문을 사용합니다. html5와 혼합되면 HTML5 구문 ... 를 사용합니다 SVG 도면은 대화식이고 역동적 일 수 있습니다. 애니메이션은 선언적 수단 (즉, SVG 콘텐츠에 SVG 애니메이션 요소를 포함 함) 또는 스크립트를 통해 정의 및 트리거 될 수 있습니다.

SVG는 벡터 그래픽을 만드는 데 사용되는 XML 파일 형식입니다. 확장 가능한 특성을 사용하면 선명도와 고품질을 유지하면서 벡터 이미지를 증가 또는 감소시킬 수 있습니다. (HTML5 캔버스 생성 이미지는이를 수행 할 수 없습니다).
다음은 SVG (이전에 HTML5 캔버스를 사용하여 생성)를 사용하여 그려진 동일한 빨간 사각형입니다. (기본 SVG 모양을 보여주기 위해 CodePen 예제를 여기에 포함시켜야합니다) SVG를 사용하여 캔버스로 수행 할 수있는 대부분의 작업을 수행하여 모양과 경로, 그라디언트, 패턴, 애니메이션 등을 수행 할 수 있습니다. 그러나 두 기술은 근본적으로 다르게 작동합니다. 캔버스 기반 그래픽과 달리 SVG에는 DOM이 있으므로 CSS 및 JavaScript에서 액세스 할 수 있습니다. 예를 들어 CSS를 사용하여 SVG 그래프의 모양을 변경하여 CSS 또는 JavaScript를 사용하여 노드를 애니메이션하여 와 같은 마우스 또는 키보드 이벤트에 응답 할 수 있습니다. 다음 섹션에서 더 명확하게 볼 수 있듯이, 다음 프로젝트에서 캔버스와 SVG 중에서 선택해야 할 때이 차이는 중요한 역할을합니다.

실시간 모드 및 보존 모드

실시간 모드와 유지 모드를 구별하는 것이 중요합니다. HTML5 캔버스는 전자의 예이며 SVG는 후자의 예입니다.
실시간 모드는 도면이 캔버스에 있으면 캔버스가 추적을 중지 함을 의미합니다. 다시 말해, 개발자로서, 객체를 그리며, 최종 출력의 모습의 모델 또는 시나리오를 작성하고 유지 관리하고 업데이트해야 할 사항을 지정하기 위해 명령을 공식화해야합니다. 브라우저의 그래픽 API는 드로잉 명령을 브라우저에 전달하고 브라우저는 해당 명령을 실행합니다.
SVG는 유지 모드를 사용하고 화면에 표시 할 내용에 대한 드로잉 명령을 발행하면 브라우저의 그래픽 API가 최종 출력 내 메모리 모델 또는 장면을 생성하여 브라우저의 드로잉 명령으로 변환합니다.
즉각적인 그래픽 시스템으로서 캔버스에는 DOM 또는 문서 개체 모델이 없습니다. 캔버스를 사용하면 픽셀을 그리며 시스템은 모든 것을 잊어 버려서 도면의 내부 모델을 유지하는 데 필요한 추가 메모리를 줄입니다. SVG를 사용하면 그리는 각 객체는 브라우저의 내부 모델에 추가되어 개발자로서 인생을 조금 더 쉽게 만들지 만 성능에있어서 가격을 지불합니다.
실시간 모드와 보존 모드의 차이와 각각 캔버스와 SVG의 다른 특정 기능의 차이에 따라, 일부 기술을 사용하는 것이 다른 기술을 사용하면 프로젝트의 목표에 더 잘 어울릴 수 있습니다.

html5 캔버스 : 장단점

HTML5 캔버스 사양은 다른보다 적절한 방법을 사용할 수있는 경우 저자가

요소를 사용해서는 안된다고 명시 적으로 권장합니다. <canvas></canvas> 예를 들어, 그래픽이 풍부한 요소의 경우 가장 좋은 도구는 HTML 및 CSS입니다. 이 견해는 Zim JS Canvas 프레임 워크의 제작자이자 설립자 인 Dr Abstract에 의해 확인되었습니다.

dom 및 dom 프레임 워크는 정보, 특히 텍스트 정보를 표시하는 데 능숙합니다. 대조적으로, 캔버스는 그림입니다. 텍스트를 캔버스에 추가 할 수 있으며 응답을 가능하게 할 수 있지만 DOM에서 텍스트를 쉽게 선택하거나 검색 할 수 없습니다. 긴 스크롤링 텍스트 페이지 또는 텍스트 및 이미지 페이지는 DOM에 적합합니다. DOM은 소셜 미디어 사이트, 포럼, 쇼핑 및 우리가 사용하는 데 사용되는 모든 정보 앱에 적합합니다. —— "JavaScript 캔버스 라이브러리 또는 프레임 워크를 사용하는시기"

여기에 <canvas></canvas>를 사용하지 않을 때의 명확한 예가 있습니다. 그러나

는 언제 좋은 선택입니까?

(Sarah Drasner의 트윗 스크린 샷은 여기에 포함되어야합니다)

캔버스는 무엇을 잘합니까?

Alvin Wan은 그려진 객체의 수와 객체 또는 캔버스 자체의 크기를 기반으로 캔버스 및 SVG의 성능을 벤치마킹했습니다. 그는 결과를 다음과 같이 요약했다 :

<canvas></canvas> 어쨌든, Dom 렌더링의 오버 헤드는 수백 또는 수천 개의 객체를 다룰 때 더 분명합니다. 그러나 캔버스 나 SVG는 객체 크기의 영향을받지 않습니다. 최종 통계가 주어지면 캔버스는 성능 측면에서 분명한 이점을 제공합니다. <canvas></canvas>

우리가 캔버스에 대해 알고있는 것, 특히 많은 객체를 그리는 데있어 탁월한 성능을 바탕으로 SVG보다 적합하거나 더 나은 시나리오가 있습니다.

게임 및 생성 예술 캔버스는 일반적으로 그래픽 집약적 인 대화식 게임 및 생성 예술에 가장 적합한 선택입니다.

레이 추적 Ray Tracing은 3D 그래픽을 만드는 기술입니다. Ray Tracing은 이미지 평면에서 픽셀의 광선 경로를 추적하고 가상 객체와의 만남을 시뮬레이션하여 이미지를 채우는 데 사용될 수 있습니다 ... Ray Tracing이 달성 한 효과 ... 범위에서 ... 현실적으로 만들어냅니다. 간단한 벡터 그래픽의 이미지는 사진과 같은 필터를 적용하여 적목을 제거합니다. —— SVG 및 캔버스 : 선택 방법, Microsoft Docs.

당신이 궁금하다면, 이것은 Mark Webster가 실행중인 광선 추적 응용 프로그램입니다.

그러나 그러나 HTML5 캔버스는 SVG 보다이 작업에 확실히 더 적합하지만 반드시 광선 추적이
요소에서 가장 잘 수행된다는 것을 의미하지는 않습니다. 실제로, CPU에 대한 압력이 너무 높아서 브라우저가 응답을 중단 할 수 있습니다.

작은 표면에 많은 수의 물체를 그립니다 또 다른 예는 응용 프로그램이 비교적 작은 표면에 많은 수의 객체를 그려야하는 장면 (예 : 날씨 패턴의 그래픽 표현과 같은 비 결과 실시간 데이터 시각화)과 같은 장면입니다.

video의 픽셀 교체 이 HTML5 Doctor 기사에서 볼 수 있듯이 캔버스를 사용하는 데 적합한 또 다른 예는 비디오 배경색을 다른 색상, 다른 장면 또는 이미지로 바꾸는 것입니다.

Canvas vs SVG: Choosing the Right Tool for the Job

HTML5 캔버스는 무엇을 잘하지 않습니까?

반면에 대부분의 경우 캔버스가 SVG에 비해 최상의 선택이 아닐 수 있습니다.

확장 성

확장 성이 유리한 대부분의 시나리오는 캔버스 대신 SVG를 더 잘 사용할 수 있습니다. 높은 충실도, 건축 및 엔지니어링 도면, 조직 도면, 생물 도면 등과 같은 복잡한 그래픽 이이 상황의 예입니다.

SVG로 그리기 할 때 이미지를 확대하거나 이미지를 인쇄하면 모든 세부 사항을 유지하여 매우 높은 수준의 품질을 달성합니다. 또한 데이터베이스에서 이러한 문서를 생성 할 수있어 SVG의 XML 형식 이이 작업에 적합합니다. 또한,이 그래픽은 일반적으로

대화식입니다. 예를 들어, 티켓을 온라인으로 예약 할 때 시트 맵을 고려하여 SVG와 같은 유지 그래픽 시스템의 우수한 사용 사례가됩니다.

즉, CreateJs 및 Zim (Extended CreateJS)과 같은 우수한 라이브러리를 통해 개발자는 마우스 이벤트를 통합하고, 히트 테스트, 멀티 터치 제스처, 드래그 앤 드롭 기능, 컨트롤 및보다 비교적 신속하게 생성을 기반으로합니다. 캔버스. 접근성 캔버스 그래픽의 접근성을 향상시키기위한 몇 가지 단계를 수행 할 수 있지만, 좋은 캔버스 라이브러리 (ZIM과 같은)는 프로세스 속도를 높이는 데 도움이 될 수 있습니다. 접근성과 관련하여 캔버스는 좋지 않습니다. 캔버스 표면에 그리는 것은 보조 기술이나 검색 엔진 로봇이 읽거나 해석 할 수없는 많은 픽셀 일뿐입니다. 이것은 SVG에 대한 또 다른 선호되는 영역입니다. SVG는 XML로 인간과 기계가 모두 읽을 수있게합니다.

javaScript 에 의존하지 않습니다 응용 프로그램에서 JavaScript를 사용하지 않으려면 Canvas가 최선의 선택이 아닙니다. 실제로,

요소를 사용하는 유일한 방법은 JavaScript를 사용하는 것입니다. 대신 Adobe Illustrator 또는 Inkscape와 같은 표준 벡터 편집 프로그램을 사용하여 SVG 그래픽을 그릴 수 있으며 순수한 CSS를 사용하여 외관을 제어하고 매력적이고 미묘한 애니메이션 및 마이크로 interaction을 수행 할 수 있습니다.

고급 시나리오를 위해

HTML5 캔버스와 SVG를 결합합니다 경우에 따라, 귀하의 응용 프로그램은 HTML5 캔버스와 SVG를 결합하여 두 세계를 최대한 활용할 수 있습니다. 예를 들어, 캔버스 기반 게임은 벡터 편집 프로그램에서 생성 된 SVG 이미지를 스프라이트로 사용하여 PNG 이미지에 비해 확장 성과 다운로드 크기를 더 적합 할 수 있습니다. 또는 드로잉 프로그램은 SVG를 사용하여 사용자 인터페이스를 설계하고

요소를 도면에 포함시킬 수 있습니다. <canvas></canvas> 마지막으로, Paper.js와 같은 강력한 라이브러리를 사용하면 HTML5 캔버스 위에 벡터 그래픽 스크립트를 작성할 수 있으므로 개발자는 동시에 두 기술을 모두 사용하는 편리한 방법을 제공합니다.

결론

이 기사에서는 HTML5 캔버스 및 SVG의 주요 기능 중 일부를 탐색하여 특정 작업에 가장 적합한 기술을 결정하는 데 도움이됩니다.

답은 무엇입니까? Chris Coyier는 Benjamin de Cock에 동의합니다. 이 질문에 대답하는 매우 기본적인 방법은 "SVG를 사용할 수없는 경우 캔버스 사용"입니다 ( "할 수없는 경우"는 수천 개의 객체를 애니메이션하고 각 픽셀을 개별적으로 조작하는 등)입니다. 다시 말해, SVG는 기본 선택 여야하며 캔버스는 백업 계획입니다.

- Benjamin de Cock (@bdc) 2019 년 10 월 2 일

dr Abstract는 대화식 로고 및 광고, 대화식 인포 그래픽, 전자 학습 응용 프로그램 등을 포함하여 캔버스로 구축 할 수있는 최고의 것들 중 많은 목록을 제공합니다.

내 생각에, SVG 대신 캔버스를 사용하는 것이 가장 좋을 때는 어렵고 빠른 규칙이 없습니다. 실시간 모드와 유지 모드의 차이점은 그래픽 집약적 인 게임을 구축 할 때 HTML5 캔버스가 확실한 승자이며 평평한 이미지, 아이콘, UI 요소 등에는 SVG가 바람직하다는 것을 보여줍니다. 그러나 그 사이에 HTML5 캔버스는 또한 다양한 강력한 캔버스 라이브러리가 제공 할 수있는 것을 고려할 때 응용 프로그램 범위를 확장 할 여지가 있습니다. 동일한 그래픽 작업에서 동시에 두 기술을 더 쉽게 사용할 수있을뿐만 아니라 캔버스 기본 프로젝트 (예 : 대화 형 제어 및 이벤트, 응답 성, 접근성 기능 등)에서 어려운 기능을 제공합니다. 이를 위해 대부분의 개발자가 사용하는 HTML5 캔버스의 더 흥미로운 사용에 대한 문이 열립니다.

캔버스 vs. SVG

의 FAQ (FAQ 부품은 여기에 포함되어야하고 원래 콘텐츠에 따라 다시 작성하고 간결하고 명확하게 유지하고 더 자연스러운 언어 표현을 사용해야합니다.)

위 내용은 Canvas vs SVG : 작업에 적합한 도구 선택의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!