반응형 SVG3 SVG 기초 - 도형 그리기 Part 3 (패스, path) svg는 사실 코드를 이용해서 직접 그려서 사용하는 것보다는 일러스트레이터 등의 툴에서 작업한 결과물을 가져와서 활용하는 측면이 크기는합니다. 그래도, svg가 그려지는 동작원리를 한번 살펴보고 이해해두면 여러 모로 공부가 클 것이라 생각됩니다. 그런 의미에서 이번 포스팅은 svg의 꽃 패스(path)에 대해 살펴보기로 합니다. 패스(path)로 그리기 - 직선(Line) 패스로 도형을 그려보기 위해 다음과 같이 코드를 작성해봅니다. 기존 예제 코드들은 제거하고 패스를 위한 아래 코드를 작성하였습니다. path : 패스로 그리겠다. d : data M : Move to (=그리지 않고 첫 좌표로 이동) L : Line to 선을 그리겠다. 좌표 원소 2개 필요 H : Horizontal Line to =.. 2022. 11. 28. SVG 기초 - 도형 그리기 Part 2 (타원, 직선, 다중선, 다각형 - ellipse, line, polyline, polygon) 지난 번 학습에서는 직사각형과 원을 그리는 방법을 살펴보았습니다. 이번에는 좀더 다양한 그리기 요소들을 살펴보려고 합니다. 중복되는 설명은 생략할 수 있으니 이 파트를 처음 보시는 분은 Part 1을 먼저 보고 오시는 게 좋겠습니다. 3. 타원 그리기 - Ellipse 타원(Ellipse)이 원(circle)과 다른 점이 분명히 있겠죠? 우선 전체코드를 살펴보고 아래 코드를 한번 살펴봅시다. ellipse = 타원 cx : circle x 좌표 cy : circle y 좌표 rx : radius x = x 축방향 반지름 길이 ry : raduis y = y 축방향 반지름 길이 즉, 타원은 rx와 ry를 사용한다는 것이 뽀인트! 가 될듯합니다. 중심좌표가 x200, y300이고 x축 반지름 150, y축 .. 2022. 11. 27. SVG 기초 - 도형 그리기 Part 1 (직사각형과 원, rectangle & circle) 최근에 SVG를 조금 들여다보면서 공부해보고 있습니다. 예전에는 잘 사용하지 않았는데 최근에 주목도가 매우 커진 것 같습니다. SVG는 Scalable Vector Graphics로서 브라우저에서 벡터 그래픽을 다루는 기술입니다. https://developer.mozilla.org/ko/docs/Web/SVG SVG: Scalable Vector Graphics | MDN **SVG(Scalable Vector Graphics)**는 2차원 벡터 그래픽을 서술하는 XML 기반의 마크업 언어입니다. SVG는 텍스트 기반의 열린 웹 표준 중 하나로, 모든 사이즈에서 깔끔하게 렌더링 되는 이미지를 서술하 developer.mozilla.org jpg, png, gif = 비트맵 그래픽 ai = 벡터 그래픽 .. 2022. 11. 26. 이전 1 다음 반응형
