HTML5 SVG 2D 소개 1 - SVG(확장 가능한 벡터 그래픽) 개요_html5 튜토리얼 팁

비트맵과 벡터 그래픽
이전에는 jpeg, gif 등 브라우저에 표시되는 그래픽은 모두 비트맵이었으며 이러한 이미지 형식은 래스터 기반이었습니다. 래스터 이미지에서 이미지 파일은 이미지에 있는 각 픽셀의 색상 값을 정의합니다. 브라우저는 이 값을 읽고 그에 따라 행동해야 합니다. 이런 종류의 이미지의 재현 능력은 상대적으로 강력하지만 일부 상황에서는 부족하게 보일 수 있습니다. 예를 들어, 브라우저가 서로 다른 크기로 이미지를 표시하는 경우 가장자리가 들쭉날쭉해지며 브라우저는 원본 이미지에 존재하지 않는 픽셀에 대한 값을 보간하거나 추측해야 하며 이로 인해 이미지가 왜곡됩니다. 또한 비트맵 애니메이션은 기껏해야 개별 이미지가 빠르게 연속해서 표시되는 "플립북" 유형의 애니메이션을 생성하는 것으로 제한됩니다.

벡터 그래픽은 값 자체를 지정하는 대신 각 픽셀의 값을 결정하는 데 필요한 지침을 지정하여 이러한 어려움 중 일부를 극복합니다. 예를 들어, 벡터 그래픽은 직경 1인치의 원에 대한 픽셀 값을 제공하는 대신 브라우저에 직경 1인치의 원을 만들고 브라우저(또는 플러그인)가 나머지 작업을 수행하도록 지시합니다. 이는 래스터 그래픽의 많은 제한 사항을 제거합니다. 벡터 그래픽을 사용하면 브라우저는 원을 그려야 한다는 것만 알 수 있습니다. 이미지를 일반 크기의 3배로 표시해야 하는 경우 브라우저는 래스터 이미지의 일반적인 보간을 수행할 필요 없이 올바른 크기로 원을 그립니다. 마찬가지로, 브라우저는 애플리케이션 및 데이터베이스와 같은 외부 정보 소스에 더 쉽게 연결될 수 있는 지침을 받습니다. 이미지를 애니메이션화하기 위해 브라우저는 단순히 반경이나 색상과 같은 속성을 조작하는 방법에 대한 지침을 받습니다.
HTML 시스템에서 벡터 그래픽을 그리는 데 가장 일반적으로 사용되는 기술은 SVG와 HTML5에 새로 추가된 캔버스 요소입니다. 두 기술 모두 드로잉 벡터 및 래스터 이미지를 지원합니다.

SVG 개요
스케일러블 벡터 그래픽(줄여서 SVG)은 XML을 사용하여 2차원 그래픽을 설명하는 언어입니다(SVG는 XML 구문을 엄격하게 따릅니다). SVG에서는 벡터 그래픽 모양(직선과 곡선으로 구성된 경로 등), 이미지, 텍스트 등 세 가지 유형의 그래픽 개체를 허용합니다. 그래픽 개체(텍스트 포함)는 그룹화, 스타일 지정, 변환 및 이전에 렌더링된 개체로 결합될 수 있습니다. SVG 기능 세트에는 중첩된 변환, 클리핑 경로, 알파 마스크 및 템플릿 개체가 포함됩니다.

SVG 그림은 상호 작용적이고 역동적입니다. 예를 들어 스크립트를 사용하여 애니메이션을 정의하고 트리거할 수 있습니다. 이는 Flash에 비해 매우 강력합니다. 플래시는 바이너리 파일이므로 동적으로 생성하고 수정하기 어렵습니다. SVG는 텍스트 파일이므로 동적 조작이 매우 쉽습니다. 게다가 SVG는 애니메이션을 완성하기 위한 관련 요소를 직접 제공하므로 조작이 매우 편리합니다.

