svg는 크기를 확대하거나 축소할 수 있는, 수학적 함수를 이용해 도형이나 선을 그려서 표현한 그래픽이다.
<SVG 태그란?>
- SVG 태그는 벡터 기반 그래픽을 XML 형식으로 정의하는 것을 의미
- SVG 태그 SVG 그래픽을 담기 위한 요소
- SVG 태그 내부에 담을 수 있는 것: 원, 사각형, 다각형, 라인, path
- 파일의 모든 요소와 모든 속성에 에니메이션을 적용할 수 있다.
<svg width="가로영역" height="세로영역">
SVG그래픽
...
</svg>
2. 모양 요소의 종류
1) 사각형: <rect> - svg 내부에서 직사각형과 직사각형 모양의 변형을 만드는 데 사용.
2) 원: <circle>
3) 타원: <ellipse>
4) 선: <line>
5) 다각선: <polyline>
6) 다각형: <polygon>
7) 패스: <path>
##rect 태그 예시
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
rect{
fill: rgb(0, 0, 255);
stroke-width: 3px;
stroke: rgb(0, 0, 0);
}
</style>
</head>
<body>
<svg width="400" height="110">
<rect width="300" height="100"></rect>
</svg>
</body>
</html>- <rect/> 태그에 속성으로 width, height를 설정하여 영역을 설정할 수 있다.
-fill속성은 면색을 의미, stroke 속성은 선색을 의미, stroke-width는 선 굵기를 의미
viewBox: svg 요소가 그려지는 영역에서, svg 요소의 크기를 확대 또는 축소 그리고 위치를 조정할 수 있는 속성. viewBox 속성을 이용하면 화면에 크기에 따라 svg 요소의 크기가 자동으로 조절된다. 따라서 반응형 웹을 설계하기 위해서 viewBox는 필수적이다.
viewBox= "<min-x> <min-y> <width> <height>"
min-x와 min-y는 svg가 그려지는 영역의 시작점, 왼쪽 상단의 꼭짓점으로, width와 height는 각각 영역의 가로, 세로 길이로 볼 수 있다.
이때 width와 height는 px단위가 아니다. svg 요소들의 위치를 조정하거나, 요소들의 확대와 축소를 위한 일종의 좌표 평면이다.
기본예시: 이해를 돕기 위해 svg 요소 중에 circle을 추가하여 컴포넌트 형태로 만들었다.
const App = () => (
<div style={{ marginTop: '50px', marginLeft: '50px' }}>
<div style={{ backgroundColor: 'yellow', width: '300px', height: '300px' }}>
<svg viewBox="0 0 200 200">
<circle r="100" fill="blue" />
</svg>
</div>
</div>
);
export default App;
viewport에서 svg는 width와 height가 각각 300px인 영역안에 위치하고 있다. 하지만 svg의 viewBox는 "0 0 200 200"이므로 viewport의 300px의 길이는 svg viewBox 좌표평면 기준으로 200 길이가 된다. svg의 요소 중에서 circle의 좌표 또한 svg의 viewBox의 좌표를 따른다. circle요소의 중심 좌표 속성 cx와 cy가 설정되지 않은 상태이므로 현재 cx="0", cy="0"이 적용된 상태이면서, 반지름 r=100의 circle 요소가 만들어졌다. 여기서 원 중심을 기준으로 제 1,3,4사분면은 svg viewBox 영역을 벗어났기 때문에 viewport에 나타나지 않는다.
<위치 조정예시>
circle요소에 cx="100", cy="100"을 추가했다.
바로 min-x와 min-y를 변경하면 된다.
viewBox의 min-x, min-y 를 변경하면 viewport에서 보이는 영역(현재 예시에서의 width, height 300px 영역)이 동일하지만, svg에서 보여주는 영역은 변경된다. viewBox가 "100 100 200 200"까지 변경되면, 아래 영상과 같이 된다. 위의 왼쪽 사진의 빨간 네모가 오른쪽 사진의 빨간 네모 위치로 이동한다고 생각하면 된다. 이때 빨간네모는 실제로 화면에서 보이는 부분이므로 정지되어 있고, 파란원이 북서쪽으로 이동하는 것처럼 영상이 나타난다.
면색 조정
- fill
- fill-opacity
circle {
fill: hotpink;
fill-opacity: 0.5;
}xmlns="http://www.w3.org/2000/svg" 속성
- imge/svg와 xml 파일을 위해 필요
- 인라인된 <svg>에서는 선택적
3. svg의 stroke 속성
-stroke: 선색 속성
-stroke-width: 선 굵기 속성
-stroke-linecap: 선의 양끝 모양 속성
-stroke-dasharray:점선처리 속성
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<svg width="300" height="80">
<g fill="none">
<path stroke="red" d="M5 20 |215 0"></path>
<path stroke="black" d="M5 40 |215 0"></path>
<path stroke="blue" d="M5 60 |215 0"></path>
</g>
</svg>
</body>
</html>-g 태그는 그룹을 의미
- M은 이동경로의 시작점을 의미하고 |은 선의 끝 좌표를 의미
2)stroke-width: 선 굵
'코딩 > CSS' 카테고리의 다른 글
| vh와 vw (0) | 2023.04.26 |
|---|---|
| :not 선택자 (0) | 2023.04.25 |
| CSS line-height (0) | 2023.04.24 |
| <a>태그 target 속성, rel 속성, class 속성 (0) | 2023.04.24 |
| CSS transition (0) | 2023.04.24 |
