1. 정의
Scalable Vector Graphics
확장 가능한 벡터 그래픽을 나타내는 XML 기반의 파일 형식
이미지를 구성하는 도형과 경로를 정의함 → 확대/축소시 이미지 품질 유지
비교 개념: 레스터(jpg, png, gif)
- 픽셀로 구성됨
2. 특징
1) 크기 조절 가능성
- 확대/축소시 이미지 해상도 유지
2) 편집 용이성
- 텍스트로 저장
- 텍스트 편집기로 편집 가능
3) 동적 디자인 변경 가능
- CSS 적용
4) 애니메이션 기능
- 내장된 애니메이션 요소가 있음
3. 주요 사용처
- 로고와 아이콘
- 차트와 그래프
- 지도
4. 코드 내에서 사용
1) 직접 작성
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" r="400" stroke="black" stroke-width="1" fill="blue"/>
</svg>
2) 저장된 svg 파일 사용
<div>
<img src="test.svg"/>
<div>
스타일 조정
//1
img{
height: 100px;
width: 100px;
}
//2
<svg preserveAspectRatio="XMaxYMax slice" viewBox="0 0 30 40" width="50" height="30">&Smile;</svg>
//3
<svg width="40" height="40" viewBox="0 0 100 100" fill="yellow">
//4
<svg width="40" height="40" viewBox="0 0 100 100" style="fill: yellow">
5. 모양 요소
- 사각형: <rec>
- 원: <circle>
- 타원: <ellipse>
- 선: <line>
- 다각선: <polyline>
- 다각형: <polygon>
- 패스: <path>
1) 기본 스타일 지정
<body>
<svg width="400" height="110">
<rect width="300" height="100"/>
</svg>
</body>
rect{
fill: rgb(0, 0, 255);
stroke-width: 3px;
stroke: rgb(0, 0, 0);
}
2) 투명도, 위치값 지정
<body>
<svg width="400" height="110">
<rect width="300" height="100" x="100" y="100"/>
</svg>
</body>
rect{
fill: rgb(0, 0, 255);
fill-opacity: 0.2;
stroke-width: 3px;
stroke: rgb(0, 0, 0);
stroke-opacity: 0.5;
}
3) 모서리 곡선
<body>
<svg width="400" height="110">
<rect width="300" height="100" x="100" y="100" rx="20" ry="20"/>
</svg>
</body>
rect{
fill: rgb(0, 0, 255);
fill-opacity: 0.2;
stroke-width: 3px;
stroke: rgb(0, 0, 0);
stroke-opacity: 0.5;
}
rx, ry
4) circle
<svg>
<circle cx="100" cy="100" r="50" fill="blue"/>
</svg>
cx, cy: 원 중심의 x좌표와 y좌표
5) ellipse
<svg>
<ellipse cx="200" cy="100" rx="100" ry="50" fill="yellow"/>
</svg>
rx: 수평 반경
ry: 수직 반경
6) line
<svg>
<line x1="0" y1="0" x2="100" y2="100"/>
</svg>
x1, y1: x축/y축 시작 좌표
x2, y2: x축/y축 끝 좌표
7) polygon
<svg>
<polygon points="200,0 250,150 100,210" fill="yellow"/>
</svg>각각 x1,y1 x2,y2 x3,y3 좌표를 나타냄
8) polyline
<svg>
<polyline points="0,0 20,20 40,40 60,60 80,80" fill="white" stroke="black" stroke-width="1px"/>
</svg>
'HTML, CSS, JavaScript' 카테고리의 다른 글
| [JavaScript] 객체 동적 접근(대괄호 접근법) (0) | 2025.04.24 |
|---|---|
| [Javascript] 옵셔널 체이닝 연산자 '?.' (1) | 2025.03.28 |
| [JavaScript] const의 값 변경(primitive/reference type) (0) | 2025.03.07 |
| [JavaScript] 테이블 토글 버튼(트리 구조 테이블) (0) | 2025.03.07 |
| [JavaScript] 배열 검색 메서드 (0) | 2025.02.26 |