코딩스쿨

▶ HTML Graphics

HTML에서 **SVG (Scalable Vector Graphics)**는 벡터 그래픽을 표시하는 방법으로, 주로 로고, 아이콘, 그래프, 다이어그램 등을 그릴 때 사용됩니다. SVG는 XML 기반의 언어로 정의되며, HTML 문서에 직접 포함하거나 외부 파일로 불러올 수 있습니다.

SVG의 주요 특징 중 하나는 확대하거나 축소해도 품질이 유지된다는 점입니다. 이는 SVG가 벡터 기반이기 때문입니다.

1. 기본 SVG 구조

SVG 그래픽은 <svg> 태그 안에 정의됩니다. 이 태그 안에서 다양한 그래픽 요소를 정의할 수 있습니다.

기본 예시:

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>SVG 기본 예시</title>
</head>
<body>
    <h1>SVG 기본 예시</h1>
    <svg width="400" height="400" style="border:1px solid #ccc;">
        <!-- 파란색 사각형 -->
        <rect x="50" y="50" width="100" height="100" fill="blue" />
        <!-- 빨간색 원 -->
        <circle cx="200" cy="200" r="50" fill="red" />
        <!-- 초록색 선 -->
        <line x1="50" y1="300" x2="300" y2="300" stroke="green" stroke-width="4" />
        
        <!-- 텍스트 -->
        <text x="50" y="350" font-size="20" fill="black">Hello SVG</text>
    </svg>
</body>
</html>

2. SVG 요소

SVG는 여러 그래픽 요소를 지원합니다. 각 요소는 특정 모양이나 동작을 정의하는 속성들이 있습니다.

주요 SVG 요소:

<rect>: 사각형을 그립니다.
```
<rect x="10" y="10" width="100" height="50" fill="blue" />
```
- x, y: 사각형의 좌상단 위치
- width, height: 사각형의 너비와 높이
- fill: 사각형 내부 색상
<circle>: 원을 그립니다.
```
<circle cx="50" cy="50" r="40" fill="red" />
```
- cx, cy: 원의 중심 좌표
- r: 반지름
- fill: 채우기 색상
<line>: 선을 그립니다.
```
<line x1="0" y1="0" x2="200" y2="200" stroke="black" stroke-width="2" />
```
- x1, y1: 시작점
- x2, y2: 끝점
- stroke: 선 색상
- stroke-width: 선의 두께
<ellipse>: 타원을 그립니다.
```
<ellipse cx="100" cy="80" rx="50" ry="30" fill="yellow" />
```
- cx, cy: 타원의 중심 좌표
- rx: 수평 반지름
- ry: 수직 반지름

<polygon>: 다각형을 그립니다.

<polygon points="50,150 150,150 100,50" fill="lime" stroke="purple" stroke-width="1" />

points: 다각형의 각 점을 좌표로 나열

<polyline>: 연결된 여러 직선을 그립니다.

<polyline points="0,40 40,40 40,80 80,80" fill="none" stroke="blue" stroke-width="2" />

points: 연결된 점들의 좌표

<path>: 복잡한 모양을 그리기 위해 다양한 명령어를 사용할 수 있는 요소입니다.
```
<path d="M 10 10 H 90 V 90 H 10 L 10 10" fill="none" stroke="black" />
```
- d: 그리기 명령어 (예: M은 이동, L은 선 그리기, H는 수평선, V는 수직선)

3. SVG 스타일링

SVG는 CSS로 스타일링할 수 있습니다. fill, stroke, stroke-width와 같은 속성들은 HTML에서 직접 속성으로 설정하거나, CSS를 통해 제어할 수 있습니다.

CSS로 스타일링하기:

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>SVG 스타일링</title>
    <style>
        .myRect {
            fill: coral;
            stroke: black;
            stroke-width: 2;
        }
        .myCircle {
            fill: lightblue;
            stroke: blue;
            stroke-width: 3;
        }
    </style>
