Paths

현재 번역은 완벽하지 않습니다. 한국어로 문서 번역에 동참해주세요.

<path> 엘리먼트는 SVG 라이브러리의 가장 강력한 기본 도형이다. 선과 곡선, 호 등 다양한 형태를 그릴 수 있다.

Paths는 여러개의 직선과 곡선을 합쳐서 복잡한 도형을 그릴 수 있게 해준다. 직선으로만 이루어진 복잡한 도형은 polylines으로도 그릴 수 있지만, polylines은 비슷한 모양을 가진 paths로 그린 도형에 비해 곡선을 묘사할 때 더 많은 직선을 필요로 하기에 확대가 잘 되지 않을 수 있다. 그렇기에 SVG를 그릴 때 paths에 대해 이해하는 것은 매우 중요하다고 할 수 있다. 복잡한 paths를 그릴때 XML 편집기 또는 일반적인 텍스트 에디터로는 쉽지 않지만, SVG나 Paths들이 어떻게 보여지고 문제점을 어떻게 고칠 수 있는지 이해하는데엔 충분히 도움이 될 것이다.

Path의 모양은 d (basic shapes 참조)로 간단히 정의된다. "d" 특성은 여러개의 명령어와 그 파라미터들로 이루어진다.

각각 명령은 특정 알파벳으로 시작한다. 예를 들면 현재 그려지는 위치를 XY좌표계의 (10, 10)로 이동할 때, "Move To" 명령어를 사용하게 되는데 이 명령어는 알파벳 M으로 일컫는다. 그렇기에 SVG처리기가 M문자를 보게되면, 현재 그려지는 위치를 (10, 10) 으로 이동시키며 그리고 또 이어지는 명령어를 받게 된다.

모든 명령어는 2가지 변형이 존재하는데, 알파벳이 대문자일 경우(예를 들면 대문자 M), 뒤 따르는 좌표는 페이지의 절대좌표를 참조하며, 소문자 알파벳(m)일 경우 마지막 위치에 대한 상대적 좌표로 참조된다.

"d" 특성의 좌표는 절대로 단위를 가질 수 없으며 추후 세션에서 어떻게 Paths들의 위치나 형태가 변형될 수 있는지 배우도록 하자.

선(Line) 명령어

<path> 노드에는 다섯 개의 명령어가 있다. Line 명령어는 두 점 사이를 이어주는 선을 그려주는 시작점이다. 첫 번째 명령어는 'Move To(이동하기)' 혹은 'M' 이다. 이 명령어는 두 개의 파라미터 x와 y 좌표를 받는다. 하나의 좌표로는 선을 그릴 수 없다. "Move To(이동하기)" 명령어는 특정한 패스의 시작점을 나타낼 뿐이다.

M x y

혹은

m dx dy

아래의 예제를 보면 우리는 좌표(10,10)에 위치한 단 하나의 점을 가지고 있을 뿐이다. 하나의 시작점은 화면에 나타나지 않는다.

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">

  <path d="M10 10"/>

  <!-- Points -->
  <circle cx="10" cy="10" r="2" fill="red"/>

</svg>

선을 그리기 위한 세 가지 명령어가 있다. 가장 일반적인 것은 "L"이라 부르는 "선 그리기(Line To)" 명령어이다. L 명령어는 x, y 라는 두 개의 파라미터를 받는다. 새로운 선을 그리기 위한 현재 위치를 지정하는 것이다.

 L x y (or l dx dy)

간단하게 선을 그리는 두 가지 방법도 있다. 이 방법으로 가로 선 혹은 세로 선을 그릴 수 있다. 'H' 는 가로 선을 그리고, 'V'는 수직 선을 그릴 수 있다. 두 명령어는 특정 방향을 알려주는 단 하나의 인수를 받는다.

 H x (or h dx)
 V y (or v dy)

패스를 가장 쉽게 시작할 수 있는 방법은 도형을 그려보는 것이다. 사각형을 그려볼 텐데, (<rect>를 이용해 쉽게 그릴 수도 있다)  시작점부터 가로, 세로선도 함께 사용되었다.

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  
  <path d="M10 10 H 90 V 90 H 10 L 10 10"/>

  <!-- Points -->
  <circle cx="10" cy="10" r="2" fill="red"/>
  <circle cx="90" cy="90" r="2" fill="red"/>
  <circle cx="90" cy="10" r="2" fill="red"/>
  <circle cx="10" cy="90" r="2" fill="red"/>

</svg>

'z' 라는 ''패스 닫기(Close Path) 명령어를 통해 쉽게 패스를 마무리할 수 있다. 이 명령어는 현 위치부터 시작점까지 직선을 그린다. 항상 사용되진 않지만 패스를 마무리해야 할 경우 종종 쓰인다. 대문자와 소문자 사이의 차이는 없다.

 Z (or z)

위 코드를 짧게 줄여보면 :

 <path d="M10 10 H 90 V 90 H 10 Z" fill="transparent" stroke="black"/>

