EverGiver

Path란 element는 SVG 기본 도형 라이브러리에서 가장 강력한 엘리먼트이다. 선과 곡선, 호 등 다양한 형태를 그릴 수 있다. 패스의 모양은 d 속성 하나로 정의된다. ("d" 속성은 여러 개의 명령어와 그 파라미터들로 이루어진다.) 각각 명령은 특정 알파벳으로 시작한다. - "Move To" 명령을 사용하며, 이 명령은 알파벳 M으로 호출 (SVG 처리기가 이 문자를 읽게 되면 다른 위치로 이동하라는 명령으로 이해하게 된다.) 모든 명령어는 2가지 변형이 존재하는데, 알파벳이 대문자일 경우, 뒤따르는 좌표는 페이지의 절대 좌표를 참조하며, 소문자 알파벳일 경우 마지막 위치에 대한 상대적 좌표로 참조된다. Line(선) 명령어 두 점 사이에 선을 그리는 역할을 한다. M / m (moveTo) ..

line (선) x1 속성은 x-axis에서 라인의 시작을 정의 y1 속성은 y-axis에서 라인의 시작을 정의 x2 속성은 x-axis에서 라인의 끝을 정의 y2 속성은 y-axis에서 라인의 끝을 정의 line ​ 속성 - stroke-dasharray : 줄 사이 간격 ​ Rectangle (사각형) x는 사각형의 좌측 상단의 x 값을 의미 y는 사각형의 좌측 상단의 y 값을 의미 width는 사각형의 폭을 의미 height는 사각형의 높이를 의미 rx는 사각형의 둥근 꼭짓점의 x 방향으로의 반지름 ry는 사각형의 둥근 꼭짓점의 y 방향으로의 반지름 Circle (원) r은 원의 반지름을 의미 cx는 원의 중심 중 x 값을 의미 cy는 원의 중심 중 y 값을 의미 ​ Ellipse (타원) cx는 ..

SVG란 SVG는 Scalable Vector Graphics의 약어이며, 확장 가능한 벡터 그래픽이다. 2차원 그래픽 애플리케이션과 이미지, 관련 그래픽 스크립트 인터페이스 집합을 기술하기 위한 마크업 언어이다. 픽셀을 이용하여 그림을 그리는 png, jpg 파일들과 다르게 벡터를 기반으로 이미지를 표현한다. - 크기를 조절함에 따라 깨지는 것이 없고, 용량이 작기 때문에 웹에서 자주 사용하는 이미지 형식이다. SVG 이미지는 마크업으로 쓰이므로 텍스트 에디터로 작성하고 또 작성된 이미지를 수정할 수도 있다. 벡터를 기반으로 그려지므로 사이지를 크게 해도 깨지지 않는다. XML 포맷으로 파일이 작성되므로 JS나 CSS로 조작이 가능하다. [장점] - 애니메이션을 적용할 수 있다. - 편집 가능한 레이어..