HTML5의 SVG_html5 튜토리얼 기술에 대한 심층 분석

SVG 배경

SVG는 Scalable Vector Graphics의 약자로 확장 가능한 벡터 그래픽을 의미합니다. 1998년 월드와이드웹 컨소시엄은 XML, 즉 SVG를 통해 벡터 그래픽을 표현하는 기술을 개발하기 위해 실무그룹을 설립했습니다! SVG는 XML 파일이기도 하므로 SVG는 XML의 개방성, 이식성 및 상호 작용성의 장점도 상속합니다. 요즘에는 거의 모든 주요 브라우저가 SVG를 지원합니다. 여기에서 다음을 포함한 더 많은 호환성 정보를 얻을 수 있습니다.

또는 요소를 사용하여 기본 SVG 그래픽을 표시합니다. SVG 그래픽을 CSS 배경 이미지로 적용합니다. HTML 문서의 태그(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와 Canvas의 차이점 * SVG * 해상도에 의존하지 않음 * 이벤트 바인딩 지원 * 렌더링 영역이 큰 프로그램(예: 바이두 지도) * 웹 게임 구현에 사용할 수 없음 * 캔버스 * 해상도에 따라 다름 * 이벤트 바인딩을 지원하지 않음 * 웹 게임에 가장 적합 * ".jpg" 형식으로 이미지 저장 * 사용법 * 일부 작은 파일 웹 페이지 아이콘 * 웹 페이지의 동적 특수 효과(애니메이션 효과) * HTML5에서 SVG 사용 * 요소 사용 * 기능 - 요소 * 기본 크기는 300px*150px * CSS 스타일 사용 * SVG를 사용하여 그래픽을 그리려면 * 그래픽 그리기 * 직사각형 요소

코드 복사

코드는 다음과 같습니다. SVG는 직사각형을 그립니다 &lt ;!-- HTML 페이지에서 svg 태그를 사용하는 경우 * 요소 정의 * 요소의 역할과 유사합니다. > * 기본 크기 300px * 150px * 너비 및 높이 설정 - 속성 및 스타일 * svg를 사용하여 그린 모든 그래픽은 요소 내에 정의되어야 합니다. * svg를 사용하여 그린 그래픽은 HTML과 관련됩니다. 페이지 --> 직사각형 그리기 - * x 및 y - 그려진 직사각형의 왼쪽 위 모서리 좌표 * 너비와 높이 - 그려진 직사각형의 폭과 높이 * 스타일이 아닌 속성을 사용해야 합니다. * 기본 색상은 검정색입니다. 색상 설정 - 속성이나 스타일을 사용할 수 있습니다. * 채우기 - 채우기 색상 설정 * 획 - 획 색상 설정 선 너비 설정 * 획 너비 참고 * svg로 그린 그래픽의 경우 스타일을 설정하려면 CSS 속성 대신 SVG 속성을 사용하세요. --> * 원 요소 원 그리기 - * cx 및 cy - 원의 원형 좌표 값 * r - 원의 반경 --> * 타원 요소 * 선 요소 요소는 하나의 그래픽 요소만 포함할 수 있습니까, 아니면 여러 그래픽 요소를 포함할 수 있습니까? * 여러 그래픽 요소를 포함할 수 있습니다 --> * 폴리라인 요소 요소 - 폴리라인 * 포인트 - 시작점, 꼭지점, 끝점 설정 * ","를 사용하여 x와 y를 구분합니다. * 여러 개 사이에 사용 점 공백 분리 폴리라인의 특징 * 폴리라인의 영역(시작점부터 끝점까지)은 기본적으로 검정색으로 제공됩니다. --> * 다각형 요소 * 특수 효과 요소 * 그라데이션 - 그라데이션 요소는 요소 내에 정의됩니다 * 선형 그라데이션 - * 이 요소는 시작 요소입니다 선형 그라데이션 설정 - * 사용법 - 요소의 &lt ;defs> 에 그라데이션을 정의합니다. * 특징 - 기준선 있음 * 시작점 좌표 값 - x1 및 y1 * 끝점 좌표 값 - x2 및 y2 * 참고 * 이 요소는 시작 요소입니다 * x1과 y1, x2와 y2의 값은 모두 백분율입니다 * id 속성 정의 * 그려진 그래픽에 설정된 그라데이션을 추가하는 데 사용됩니다. 요소 중간 * 요소 사용 - 그라디언트 색상 설정 * 오프셋 - 그라디언트 색상 위치 설정 * 값도 백분율임 * stop-color - 그라디언트 색상 설정 * stop-opacity - 그라디언트 색상 투명도 설정 --> 위의 선형 그래디언트를 설정하고 아래 직사각형에 추가하는 방법은 무엇인가요? * 채우기 속성을 사용하면 값은 url(그라디언트 요소의 #id 값)입니다. --> * 섹터(Ray) 그라데이션- * 필터-가우스 흐림 * 필터는 요소를 사용합니다 * 요소-가우스 흐림 * ="SourceGraphic" * stdDeviation - 흐림 수준 설정

코드 복사 코드는 다음과 같습니다. 가우시안 블러 필터 설정 방법 * 필터는 다음 요소에 정의됩니다. * 요소 정의 - SVG를 나타내는 필터 * Gaussian Blur 요소 * 속성 * 정의 ="SourceGraphic" - 쓰기 수정 * stdDeviation - 블러 정도 설정 * 요소의 id 속성 값 정의 * 그래픽을 그리는 요소에 편리하게 추가 -- > 위의 가우시안 블러를 아래 요소와 연결하는 방법 * 필터 속성을 사용합니다. 값은 url(#id)입니다. * 현재 그래픽 필터 - -> &lt ;/svg> * 참고 - 요소에 정의됨 * TWO.js * 기본 콘텐츠 * JS 라이브러리 소개 * three.js - 특별히 사용됨 3차원 그래픽 그리기용 * two.js - 특히 2차원 그래픽 그리기용 * two.js에서 지원되는 형식 * SVG - 기본값 * Canvas * WebGL - 특히 for 이미지 그리기 * two.js 사용 방법 * two.js 파일을 HTML 페이지에 도입 * HTML 페이지에서 컨테이너( ) 정의 * 자바스크립트 코드에서 * HTML 페이지에서 컨테이너 가져오기 * Two 객체를 생성하고 컨테이너에 객체 추가 new Two(params).appendTo(Element); * Two에서 제공하는 API 메소드를 사용합니다. js Draw * two.js에서 제공하는 메소드를 사용하여 그래픽 설정 * update() 메소드를 사용하여 그리기 * Two 객체 생성 * 생성자 - new Two(params) * params Parameter - 현재 객체의 정보 설정 * type - 현재 사용되는 형식 설정(Two.Types.svg) * svg - 기본값 * canvas * webgl * 너비 및 높이 - 너비 및 높이 설정 * 전체 화면 - 전체 화면 여부 설정 * 부울 값, true는 전체 화면을 의미 * 그래픽 메서드 * makeLine() - 그리기 line * makeRectangle() - 직사각형 그리기 * makeCircle() - 원 그리기 * makeEllipse() - 타원 그리기 * 애니메이션 방법 * update() - 애니메이션 업데이트 * play() - 애니메이션 추가(반복) * Pause() - 애니메이션 삭제 * 그래픽 그리기 스타일 설정 * 그래픽을 그리기 위해 Two object의 그리기 메소드 호출 시 return 그래픽 객체 * 이 그래픽 객체를 통해 관련 속성값을 설정 * 그룹화 연산 * Two.Group * 애니메이션 효과 * 바인드(이벤트,콜백) 메소드 - 이벤트 바인딩 * 이벤트 - 이벤트 이름 바인딩 * 업데이트 - update() 메서드의 해당 함수 * 모든 DOM 이벤트를 바인딩할 수 있음 * 콜백 - 이벤트 처리 기능 * 확장 콘텐츠 * 프론트엔드 개발툴 * Aptana Studio 3 - 코드팁 * 웹스트롬 - 국내 프론트엔드 개발자 아티팩트 * 실제 개발 * 다목적 SVG * 왜곡 없음 * 검색 가능 * 페이지 최적화-외부 링크 감소 * * * 캔버스 - HTML 그리기 그래픽 * 실제 동작시 그림(.png)으로 나타납니다 * 검색엔진에서 크롤링 불가 * 확대 후 왜곡 * SVG 콘텐츠 * 콘텐츠 양이 매우 많음 * 정적으로 그려진 그래픽 * 동적 애니메이션 효과 * 전문 제공 이벤트 * 인터넷에 SVG에 대한 정보가 거의 없습니다(책 없음) * SVG 사양(W3C 영어) * SVG 또는 CANVAS는 HTML 페이지에 정의됩니다. * 요소는 하나만 정의할 수 있나요? 아니면 여러 요소를 정의할 수 있나요? * 하나의 HTML 페이지에 여러 요소를 정의할 수 있습니다. * SVG와 CANVAS 모두 동시에 여러 그래픽을 정의(그리기)할 수 있습니다 * 실제 개발에 활용 * 향후 작업 개발에서 SVG 활용률은 높지 않습니다 * SVG 이미지 일반적으로 UI 디자이너가 완성합니다 * SVG를 직접 디자인(드로잉)하더라도 * 기성품 SVG 이미지를 제공하는 인터넷 사이트가 많이 있습니다 * JS 라이브러리 사용

---------------------------------- --- -------------------> 삶을 위해 변화하고, 변화를 위해 창조하세요.

HTML5의 SVG_html5 튜토리얼 기술에 대한 심층 분석

관련 기사