Illustrator에서 내뿜는 SVG의 오픈 패스와 클로즈 패스의 차이

환경, 버전

Mac OS X El Capitan

Adobe Illustrator CC

jQuery 3.1.0

Velocity.js 1.3.0

준비한 것

채우지 않은 사각형과 그 사각형의 상단을 삭제한 클로즈 패스를 준비



이라레에서 내뿜는 XML 선언과 코멘트는 삭제했다.

클로즈 패스(정사각형)

path 요소가 g로 둘러싸여 있음을 알 수 있습니다. 이 g 태그는 자식 요소를 그룹화하는 요소로, 자식 요소가 여러 개 있는 경우 g에 대해 설정한 스타일 등이 자식 요소에 적용되기도 합니다. 자세한 내용은 Mozzila Develper Network의 SVG 요소 참조

Close.svg

<svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
     y="0px" viewBox="0 0 300 300" style="enable-background:new 0 0 300 300;" xml:space="preserve">
    <g>
        <path d="M270.2,31v238.9H31.3V31H270.2 M271.2,30H30.3v240.9h240.9V30L271.2,30z"/>
    </g>
</svg>

이 코드에서는 g에 대해 아무 것도 속성이 없었기 때문에 시도에 path를 g 요소에서 내 보았습니다.

Close.svg

<svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
     y="0px" viewBox="0 0 300 300" style="enable-background:new 0 0 300 300;" xml:space="preserve">
        <path d="M270.2,31v238.9H31.3V31H270.2 M271.2,30H30.3v240.9h240.9V30L271.2,30z"/>
</svg>

이것도 문제없이 표시됨 .

오픈 패스

이어 오픈 패스. 열린 경로는 path 태그가 아닌 "polyline 요소"로 정의됩니다. polyline 요소는 "여러 좌표로 연결된 직선을 생성"하는 요소입니다.

Open.svg

<svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
     y="0px" viewBox="0 0 300 300" style="enable-background:new 0 0 300 300;" xml:space="preserve">
    <style type="text/css">
        .st0{fill:none;stroke:#000000;stroke-miterlimit:10;}
    </style>
    <polyline class="st0" points="271.2,30 271.2,270.9 30.3,270.9 30.3,30 "/>
</svg>

line 요소

다음에 다음과 같은 패스를 준비해 보았다



이것은 세로 100px, 가로 100px의 아트보드에 대해 좌표 0,0 지점에서 오른쪽 방향으로 채우지 않은 직선을 100px 뺀 것입니다.

이것은 svg화하면 다음과 같다.

<svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
     y="0px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
    <style type="text/css">
        .st0{fill:none;stroke:#000000;stroke-miterlimit:10;}
    </style>
    <line class="st0" x1="0" y1="0" x2="100" y2="0"/>
</svg>

polyline이 「몇개의 좌표로 연결된 직선을 생성」에 대해, line 요소는 「2개의 좌표를 연결한 직선을 묘화」하는 것입니다. x1, y1, x2, y2의 값을 보면 알기 쉬운 느낌의 값입니다.

사각형의 좌표를 깨끗한 장소에서 본다

0, 0에 100px의 정사각형을 만들어 보았다



svg의 소스는 이런 느낌

<svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
     y="0px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
    <style type="text/css">
        .st0{fill-rule:evenodd;clip-rule:evenodd;fill:none;stroke:#000000;stroke-miterlimit:10;}
    </style>
    <rect x="0" class="st0" width="100" height="100"/>
</svg>

아, 이번에는 처음 만든 사람과 달리 path 요소가 아닌 rect 요소로 생성되었습니다. 애초에 path 요소란 무엇일까 하는 것으로 조사해 보았습니다

Mozilla Developer Network의 Path 요소 설명에 따르면

path 요소는 도형을 정의하는 범용적인 요소입니다. 모든 기본 도형은 path 요소에 의해 정의됩니다.

그렇습니다. 덧붙여서 path 요소의 d 속성내에 나타나는 알파벳에는 당연히 의미가 있어,

M은 moveto를 의미하며 대문자로 절대 위치, 소문자로 상대 위치를 나타냅니다.

Z는 closepath로 경로를 닫고 종료한다는 것을 나타냅니다.

L은 lineto를 의미하며 L에서 절대 좌표, l에서 상대 좌표를 나타내고 직선을 그리는 것을 의미합니다.

V도 lineto로 선을 그리지만, 수직선을 나타낸다(L만으로도 좋지 않습니까?)

H도 lineto로 선을 그리지만 수평선을 나타냅니다.

그 밖에도 C다의 S인 것을 사용하면 베지어 곡선을 그리기 위한 기술 방법이 있는 것 같으므로, 흥미가 있으면 W3C의 SVG1.1 Recommendation (권고) 의 페이지에서도 봐 주세요.