동시에, 위 형태를 상대좌표로도 표현해볼 수 있다. 상대좌표 명령어는 앞서 기술된 것 처럼, 소문자로 되어있는 명령어인데, 패스를 움직일 때 정확한 위치를 지정해주는게 아닌 현재 위치로부터 얼마나 움직여야 하는지를 기술해준다. 예를 들면 위 80x80박스를 아래처럼 표현할 수 있다.

 <path d="M10 10 h 80 v 80 h -80 Z" fill="transparent" stroke="black"/>

경로는 즉, (10,10)에서 시작하여 수평으로 80포인트만큼 현재에서 오른쪽으로 움직이고 수직으로 80포인트만큼 현재에서 아래로 이동하고 다시 시작점으로 이동하게 된다.

사실 읽다보면 위 예제모양을 만드는데 <polygon> 태그나 <polyline> 태그가 더 간편해보일 수 있다. 그렇지만, path는 개발자들입장에서 그리기 더 편하다. 성능을 보면 다 우열을 가릴 수 없이 다 비슷비슷하니, 편한 것으로 사용하자.

곡선 (Curve) 명령어

부드러운 곡선을 그릴 수 있는 세 가지 다른 명령어가 있다. 그중 두 가지는 '베지어 곡선'이며, 다른 하나는 원의 특정 부분인 '호'이다. 베지어 곡선은 아마 일러스트레이터나 포토샵, 잉크스케이프라는 벡터 그래픽 기반의 툴을 통해서 경험해봤을 것이다. 베지어 곡선의 수학적 배경은 위키피디아를 참조하길 바란다. 무한한 수의 베지어 곡선이 있지만, 패스 엘리먼트에서는 단 두 개의 간단한 속성이 있을 뿐이다. 하나는 'C' 라고 부르는 3차(Cubic) 베지에 곡선이고, 다른 하나는 'Q' 로 사용되는 2차(Quadratic) 베지에 곡선이다.

베지어 곡선 (Bezier Curves)

3차 베지에 곡선인 'C'는 조금 복잡한 곡선이다. 3차 베지어 곡선은 선을 잇는 각각의 점에 제어점을 가지고 있다. 그러므로 입방 베지에 곡선을 그리기 위해서는 총 세 개의 지정된 점이 필요하다.

 C x1 y1, x2 y2, x y (or c dx1 dy1, dx2 dy2, dx dy)

마지막으로 지정된 좌표 (x,y)는 곡선의 끝점이다. 다른 두 제어점에서 첫번째 제어점은 (x1,y1), 두 번째 제어점은 (x2,y2) 에 위치한다. 제어점은 기본적으로 각각의 시작점과 끝점에서 비스듬히 경사져 있다. 베지어는 시작점과 끝점의 각 제어점의 경사를 이용해 부드러운 곡선을 만드는 기능을 한다.

Cubic Bézier Curves with grid

<svg width="190" height="160" xmlns="http://www.w3.org/2000/svg">

  <path d="M10 10 C 20 20, 40 20, 50 10" stroke="black" fill="transparent"/>
  <path d="M70 10 C 70 20, 120 20, 120 10" stroke="black" fill="transparent"/>
  <path d="M130 10 C 120 20, 180 20, 170 10" stroke="black" fill="transparent"/>
  <path d="M10 60 C 20 80, 40 80, 50 60" stroke="black" fill="transparent"/>
  <path d="M70 60 C 70 80, 110 80, 110 60" stroke="black" fill="transparent"/>
  <path d="M130 60 C 120 80, 180 80, 170 60" stroke="black" fill="transparent"/>
  <path d="M10 110 C 20 140, 40 140, 50 110" stroke="black" fill="transparent"/>
  <path d="M70 110 C 70 140, 110 140, 110 110" stroke="black" fill="transparent"/>
  <path d="M130 110 C 120 140, 180 140, 170 110" stroke="black" fill="transparent"/>

</svg>

위 예제는 아홉 개의 베지어 곡선에 대한 코드이다. 왼쪽으로 갈 수록 곡선이 수평에 가까워 지고, 오른쪽으로 갈 수록 제어점은 점점 멀어지는 모습이다. 여기서 주목해야 할 점은 커브가 첫 번째 제어점 방향으로 시작한 다음, 두 번째 제어점 방향으로 커브가 구부러지고 있다는 것이다.

여러 베지어 곡선을 연결하여 확장된 곡선 형태를 만들 수도 있다. 종종 한 쪽의 제어점을 그대로 복제해서 사용해야할 때가 생기는데, 연결된 다른 부분의 경사를 그대로 유지하는 방법이다. 이 경우, 입방 곡선의 명령어 'S'를 사용해서 구현할 수 있다.

 S x2 y2, x y (or s dx2 dy2, dx dy)

S produces the same type of curve as earlier, but if it follows another S command or a C command, the first control point is assumed to be a reflection of the one used previously. If the S command doesn't follow another S or C command, then it is assumed that both control points for the curve are the same. An example of this syntax is shown below, and in the figure to the left the specified control points are shown in red, and the inferred control point in blue.

