HTML5 인라인 SVG

HTML5 인라인 SVG를 지원합니다.

SVG는 무엇인가?

• SVG 확장 가능한 벡터 그래픽 수단 (확장 가능한 벡터 그래픽)
• 그래픽 SVG는 벡터 기반 네트워크를 정의하는데 사용
• SVG는 XML 형식 정의 그래픽을 사용하여
• SVG 이미지를 확대하거나 화질의 크기 변화가 손실되지
• SVG는 표준 월드 와이드 웹 컨소시엄

SVG의 장점

SVG의 장점 사용 (예 : JPEG 및 GIF와 같은) 다른 이미지 형식과 비교 :

• SVG 이미지를 생성 할 수 있고, 텍스트 에디터를 사용하여 수정
• SVG 이미지는, 검색 색인, 스크립트 또는 압축 할 수 있습니다
• SVG는 확장 성
• SVG 이미지는 어떠한 고품질의 해상도로 인쇄 할 수있다
• SVG는 감소하지 않는 화질 과장 될 수있다

브라우저 지원

인터넷 익스플로러 9 이상, 파이어 폭스, 오페라, 크롬, 사파리 지원 인라인 SVG.

HTML 페이지에 직접 포함 된 SVG

HTML5에서는 HTML 페이지에 직접 요소를 SVG 할 수있을 것입니다 :

결과 :

SVG 튜토리얼에 대한 자세한 내용을 보려면, 방문하시기 바랍니다 SVG 자습서를 .

둘 사이 SVG와 캔버스 차이

SVG는 XML 기술 언어를 이용하여 2D 그래픽이다.

캔버스는 자바 스크립트를 사용하여 2D 그래픽을 그립니다.

SVG 해당 SVG DOM의 각 요소에 사용할 수 있음을 의미하는 XML을 기반으로. 당신은 요소에 대한 자바 스크립트 이벤트 핸들러를 첨부 할 수 있습니다.

SVG에서, 각각의 그래픽 오브젝트를 그려 본다. 속성 SVG 개체를 변경하면 브라우저가 자동으로 그래픽을 재현 할 수 있습니다.

캔버스 화소 단위 렌더링된다. 그려진 그래픽이 완료되면 캔버스, 그것은 브라우저의 주목을 계속하지 않을 것이다. 위치가 변경되는 경우, 전체 장면은 또한 그래픽으로 피복되어있다 물체 포함 재기록 할 필요가있다.

SVG와 캔버스의 비교

다음 표는 캔버스와 SVG 사이의 차이점을 보여줍니다.