본문 바로가기

웹언어/HTML5

[HTML기초문법] 14강 SVG태그 Path와 TEXT활용 - 오쌤의 니가스터디

728x90
반응형

 

 

 

 

 

 

 

 

 

 

1. SVG 태그란?

- SVG태그는 Scalable Vector Graphics의 약자로 벡터 기반 그래픽을 XML 형식으로 정의하는 것을 의미합니다.

- SVG태그는 SVG그래픽을 담기 위한 요소입니다.

- SVG태그 내부에 담을 수 있는 것은 원, 사각형, 다각형, 라인,  path 등이 있습니다. 

- SVG태그는 파일의 모든 요소와 모든 속성에 애니메이션을 적용할 수 있습니다. 

 

 

## SVG태그

<svg width="가로영역" height="세로영역">
	SVG그래픽
    ...
</svg>

 

- svg는 컨테이너로 묶음을 의미합니다. 내부에 그래픽을 담기 위한 그릇과 같은 태그입니다. 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

2. <path /> 태그

- <path /> 태그는 일러스트레이터처럼 패스(선과 면)을 이용한 태그입니다.

- 속성 중 d라는 속성에 다양한 패스 데이터를 사용할 수 있습니다.

 

 

1) 패스 데이터(path data)

데이터 종류 설명
M 이동좌표
L 선길이
H 수평선
V 수직선
C 곡선
S 부드러운 곡선
Q 2차 베지어 곡선
T 부드러운 2차 베지어 곡선
A 타원형 호
Z 가까운 경로

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

2) 예시 1 - 패스를 이용한 삼각형

- 아래 예제는 좌표(150,0)에서 시작해서 (75,200)위치까지 선이 있고, 그 다음 (255,200)까지 선이 있고 가까운 경로(Z)로 경로를 닫는 것을 정의한 것입니다.

 

## 코드

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>SVG태그</title>
        <style>
            
        </style>
    </head>
    <body>
        <svg width="400" height="210" >
            <path d="M150 0 L75 200 L225 200 Z" />
        </svg>
    </body>
</html>

 

 

 

## 결과

 

## 좌표 확인

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

3) 예시 2 - 패스를 이용한 곡선

- 베지어 곡선은 무제한으로 크기를 조정할 수 있는 부드러운 곡선을 모델링하는데 사용됩니다.

- 일반적으로는 두개의 끝점과 하나 또는 두개의 제어점을 선택합니다. 

- 하나의 제어 지점을 갖는 베지어 곡선을 이차 베지어 곡선이라고 합니다.

- 두개의 제어 지점을 갖는 베지어 곡선을 큐빅 베지어 곡선(입방향 3차원 곡선)이라고 합니다.

 

 

## 코드 

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>SVG태그</title>
        <style>
            
        </style>
    </head>
    <body>
        <svg width="400" height="400" >
            <path d="M 20 350 q 150 -300 300 0" stroke="blue" stroke-width="5" fill="none" />
        </svg>
    </body>
</html>

- M은 점의 시작 좌표로 (20,350)에서 시작하는 것입니다.

- Q는 2차 베이지 곡선을 그리겠다는 의미로 현재 점에서 x축으로 150px이동, y축으로 -300인 곳에 1차 제어점이 있다는 뜻입니다.

- 또, 시작좌표에서 X축이 300px이동, y축이 0인 곳에 끝점이 있다고 작성한 것입니다.

 

 

 

## 결과

 

 

## 좌표 원리

- A가 시작점, C가 끝점, B가 제어점입니다.

- 실제적으로는 곡선까지 SVG로 작업하는 것은 매우 어렵습니다.

- 그래서 일러스트레이터에서 곡선이나 면을 그린 후에 SVG파일로 변환하는 것을 추천합니다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

2. <text /> 태그

- <text />태그는 텍스트를 정의하는데 사용됩니다. 

- 텍스트를 벡터 방식으로 작성한다고 생각하시면 편합니다.

 

 

 

 

 

 

 

1) 예제1 - 기본텍스트 입력

## 코드

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>SVG태그</title>
        <style>
            
        </style>
    </head>
    <body>
        <svg width="200" height="30" >
            <text x="0" y="15" fill="red">I love OSSAM!</text>
        </svg>
    </body>
</html>

- 기본적으로 <text />태그에 자손으로 글자를 작성합니다.

- x속성은 x좌표, y속성은 y좌표입니다. 

- 글자색은 면색 즉 fill로 처리해줘야 합니다.

 

 

 

## 결과

 

 

 

 

 

 

 

 

 

 

 

 

2) 예제2 - 텍스트 회전

## 코드

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>SVG태그</title>
        <style>
            
        </style>
    </head>
    <body>
        <svg width="200" height="60" >
            <text x="0" y="15" fill="red" transform="rotate(30 20,40)">I love OSSAM!</text>
        </svg>
    </body>
</html>

 

 

 

 

## 결과

 

 

 

 

 

 

 

 

 

 

 

 

3) 예제3 - 하위 그룹 처리

- <tspan>태그를 사용하여 여러 하위그룹으로 정렬할 수 있습니다. 

 

## 코드

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>SVG태그</title>
        <style>
            
        </style>
    </head>
    <body>
        <svg width="200" height="90" >
            <text x="10" y="20" style="fill:red;">Several lines:
                <tspan x="10" y="45">First line.</tspan>
                <tspan x="10" y="70">Second line.</tspan>
            </text>
        </svg>
    </body>
</html>

 

 

## 결과

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

728x90
반응형