>  기사  >  웹 프론트엔드  >  SVG와 HTML5 Canvas의 차이점은 무엇입니까?

SVG와 HTML5 Canvas의 차이점은 무엇입니까?

PHPz
PHPz앞으로
2023-09-18 22:49:021159검색

SVG和HTML5 Canvas之间有什么区别?

HTML 요소는 SVG 그래픽용 컨테이너입니다. SVG는 확장 가능한 벡터 그래픽을 나타냅니다. SVG는 상자, 원, 텍스트 등과 같은 그래픽을 정의하는 데 유용합니다. Scalable Vector Graphics의 약자인 SVG는 2D 그래픽과 그래픽 애플리케이션을 XML로 기술한 후 SVG 뷰어로 렌더링하는 언어입니다. 대부분의 웹 브라우저는 PNG, GIF, JPG처럼 SVG를 표시할 수 있습니다.

HTML 요소는 JavaScript를 통해 그래픽을 그리는 데 사용됩니다. 요소는 그래픽 컨테이너입니다.

SVG

HTML Canvas

SVG는 확장성이 더 좋습니다. 따라서 어떤 해상도에서도 고품질로 인쇄할 수 있습니다.

캔버스는 확장성이 떨어집니다. 따라서 더 적은 수의 물체나 더 큰 표면의 경우 더 높은 해상도(

SVG)로 인쇄하는 데 적합하지 않습니다.

캔버스는 더 작은 표면이나 더 많은 수의 물체에서 더 나은 성능을 제공합니다.

SVG는 스크립트와 CSS를 통해 수정할 수 있습니다.

캔버스는 스크립트를 통해서만 수정할 수 있습니다.

SVG는 벡터 기반이며 모양으로 구성됩니다.

캔버스는 래스터를 기반으로 하며 픽셀로 구성됩니다.

예제

다음 코드를 실행하여 확장 가능한 벡터 그래픽(SVG)을 웹 페이지에 추가할 수 있습니다. -

<!DOCTYPE html>
<html>
   <head>
      <style>
         #svgelem {
            position: relative;
            left: 50%;
            -webkit-transform: translateX(-20%);
            -ms-transform: translateX(-20%);
            transform: translateX(-20%);
         }
      </style>
      <title>HTML5 SVG</title>
   </head>
   <body>
      <h2 align = "center">HTML5 SVG Circle</h2>
      <svg id = "svgelem" height = "200" xmlns = "http://www.w3.org/2000/svg">
         <circle id = "bluecircle" cx = "60" cy="60" r = "50" fill = "blue" />
      </svg>
   </body>
</html>

Example

다음 코드를 실행하여 직사각형을 그리는 방법을 알아볼 수 있습니다. HTML5 Canvas 사용:

<!DOCTYPE html>
<html>
   <head>
      <title>HTML5 Canvas Tag</title>
   </head>
   <body>
      <canvas id = "newCanvas" width = "200" height = "100" style = "border:1px solid #000000;"></canvas>
      <script>
         var c = document.getElementById(&#39;newCanvas&#39;);
         var ctx = c.getContext(&#39;2d&#39;);
         ctx.fillStyle = &#39;#7cce2b&#39;;
         ctx.fillRect(0,0,300,100);
      </script>
   </body>
</html>

위 내용은 SVG와 HTML5 Canvas의 차이점은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
이 기사는 tutorialspoint.com에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제