HTML5 인라인 SVG
HTML5는 인라인 SVG를 지원합니다.
SVG란 무엇입니까?
SVG는 Scalable Vector Graphics의 약어입니다
SVG는 웹용 벡터 기반 그래픽을 정의하는 데 사용됩니다
SVG는 XML 형식을 사용하여 그래픽을 정의합니다
SVG 이미지의 그래픽 품질은 크기를 확대하거나 변경해도 손실되지 않습니다
SVG는 World Wide Web Consortium의 표준입니다
SVG의 장점
SVG를 사용하여 다른 이미지 형식(JPEG, GIF 등)과 비교하여 장점은 다음과 같습니다.
SVG 이미지는 텍스트 편집기를 통해 생성 및 수정할 수 있습니다.
SVG 이미지는 검색, 색인 생성, 스크립팅 또는 압축 가능
SVG는 확장 가능합니다
SVG 이미지는 모든 해상도에서 고품질로 인쇄할 수 있습니다
SVG 화질 저하 없이 확대 가능
브라우저 지원
Internet Explorer 9+, Firefox, Opera, Chrome , Safari는 인라인 SVG를 지원합니다.
SVG를 HTML 페이지에 직접 포함
HTML5에서는 SVG 요소를 HTML 페이지에 직접 포함할 수 있습니다.
예
<!DOCTYPE html> <html> <body> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190"> <polygon points="100,10 40,180 190,60 10,60 160,180" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;"> </svg> </body> </html>
인스턴스 실행»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요
결과:
죄송합니다. 귀하의 브라우저는 인라인 SVG를 지원하지 않습니다.SVG 튜토리얼에 대해 자세히 알아보려면 SVG 튜토리얼을 방문하세요.
차이점 SVG와 캔버스 사이
SVG는 XML을 사용하여 2D 그래픽을 설명하는 언어입니다.
Canvas는 JavaScript를 사용하여 2D 그래픽을 그립니다.
SVG는 XML을 기반으로 하며 이는 SVG DOM의 모든 요소를 사용할 수 있음을 의미합니다. JavaScript 이벤트 핸들러를 요소에 연결할 수 있습니다.
SVG에서는 그려진 모든 모양이 객체로 간주됩니다. SVG 객체의 속성이 변경되면 브라우저는 자동으로 그래픽을 재현할 수 있습니다.
캔버스는 픽셀 단위로 렌더링됩니다. 캔버스에서는 그래픽이 그려지면 더 이상 브라우저의 관심을 끌 수 없습니다. 위치가 변경되면 그래픽으로 가려졌을 수 있는 개체를 포함하여 전체 장면을 다시 그려야 합니다.
캔버스와 SVG 비교
다음 표에는 캔버스와 SVG의 몇 가지 차이점이 나열되어 있습니다.
| 캔버스 | SVG | ||||
|---|---|---|---|---|---|
|
|
