<svg> </svg>
-
svg 태그는 Scalable Vector Graphics의 약어로 확장 가능한 그래픽을 의미합니다. 다시 말해, 크기를 확대하거나 축소할 수 있는 2차원 벡터 그래픽이며 확대하더라도 품질이 떨어지거나 용량이 커지지 않습니다.
-
svg 태그 내부에는 벡터 기반 그래픽을 xml 형식으로 작성하기 때문에 css나 js를 통해 수정이 가능합니다.
-
svg 태그 내부에는 circle, rect, line, path 등 요소들을 포함할 수 있습니다. 즉, 내부에 그래픽을 담기위한 Container로 볼 수 있습니다.
-
svg 태그 내 작성된 모든 요소와 속성에 애니메이션을 적용할 수 있습니다.
atrribute
-
width와height어트리뷰트를 통해 svg 영역의 너비를 설정할 수 있습니다. -
viewbox어트리뷰트는 svg 요소의 크기와 위치를 조정할 수 있습니다.viewbox어트리뷰트를 사용하면 viewport 크기에 따라 svg 요소의 크기가 자동으로 조절됩니다. 즉, 반응형 웹을 설계한다면viewbox어트리뷰트는 필수 속성입니다.-
viewbox="<min-x> <min-y> <width> <height>"형태로 값을 작성합니다.-
min-x : svg 영역이 시작될 좌측 상단 x 좌표를 설정
-
min-y : svg 영역이 시작될 좌측 상단 y 좌표를 설정
-
width : svg 영역의 좌표 평면 가로 너비 설정, 내부에 작성되는 요소들의 width 너비가 viewbox로 설정한 width 값을 기준으로 설정된다.
-
height : svg 영역의 좌표 평면 세로 너비 설정, 내부에 작성되는 요소들의 height 너비가 viewbox로 설정한 height 값을 기준으로 설정된다.
-
-
-
style어트리뷰트를 통해 다른 요소들처럼 인라인 스타일을 작성할 수 있습니다.
<div style="width: 200px; height: 200px; border: 1px solid green">
<svg viewbox="0 0 200 200" style="border: 1px solid #ff0066" width="100" height="100">
<rect x="0" y="0" width="100" height="100" style="fill: #0066ff"></rect>
</svg>
</div>빨간 테두리가 svg 영역이며, 이때 svg 내부 좌표로는 가로로 200, 세로로 200을 갖습니다. 그러므로 내부에 작성된 rect 요소의 width와 height가 100이므로 200의 절반만큼 너비를 갖습니다.
<rect> </rect>
- rect는 svg 내부에 직사각형과 직사각형 모양의 변형을 만드는데 사용됩니다.
attribute
-
width와height어트리뷰트를 작성하여 영역을 설정할 수 있습니다. -
x와y어트리뷰트를 통해 영역의 위치를 설정할 수 있습니다. 이때 사각형의 좌측 상단을 영점으로 위치가 설정됩니다. -
rx와ry어트리뷰트를 통해 모서리를 둥글게 깍을 수 있습니다. -
style어트리뷰트를 통해 다른 요소들처럼 인라인 스타일을 작성할 수도 있습니다.
property
-
css의
fill프로퍼티를 통해 영역의 색상을 설정할 수 있습니다.fill-opacity프로퍼티로 영역의 투명도를 설정할 수 있습니다. -
stroke프로퍼티로 테두리 색상을 설정할 수 있으며,stroke-opacity프로퍼티를 통해 테투리 영역의 투명도를 설정할 수 있습니다. 그리고stroke-width프로퍼티로 테투리 굵기를 설정할 수 있습니다.
<svg width="300" height="300" style="border: 1px solid #ff0066">
<rect x="100" y="100" rx="10" ry="10" width="100" height="100" style="fill: #0066ff; stroke: #ff6600; stroke-width: 10px"></rect>
</svg><circle> </circle>
- circle은 svg 내부에 원형 도형을 만드는데 사용됩니다.
Attribute
-
cx와cy어트리뷰트를 통해 원의 중심 x좌표와 y좌표를 설정합니다. 작성하지 않으면 기본값인 0으로 설정됩니다. -
r어트리뷰트를 통해 원의 반지름을 설정할 수 있습니다.
property
-
css의
fill프로퍼티를 통해 영역의 색상을 설정할 수 있고,fill-opacity프로퍼티를 통해 투명도도 설정할 수 있습니다. -
stroke로 테두리 색상을 설정하고,stroke-opacity로 테두리 투명도,stroke-width로 굵기를 설정할 수 있습니다.
<svg width="300" height="300" style="border: 1px solid #ff0066">
<circle cx="150" cy="150" r="50" style="fill: #0066ff; stroke: #ff6600; stroke-width: 10px"></circle>
</svg><ellipse> </ellipse>
- ellipse는 타원을 만드는데 사용됩니다.
attribute
-
cx와cy어트리뷰트를 사용하여 원의 중심 좌표를 설정할 수 있습니다. -
rx어트리뷰트로 수평 반경을 설정하고,ry어트리뷰트로 수직 반경을 설정합니다.
property
-
css의
fill프로퍼티를 통해 영역의 색상을 설정할 수 있고,fill-opacity프로퍼티를 통해 투명도도 설정할 수 있습니다. -
stroke로 테두리 색상을 설정하고,stroke-opacity로 테두리 투명도,stroke-width로 굵기를 설정할 수 있습니다.
<svg width="300" height="300" style="border: 1px solid #ff0066">
<ellipse cx="150" cy="150" rx="50" ry="100" style="fill: #0066ff; stroke: #ff6600; stroke-width: 10px"></ellipse>
</svg><line />
- line 태그는 svg 내부에 선을 만드는데 사용됩니다.
attribute
x1과y1어트리뷰트로 선의 시작 좌표를 설정합니다.x2와y2어트리뷰트로는 선의 끝 좌표를 설정합니다.
property
stroke로 테두리 색상을 설정하고,stroke-opacity로 테두리 투명도,stroke-width로 굵기를 설정할 수 있습니다.
<svg width="300" height="300" style="border: 1px solid #ff0066">
<line x1="150" y1="150" x2="300" y2="300" style="stroke: #0066ff; stroke-width: 2px" />
</svg><polygon />
- polygon 태그는 svg 내부에 다각형을 만드는데 사용됩니다.
attribute
points어트리뷰트를 통해 다각형 꼭짓점의 위치를 설정합니다.
property
-
css의
fill프로퍼티를 통해 영역의 색상을 설정할 수 있고,fill-opacity프로퍼티를 통해 투명도도 설정할 수 있습니다. -
stroke로 테두리 색상을 설정하고,stroke-opacity로 테두리 투명도,stroke-width로 굵기를 설정할 수 있습니다.
<svg width="300" height="300">
<polygon points="0,0 150,150 0,300" style="fill: #0066ff; stroke: #ff6600;" />
</svg><polyline />
- polyline 태그는 svg 내부에서 다각선을 만드는데 사용됩니다.
attribute
points어트리뷰트를 통해 다각선 꼭짓점의 위치를 설정합니다.
property
-
css의
fill프로퍼티를 통해 영역의 색상을 설정할 수 있고,fill-opacity프로퍼티를 통해 투명도도 설정할 수 있습니다. -
stroke로 테두리 색상을 설정하고,stroke-opacity로 테두리 투명도,stroke-width로 굵기를 설정할 수 있습니다.
<svg width="300" height="300">
<polyline points="10,200 150,150 290,0" style="fill: none; stroke: #ff6600; stroke-width: 2px;" />
</svg><path />
- path 태그로 선이나 면을 커스텀하여 생성할 수 있습니다.
attribute
d어트리뷰트를 사용하여 다양한 패스 데이터를 사용할 수 있습니다.
패스 데이터(path data)
1. M, m (moveTo)
: M, m은 이동 명령(moveTo) 패스 도형의 시작 좌표를 설정합니다. M은 절대 좌표, m은 상대 좌표를 설정할 수 있습니다.
ex) <path d="M10 10" /> : 패스 도형을 작성하기 위한 시작점을 x축 10, y축 10으로 설정합니다.
2. L, l (lineTo)
: L, l은 현재 점에서 다음 점까지 직선(lineTo)을 그립니다. L은 절대 좌표, l은 상대 좌표로 설정됩니다.
ex) <path d="M10 10 l90 100 l90 -100" />의 결과는 아래와 같은 직선이 그려지게 됩니다.
3. H, h
: H, h는 현재 점에서 수평선을 그립니다. H는 절대 좌표, l은 상대 좌표로 설정됩니다.
ex) <path d="M10 100 H100" />의 결과는 아래와 같은 직선이 그려지게 됩니다.
4. V, v
: V, v는 현재 점에서 수직선을 그립니다. V는 절대 좌표, v는 상대 좌표로 설정됩니다.
ex) <path d="M100 10 V100" />
5. Q, q
: Q, q는 2차 곡선, 하나의 제어점과 끝점을 설정합니다.
ex) <path d="M10 10 Q100 200 190 10" />의 결과는 아래와 같은 곡선이 그려지게 됩니다.
<text> </text>
- text 태그는 svg 내부에서 텍스트를 벡터 방식으로 사용할 수 있도록 해줍니다.
attribute
x와y어트리뷰트를 사용하여 텍스트의 위치를 설정합니다. 이때 텍스트 박스의 좌측 하단을 기준으로 배치합니다.
