SVG 그래픽

<svg> 요소에 추가 할 수 있는 속성은 version, xmlns, xmlns:xlink, viewbox, width, height 속성이 설정됩니다.

<!DOCTYPE svg PUBLIC 
  "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg 
  version="1.1" 
  xmlns="http://www.w3.org/2000/svg" 
  xmlns:xlink="http://www.w3.org/1999/xlink" 
  xml:space="preserve">
  ...
</svg>

 

하지만 인라인 SVG 코드의 경우, 웹 브라우저에서 렌더링 하는데 다음 속성은 필요하지 않습니다.

불필요한 속성은 제거해 코드를 정리하세요. (DTD, version, xmlns, xmlns:xlink, xml:space)

• version
• xmlns
• xmlns:xlink

그러므로 인라인 SVG를 사용할 경우, 아래 코드처럼 간결하게 사용할 수 있습니다.

<svg width="520" height="520" viewBox="0 0 520 520">
  ...
</svg>

SVG의 너비(width), 높이(height)를 설정하는 방법은 <img> 요소와 동일하며 viewBox 속성은 값으로 min-x, min-y, width, height숫자 배열 값을 전달 받습니다. 이 값은 뷰포트에 맵핑 되는 공간을 명시 하며, preserveAspectRatio 속성과 관계를 가집니다.

<svg 
  width="512" height="512" 
  viewBox="0 0 512 512">
  ...
</svg>

SVG는 직사각형(rect), 원(circle), 타원(ellipse), 직선(line), 폴리 라인(polyline), 다각형(polygon)과 같은 기본 모양을 그릴 수 있는 요소 세트를 제공합니다. 각 요소는 좌표 위치(x, y), 크기(width, height) 등 속성을 설정할 수 있습니다.

사각형(rectangle)

<rect> 요소는 사각형을 그립니다. 너비(width), 높이(height), 색상(fill) 등을 속성으로 설정할 수 있습니다.

<svg>
  <rect width="480" height="240" fill="#3d87fb" />
</svg>

뷰포트 내부 특정 지점으로 위치(x, y) 이동 할 수도 있습니다.

<svg>
  <rect width="480" height="240" fill="#3d87fb" x="20" y="40" />
</svg>

둥근 테두리(rx, ry) 속성을 설정하면 테두리가 둥글게 돌려진 사각형을 그릴 수 있습니다.

<rect width="480" height="240" fill="#3d87fb" x="20" y="40" rx="20" ry="20" />

원(circle)

<circle> 요소는 원을 그립니다. 원의 중심(rx, ry), 반지름(r), 색상(fill) 등을 속성으로 설정할 수 있습니다. 테두리 색상(stroke), 테두리 두께(stroke-width) 속성을 설정하면 테두리를 그릴 수 있습니다.

<svg>
  <circle cx="200" cy="200" r="50" fill="#3e295e" />
</svg>

테두리 색상(stroke), 테두리 두께(stroke-width) 속성을 설정하면 테두리를 그릴 수 있습니다.

<circle cx="200" cy="200" r="50" fill="none" stroke="#f9b10a" stroke-width="14" />

타원(Ellipse)

<ellipse> 요소는 타원을 그립니다. 타원을 그리기 위한 반지름(rx, ry) 속성을 설정할 수 있습니다.

<ellipse 
  cx="200" cy="200" rx="50" ry="100"
  fill="#dd3742" stroke="#b13138" stroke-width="8" />
</svg>

직선(Line)

<line> 요소는 직선을 그립니다. 선의 시작점(x1, y1)과 끝점(x2, y2) 속성을 설정할 수 있습니다.

<svg>
  <line x1="440" y1="40" x2="120" y2="200" stroke-width="5" stroke="#26b2a2" />
</svg>

폴리라인(Polyline)

<polyline> 요소는 2개 이상의 점들이 직선으로 연결된 도형 그립니다. 각 점들의 위치(points) 속성을 설정할 수 있습니다. 각 점은(x,y) 공백으로 구분됩니다. 예) x1,y1 x2,y2 x3,y3

<svg>
  <polyline
    points="0,0 40,40 40,80 80,80 80,120 120,120 160,160" 
    fill="none" stroke="#b38fac" stroke-width="6" />
</svg>

다각형(Polygon)

<polygon> 요소는 3개 이상의 점들이 연결된 다각형을 그립니다.

<svg>
  <polygon 
    points="50,5 100,5 125,30 125,80 100,105 50,105 25,80 25,30" 
    fill="#4b6eec" />
</svg>

 

SVG 컨테이너 요소

 

g 요소

g 요소는 그룹화하기 위한 컨테이너 요소입니다. 이 요소 내부에 title, desc 요소를 사용하면 그룹화 된 요소에 접근 가능한 정보를 제공할 수 있습니다. 또한 관련 요소를 그룹화하여 그룹 전체를 개별 부분과 비교하여 조작 할 수 있습니다. 애니메이션을 그룹에 적용 할 수 있기 때문에 이러한 요소를 애니메이션화 할 때 특히 유용합니다. g요소에 포함되지 않은 요소는 자체 그룹 요소로 간주 됩니다.

 

defs 요소

defs요소 내에 선언된 그래픽은 SVG 뷰포트에 렌더링 되지 않습니다. 화면에 렌더링 하려면 use 요소를 통해 참조를 해야 합니다. 사용 방법은 앞서 다운 use 요소와 동일합니다. defs 내부에 선언된 그래픽 요소의 id 속성을 use 요소의 xlink:href 속성을 통해 참조하여 문서 전체에서 사용할 수 있습니다.

 

symbol 요소

symbol요소는 g 요소와 비슷합니다. 하지만 화면에 렌더링 되지 않는다는 점이 차이점입니다. 마찬가지로 use 요소를 사용해 재사용 할 수 있습니다. defs, g 요소와 달리 viewBox, preserveAspectRatio 속성을 설정할 수 있습니다.