SVG는 확장 가능한 벡터 그래픽을 의미하는 확장 가능한 벡터 그래픽의 약어입니다. 1998 년 월드 와이드 웹 얼라이언스 (World Wide Web Alliance)는 XML -SVG를 통해 벡터 그래픽을 표현하는 기술을 개발하기 위해 실무 그룹을 설립했습니다! SVG는 또한 XML 파일이므로 SVG는 XML의 개방성, 이식성 및 상호 작용의 장점을 상속합니다. 이 기사는 HTML5에서 SVG를 소개합니다. 필요한 경우 SVG 배경을 참조하십시오.
SVG는 확장 가능한 벡터 그래픽을 의미하는 확장 가능한 벡터 그래픽의 약어입니다. 1998 년 월드 와이드 웹 얼라이언스 (World Wide Web Alliance)는 XML -SVG를 통해 벡터 그래픽을 표현하는 기술을 개발하기 위해 실무 그룹을 설립했습니다! SVG는 XML 파일이기 때문에 SVG는 XML의 개방성, 이식성 및 상호 작용의 장점을 상속합니다. 오늘날 거의 모든 주류 브라우저는 SVG를 지원하며 다음을 포함하여 더 많은 호환성 정보를 얻을 수 있습니다.
기본 SVG 그래픽을 표시하려면 <ement> 또는 <bood> 요소를 사용하십시오.
<Img>을 사용하여 SVG 그래픽을 표시합니다.
SVG 그래픽을 CSS 배경 이미지로 적용합니다.
HTML 문서에서 <SVG> 태그를 직접 사용하십시오 (HTML5 지원이 필요).
CSS 또는 외부 객체 요소를 사용하는 HTML 요소에 대한 SVG 변환, 필터 및 기타 특수 효과를 사용하십시오.
흐림 및 색상 처리를 포함하여 SVG 객체에 Photoshop과 같은 효과를 사용하십시오.
SVG 이미지에 애니메이션을 사용하십시오.
SVG 글꼴 사용;
* SVG
* 기본 콘텐츠
* SVG는 HTML5에만 배타적이지 않습니다
* HTML5는 SVG 네이티브에 대한 컨텐츠를 제공합니다
* HTML5가 나타나기 전에 SVG 컨텐츠가있었습니다
* SVG, 간단히 벡터로 넣으십시오
* SVG 파일의 확장은 .SVG입니다
* SVG는 XML 구문을 사용합니다
* 개념
* SVG는 XML 기술을 사용하여 2 차원 그래픽을 설명하는 언어입니다.
* SVG의 특징
* SVG 드로잉 그래픽은 검색 엔진에서 캡처 할 수 있습니다.
* 이미지 품질이 줄어들지 않으면 SVG가 확대됩니다.
* SVG와 캔버스의 차이
* SVG
* 해상도 종속성 없음
* 이벤트 바인딩 지원
* 대형 렌더링 지역을위한 프로그램 (예 : Baidu지도)
* 웹 게임을 구현하는 데 사용될 수 없습니다
* 캔버스
* 해상도 의존적
* 이벤트 바인딩은 지원되지 않습니다
* 가장 적합한 웹 게임
* .jpg 형식 이미지로 저장하십시오
* 목적
* 웹 페이지의 일부 작은 아이콘
* 웹 페이지의 동적 효과 (애니메이션 효과)
* HTML5에서 SVG 사용
* <svg> </svg> 요소를 사용하십시오
* 함수 - <canvas> 요소와 유사합니다
* 기본 크기는 300px* 150px입니다
* CSS 스타일을 사용하십시오
* SVG를 사용하여 그래프를 그려 보려면 <SVG> 요소를 정의해야합니다.
* 그래프를 그립니다
* 직사각형 요소
코드를 복사하십시오