SVG 기본 개념 교육 과정

소개

Scalable 벡터 그래픽 개요

• 벡터 그래픽 이해
• SVG 기본사항
• SVG 용도 및 응용분야

SVG 사용의 기본을 배우기

• SVG 생성
• SVG을 이미지로 사용
• SVG 이미지 생성

SVG 코드 심층 분석

• SVG 레이아웃, 구조 및 속성 이해
• SVG Element의 소개
• SVG그래픽 Element을 사용하여 작업
• SVG 컨테이너 Element로 작업하기
• SVG 그래디언트 Element 작업

HTML 및 CSS과 함께 SVG 사용

• 임베딩SVG
• CSS을 사용하여 SVG 수정 및 스타일링
• SVG 반응형으로 만들기

SVG개의 스프라이트 생성

• 이미지 스프라이트 개요
• HTML인라인 SVG 스프라이트 사용
• HTML에서 외부 SVG 스프라이트 참조
• CSS인라인 SVG 스프라이트 사용
• SVG개의 조각 식별자 사용

최적화 SVG

SVG로 애니메이션 만들기

• SVG에 CSS을 사용 Animation
• SVG Animation에 SMIL 사용
• JavaScript를 사용하여 SVG Animation

첫 번째 SVG 로고 Animation 프로젝트 만들기

• 작업 환경 설정
• SVG을 그리다
• SVG 코드를 수정하여 SVG 스타일을 지정하기
• SVG 최적화
• SVG 애니메이션

문제 해결

마무리말