</head>
<body>
    <h1>SVG CSS 스타일링</h1>
    <svg width="400" height="400" style="border:1px solid #ccc;">
        <!-- CSS 클래스 적용 -->
        <rect x="50" y="50" width="100" height="100" class="myRect" />
        <circle cx="250" cy="100" r="50" class="myCircle" />
    </svg>
</body>
</html>

4. SVG 애니메이션

SVG는 <animate> 요소를 사용하여 애니메이션을 적용할 수 있습니다. 이를 통해 속성의 값을 시간에 따라 변경할 수 있습니다.

애니메이션 예시:

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>SVG 애니메이션</title>
</head>
<body>
    <h1>SVG 애니메이션</h1>
    <svg width="400" height="400">
        <!-- 애니메이션 적용 -->
        <circle cx="50" cy="50" r="40" fill="green">
            <animate attributeName="cx" from="50" to="350" dur="2s" repeatCount="indefinite" />
        </circle>
    </svg>
</body>
</html>

<animate> 요소:
- attributeName: 애니메이션할 속성 (예: cx, cy, fill 등)
- from: 애니메이션 시작값
- to: 애니메이션 끝값
- dur: 애니메이션 지속 시간
- repeatCount: 반복 횟수 (indefinite는 무한 반복)

5. SVG 내장 이미지

외부에서 SVG 파일을 HTML 문서에 직접 삽입할 수도 있습니다. 이는 <img>, <object>, <iframe> 등을 통해 가능합니다.

예시:

<!-- img 태그로 SVG 삽입 -->
<img src="image.svg" alt="SVG 이미지" width="200" height="200" />
<!-- object 태그로 SVG 삽입 -->
<object data="image.svg" type="image/svg+xml" width="200" height="200"></object>

6. 반응형 SVG

SVG는 벡터 그래픽이기 때문에 해상도에 독립적이며, viewBox 속성을 사용하여 반응형으로 만들 수 있습니다.

반응형 SVG 예시:

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>반응형 SVG</title>
</head>
<body>
    <h1>반응형 SVG 예시</h1>
    <svg viewBox="0 0 400 400" width="100%" height="100%">
        <!-- 크기가 변해도 뷰박스에 맞춰 유지됩니다 -->
        <rect x="50" y="50" width="300" height="300" fill="lightgreen" stroke="black" stroke-width="5" />
    </svg>
</body>
</html>

viewBox="0 0 400 400": 이 속성은 SVG의 사용자 좌표계를 정의합니다. SVG의 모든 요소는 이 좌표계 안에서 배치됩니다.
width와 height를 백분율로 설정하여 반응형으로 만들 수 있습니다.

7. SVG와 자바스크립트

SVG 요소에 자바스크립트를 통해 동작을 추가할 수도 있습니다. 이벤트 핸들러를 사용하여 상호작용을 구현할 수 있습니다.

자바스크립트로 SVG 제어:

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>SVG와 자바스크립트</title>
</head>
<body>
    <h1>SVG와 자바스크립트 예시</h1>
    <svg id="svgGraphic" width="400" height="400">
        <circle id="myCircle" cx="200" cy="200" r="50" fill="blue"></circle>
    </svg>
    <button onclick="changeColor()">색상 변경</button>
    <script>
        function changeColor() {
            var circle = document.getElementById('myCircle');
            circle.setAttribute('fill', 'red'); // 원의 색상을 빨간색으로 변경
        }
    </script>
</body>
</html>

요약

SVG는 벡터 그래픽을 HTML에서 직접 삽입하거나 스타일링할 수 있는 강력한 도구입니다.
다양한 기본 요소들을 사용해 도형을 그리고, CSS나 애니메이션을 통해 스타일링과 움직임을 추가할 수 있습니다.
반응형으로 구현할 수 있으며, 자바스크립트와 연동하여 동적 그래픽을 만들 수 있습니다.

SVG는 특히 해상도에 구애받지 않고 다양한 크기에서 선명한 이미지를 제공하므로 웹 개발에서 매우 유용한 기술입니다.

코딩 스쿨 HTML

HTML SVG