SVG Scalable Vector Graphics 는 2차원 벡터 그래픽을 설명하기 위한 XML(Extensible Markup Language) 기반의 그래픽 형식입니다. SVG는 W3C에서 개발한 새로운 2차원 벡터 그래픽 형식이며 사양의 네트워크 벡터 그래픽 표준이기도 합니다. SVG는 XML 구문을 엄격하게 따르며 텍스트 형식의 설명 언어를 사용하여 이미지 내용을 설명합니다. 따라서 이미지 해상도와 무관한 벡터 그래픽 형식입니다.
SVG란 무엇인가요?
SVG는 Scalable Vector Graphics를 나타냅니다.
SVG는 웹용 벡터 기반 그래픽을 정의하는 데 사용됩니다.
SVG는 XML 형식을 사용하여 그래픽을 정의합니다.
SVG 이미지는 그렇지 않습니다. 확대하거나 크기를 조정하면 그래픽 품질이 떨어집니다.
SVG는 World Wide Web Consortium의 표준입니다.
SVG는 DOM 및 XSL과 같은 W3C 표준과 통합됩니다.
SVG 장점
다른 이미지 형식(예: JPEG 및 GIF)과 비교할 때 SVG 사용의 장점은 다음과 같습니다.
텍스트 편집기를 통해 SVG 이미지 생성 가능 생성 및 수정
SVG 이미지는 검색, 색인화, 스크립트화 또는 압축 가능
SVG는 확장 가능
SVG 이미지는 고품질 그라운드 인쇄를 통해 모든 해상도로 생성 가능
SVG는 확대 가능 이미지 품질 저하 없이
기본적으로 모든 브라우저는 SVG를 지원하며, 물론 IE는 9 이상입니다.
예:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>SVG</title> </head> <body> <svg width="100%" height="100%" > <circle cx="300" cy="60" r="50" stroke="#ff0" stroke-width="3" fill="black" /> </svg> </body> </html>
캔버스와 SVG의 차이점:
SVG
SVG는 2D 그래픽을 설명하기 위해 XML A 언어를 사용합니다.
SVG는 XML을 기반으로 하며 이는 SVG DOM의 모든 요소를 사용할 수 있음을 의미합니다. JavaScript 이벤트 핸들러를 요소에 연결할 수 있습니다.
SVG에서는 그려진 각 모양이 객체로 간주됩니다. SVG 객체의 속성이 변경되면 브라우저는 자동으로 그래픽을 재현할 수 있습니다.
기능:
해상도에 의존하지 않음
이벤트 핸들러 지원
렌더링 영역이 큰 애플리케이션(예: Google 지도)에 가장 적합합니다.
복잡도가 높으면 렌더링 속도가 느려집니다(DOM을 과도하게 사용하는 모든 애플리케이션). 빠르지 않습니다)
게임 응용 프로그램에는 적합하지 않습니다
캔버스
캔버스는 JavaScript를 통해 2D 그래픽을 그립니다.
캔버스는 픽셀 단위로 렌더링됩니다.
캔버스에서는 그래픽이 그려지면 더 이상 브라우저의 관심을 받지 못합니다. 위치가 변경되면 그래픽으로 가려졌을 수 있는 개체를 포함하여 전체 장면을 다시 그려야 합니다.
기능:
해상도에 따라 다름
이벤트 핸들러가 지원되지 않음
약한 텍스트 렌더링 기능
결과 이미지를 .png 또는 .jpg 형식으로 저장하는 기능
이미지 집약적인 애플리케이션에 가장 적합 많은 물체를 자주 다시 그리는 게임
