html5 캔버스 요소 및 svg

https://stackoverflow.com/questions/1650415

html5
svg

22-07-2019
|

문제

임베디드 SVG를 통해 동일한 결과를 얻을 수 있는데 왜 html5 캔버스 요소가 필요한가요?

해결책

SVG와 캔버스는 실제로 교환 가능한 기술이 아닙니다. SVG는 다소 추상 모델 (SVG 문서)에서 모든 것이 그려진 유지 모드 그래픽 유형입니다. 반면에 캔버스는 모델이없고 클라이언트 (JavaScript)가 다시 그리기, 애니메이션 등을 관리 해야하는 일종의 즉각적인 모드 그래픽입니다.

다른 팁

SVG는 벡터 그래픽을위한 마크 업 언어이며 DOM이 있습니다. 이로 인해 콘텐츠가 생성 된 후 콘텐츠를 변경하기가 매우 쉽습니다.

캔버스는 실행 취소 버튼이없는 MS 페인트와 같은 그림 표면입니다. 내용을 변경할 수 없습니다. 당신은 그것을 과도하게 할 수 있습니다. 브라우저가 이미지의 완전한 DOM을 처리 할 필요가 없기 때문에 매우 성능이 있습니다. 그리고 캔버스가 향후 3D 드로잉을 처리 할 수있는 가능성이 있습니다.

http://people.mozilla.com/~vladimir/xtech2006/ 좋은 비교가 있습니다.

캔버스를 사용하면 DOM을 처리 할 필요가 없으므로 코드를 더 빠르고 쉽게 작성할 수 있습니다. SVG는 사양으로서 엉망입니다 ...

그림 : 내 블로그 엔진 (블로거)은 SVG를 지원하지 않습니다 (XHTML 문서가 아닙니다). SVG를 Canvas 요소로 변환하는 도구를 작성했습니다. http://plindenbaum.blogspot.com/2009/11/tool-converting-svg-to-canvas_22.html

다음은 간단한 SVG를 구문 분석하고 캔버스에 그리는 방법에 대한 설명입니다.

http://www.ikeralbeniz.net/2010/11/03/jugando-con-html5-canvas-y-svg-i/http://www.ikeralbeniz.net/2010/11/04/jugando-con-html5-canvas-y-svg-ii/

추가 게시물에서 SVG 파서는 투명성과 그라디언트로 완료됩니다.

이 비교도 유용 할 수도 있습니다.http://dev.opera.com/articles/view/svg-or-canvas-choing-between-the-two/

그러면 우리는 그러한 임베딩을 지원하는 것에 대해 걱정할 필요가 없기 때문에 ;-)

이러한 방식으로 애플리케이션 개발자의 초점은 표준을 준수하고 클라이언트 디자이너가 동일한 작업을 수행하도록하는 것입니다. 따라서 모든 사람이 플러그인, 버전, 보안 설정 등에 대해 걱정할 수 있도록 여유가 있습니다.

이것은 기술적인 답변은 아니지만 정답이라고 생각합니다.

결론은 둘 다 필요하지 않다는 것입니다.예, 벡터 그래픽과 래스터 그래픽 사이에는 차이점이 있고 경로, 개체, 애니메이션 등을 제어하는 방법도 다르다는 것을 알고 있습니다.둘 사이에는 있지만 최종 사용자에게는 모두 동일합니다.예, SVG는 더 오래 존재하기 때문에 지금은 조금 더 강력하지만 조금 더 작업하면 Canvas에서도 동일한 작업을 수행할 수 있습니다.

나는 현실적으로 Canvas가 웹 개발에서 XML 자체에 대한 압도적인 반발의 일부라고 믿습니다.나는 대부분의 웹 개발자, 특히 "엔터프라이즈" 환경 외부에서 제한된 시간과 리소스로 작업하는 개발자가 XML의 복잡성을 싫어한다고 생각합니다.Canvas는 XHTML보다 HTML5가 선호되고, XML보다 JSON이 선호되고, 심지어 XML보다 YAML이 선호되는 것처럼 선호되는 일회성 기술 집합의 일부입니다.

나는 그 아이디어가 많은 일을 하는 하나의 거대한 도구가 아니라 하나의 일을 올바르고 효율적으로 수행하는 많은 특정 도구를 갖는 *nix 철학과 유사하다고 생각합니다.(이는 하나의 직접 구동 기어의 단순성을 위해 믿을 수 없을 정도로 정확하고 진보된 변속기 기술을 피하는 많은 고정 기어 자전거 라이더들이 갖고 있는 철학과도 유사합니다.)

내 말을 오해하지 마십시오. 나는 XML이 뛰어난 사람들에 의해 웹, 프로그래밍, 구성, 데이터 저장 등의 궁극적인 스위스 군용 칼이 되도록 생각하고 개발한 믿을 수 없을 정도로 강력하고 뛰어난 기술이라고 믿습니다.하지만 그렇다고 해서 단순히 픽셀을 그리는 것보다 일련의 복잡한 경로를 관리하고 스타일을 지정하는 것이 더 쉽다는 의미는 아닙니다.

나는 내 대답이 독단적이라는 것을 알고 있으며 이것이 불꽃이 될 의도는 없습니다.나는 SVG를 좋아하고 그것이 수년에 걸쳐 (특히 IE에서) 더 많은 지원을 받았으면 좋았을 텐데, 단지 표준 설정자와 그들에게 영향을 미치는 웹 개발자의 심리학 때문에 조류가 Canvas로 바뀌는 것을 느낍니다.

장기적으로 나는 SVG가 XML을 선택 사항으로 만들고 JavaScript로 조작하기 더 간단한 JSON과 유사한 구조로 이동하고 아마도 벡터 기반 Canvas 컨텍스트가 되기를 바랍니다.내 생각에는 이것이 웹을 위한 최고의 솔루션이 될 것입니다.

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

제휴하지 않습니다 StackOverflow