ShortCut_Cubic_Bezier_with_grid.png

<svg width="190" height="160" xmlns="http://www.w3.org/2000/svg">
  <path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke="black" fill="transparent"/>
</svg>

The other type of Bezier curve, the quadratic curve called with Q, is actually a simpler curve than the cubic one. It requires one control point which determines the slope of the curve at both the start point and the end point. It takes two arguments: the control point and the end point of the curve.

 Q x1 y1, x y (or q dx1 dy1, dx dy)

Quadratic Bézier with grid

<svg width="190" height="160" xmlns="http://www.w3.org/2000/svg">
  <path d="M10 80 Q 95 10 180 80" stroke="black" fill="transparent"/>
</svg>

As with the cubic Bezier curve, there is a shortcut for stringing together multiple quadratic Beziers, called with T.

 T x y (or t dx dy)

This shortcut looks at the previous control point you used and infers a new one from it. This means that after your first control point, you can make fairly complex shapes by specifying only end points.

This only works if the previous command was a Q or a T command. If it is not, then the control point is assumed to be the same as the previous point, and you'll only draw lines.

Shortcut_Quadratic_Bezier_with_grid.png

<svg width="190" height="160" xmlns="http://www.w3.org/2000/svg">
  <path d="M10 80 Q 52.5 10, 95 80 T 180 80" stroke="black" fill="transparent"/>
</svg>

Both curves produce similar results, although the cubic allows you greater freedom in exactly what your curve looks like. Deciding which curve to use is situational and depends on the amount of symmetry your line has.

Arcs

The other type of curved line you can create using SVG is the arc, called with A. Arcs are sections of circles or ellipses. For a given x-radius and y-radius, there are two ellipses that can connect any two points (as long as they're within the radius of the circle). Along either of those circles there are two possible paths that you can take to connect the points, so in any situation there are four possible arcs available. Because of that, arcs have to take in quite a few arguments:

 A rx ry x-axis-rotation large-arc-flag sweep-flag x y
 a rx ry x-axis-rotation large-arc-flag sweep-flag dx dy

At its start, the arc element takes in two arguments for the x-radius and y-radius. If you need to, look up ellipses to see how they behave. The third parameter describes the rotation of the arc. This is best explained with an example:

SVGArcs_XAxisRotation_with_grid

<svg width="320" height="320" xmlns="http://www.w3.org/2000/svg">
  <path d="M10 315
           L 110 215
           A 30 50 0 0 1 162.55 162.45
           L 172.55 152.45
           A 30 50 -45 0 1 215.1 109.9
           L 315 10" stroke="black" fill="green" stroke-width="2" fill-opacity="0.5"/>
</svg>

The example shows a path element that goes diagonally across the page. At its center, two elliptical arcs have been cut out (x radius = 30, y radius = 50). In the first one, the x-axis-rotation has been left at 0, so the ellipse that the arc travels around (shown in gray) is oriented straight up and down. For the second arc, though, the x-axis-rotation is set to -45 degrees. This rotates the ellipse so that it is aligned with its minor axis along the path direction, as shown by the second ellipse in the example image.

The four different paths mentioned above are determined by the next two argument flags. As mentioned earlier, there are still two possible ellipses for the path to travel around and two different possible paths on both ellipses, giving four possible paths. The first argument is the large-arc-flag. It simply determines if the arc should be greater than or less than 180 degrees; in the end, this flag determines which direction the arc will travel around a given circle. The second argument is the sweep-flag. It determines if the arc should begin moving at negative angles or positive ones, which essentially picks which of the two circles you will travel around. The example below shows all four possible combinations, along with the two circles for each case.

<svg width="325" height="325" xmlns="http://www.w3.org/2000/svg">
  <path d="M80 80
           A 45 45, 0, 0, 0, 125 125
           L 125 80 Z" fill="green"/>
  <path d="M230 80
           A 45 45, 0, 1, 0, 275 125
           L 275 80 Z" fill="red"/>
  <path d="M80 230
           A 45 45, 0, 0, 1, 125 275
           L 125 230 Z" fill="purple"/>
  <path d="M230 230
           A 45 45, 0, 1, 1, 275 275
           L 275 230 Z" fill="blue"/>
</svg>

The final two arguments designate the x and y coordinates to end the stroke. Arcs are an easy way to create pieces of circles or ellipses in your drawings. For instance, a pie chart would require a different arc for each piece.

If you're transitioning to SVG from Canvas, arcs can be the hardest thing to learn, but are also much more powerful. Because the start and end points for any path going around a circle are the same, there are an infinite number of circles that could be chosen, and the actual path is undefined. It's possible to approximate them by making the start and end points of your path slightly askew, and then connecting them with another path segment. At that point, it's often easier to use a real circle or ellipse node instead. This interactive demo might help you understand the concepts behind SVG arcs: http://codepen.io/lingtalfi/pen/yaLWJG (tested in chrome and firefox only, might not work in your browser)

문서 태그 및 공헌자

 이 페이지의 공헌자: newmsz, cnaa97
 최종 변경: newmsz,