SVG는 다른 웹 표준과 호환되며 Document Object Model DOM을 직접 지원합니다. 이는 HTML5의 캔버스와 비교할 때 매우 강력한 점이기도 합니다(SVG도 SVG 그래픽을 표시하기 위해 내부적으로 유사한 캔버스를 사용한다는 점에 유의하세요. 나중에 많은 기능이 HTML5의 캔버스와 다소 유사하다는 것을 알게 될 것입니다. SVG의 캔버스라고 명시적으로 명시되어 있지 않으며 HTML5의 캔버스 요소를 나타냅니다.) 따라서 SVG의 많은 고급 응용 프로그램을 스크립트를 사용하여 쉽게 구현할 수 있습니다. 또한 SVG 그래픽 요소는 기본적으로 DOM의 표준 이벤트를 지원합니다. 다양한 이벤트 핸들러(예: "onmouseover" 및 "onclick")를 모든 SVG 그래픽 객체에 할당할 수 있습니다. SVG의 렌더링 속도는 캔버스 요소만큼 빠르지는 않지만 DOM 작업이 매우 유연하다는 장점이 있습니다. 이러한 장점은 속도의 단점을 완전히 보완할 수 있습니다.

SVG는 프로토콜이자 언어라고 할 수 있으며 HTML의 표준 요소이자 이미지 형식입니다.
SVG는 HTML5의 내용은 아니지만 널리 사용되는 웹 기술 중 하나로 간주되므로 당분간 이 주제에 포함하겠습니다.

SVG와 기타 이미지 형식 비교
다른 이미지 형식과 비교하여 SVG에는 많은 장점이 있습니다(많은 장점은 벡터 그래픽의 장점에서 비롯됩니다).
• SVG 파일은 순수 XML이며 다양한 도구(예: 메모장)로 읽고 수정할 수 있습니다.
• SVG는 JPEG 및 GIF 이미지보다 작고 압축률이 높습니다.
• SVG는 확장 가능하고, 이미지 품질 저하 없이 확대할 수 있으며, 모든 해상도에서 고품질로 인쇄할 수 있습니다.
• SVG 이미지의 텍스트는 선택 사항이며 검색 가능합니다(지도 제작에 적합).
• SVG는 Java 기술로 실행될 수 있습니다.
• SVG는 개방형 표준입니다.

SVG와 플래시 비교
SVG의 주요 경쟁자는 플래시입니다. 플래시에 비해 SVG의 가장 큰 장점은 다른 표준(XSL, DOM 등)과 호환되고 조작이 쉽다는 점인데 비해 플래시는 오픈소스가 아닌 독자적인 기술이다. 저장 형식 및 동적으로 생성된 그래픽과 같은 다른 측면에서도 SVG는 큰 장점을 가지고 있습니다.

SVG가 표현되는 방식
여기서 HTML5와 SVG를 지원하는 브라우저는 논의의 초점이 아닙니다. 사용자는 IE9만 설치하시기 바랍니다. IE9 이전 버전의 경우 SVG 플러그인을 설치해야 하며 여기서는 건너뜁니다. SVG를 직접 지원하는 브라우저의 경우 SVG는 주로 양면에서 두 가지 표시 방법을 사용합니다.

HTML에 인라인
SVG는 HTML에 직접 작성할 수 있는 표준 HTML 요소입니다. 다음 예를 참조하세요.

코드 복사

코드는 다음과 같습니다:

🎜>
;/svg>

해당 텍스트 파일을 sun.svg와 같은 svg 확장자를 가진 파일로 저장하거나 다른 파일에 참조로 포함할 수 있습니다. 페이지. 2.HTML은 외부 SVG 파일을 참조합니다.

다음과 같은 작은 예와 같이 object 또는 img 요소를 사용하여 SVG 그래픽을 삽입하면 됩니다.

코드 복사


코드는 다음과 같습니다.