HTML - SVG: A Beginner's Guide to Scalable Vector Graphics
안녕하세요, 미래의 웹 개발자 여러분! 오늘 우리는 HTML 내에서 SVG의 세계로 흥미로운 여정을 시작할 것입니다. 새로운 것에 대한 걱정은 하지 마세요 - 저는 여러분의 친절한 안내자가 되겠습니다. 이 주제를 단계별로 탐구해보겠습니다. 그럼 커피 한 잔을 들고, 시작해보세요!
SVG는 무엇인가요?
SVG는 확장 가능한 벡터 그래픽(Scalable Vector Graphics)의 약자입니다. 이 이름이 좀 기술적이게 들릴 수 있지만, 이를 쉽게 이해할 수 있도록 설명해드리겠습니다.
자신이 그림을 그린다고 상상해보세요. JPEG나 PNG와 같은 일반 이미지 포맷을 사용할 때, 그림은 잘 보이지만 크기를 키우면 흐리게 보이죠. 이러한 이미지는 작은 점들이 모여 이루어진 픽셀로 구성되어 있기 때문입니다.
반면에 SVG는 마법의 크레용으로 그린 것 같습니다. 그림의 크기가 어떻게 되든 항상 선명하게 보입니다. 이는 SVG가 픽셀을 사용하는 것이 아니라, 도형과 선을 만드는 수학 공식을 사용하기 때문입니다.
SVG (Scalable Vector Graphics)
SVG가 특별한 이유를 좀 더 깊이 탐구해보겠습니다:
-
확장성: 이름에서 알 수 있듯이, SVG 이미지는 품질을 잃지 않고 어떤 크기로나 확장할 수 있습니다. 작은 스마트폰에서부터 거대한 현수막에 이르기까지, 항상 선명하게 보입니다.
-
작은 파일 크기: SVG는 수학 공식을 사용하기 때문에, 일반 이미지 포맷보다 파일 크기가 종종 훨씬 작습니다.
-
편집 가능성: SVG 이미지는 코드로 편집할 수 있어, 색상, 도형, 크기를 이미지 편집 소프트웨어 없이도 변경할 수 있습니다.
-
접근성: SVG 이미지는 스크린 리더에 의해 읽혀질 수 있는 텍스트를 포함할 수 있어, 시각 장애인을 위한 웹 접근성을 높입니다.
HTML에서 SVG를 사용하는 방법
이제 SVG가 무엇인지 알고 보았으니, HTML에서 어떻게 사용할 수 있는지 살펴보겠습니다. 다음과 같은 여러 가지 방법이 있습니다:
- 인라인 SVG: SVG 코드를 직접 HTML 파일에 넣는 방법입니다.
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>-
<img>태그 사용: SVG를 다른 이미지처럼 사용할 수 있습니다.
<img src="circle.svg" alt="초록색 외곽선이 있는 노란 원">- CSS
background-image사용: CSS에서 배경 이미지로 SVG를 설정할 수 있습니다.
<div style="background-image: url('circle.svg');"></div>-
<object>태그 사용: 외부 SVG 파일을 포함할 수 있습니다.
<object data="circle.svg" type="image/svg+xml"></object>SVG 엘리먼트 내 태그
SVG는 다양한 도형과 디자인을 만들기 위해 사용할 수 있는 자신만의 태그 집합을 가지고 있습니다. 가장 흔한 태그를 몇 가지 소개하겠습니다:
| 태그 | 설명 |
|---|---|
<circle> |
원을 생성합니다 |
<rect> |
사각형을 생성합니다 |
<line> |
선을 생성합니다 |
<path> |
복잡한 도형을 생성합니다 |
<text> |
SVG에 텍스트를 추가합니다 |
<g> |
SVG 요소를 그룹화합니다 |
이 태그들을 사용한 예제를 보겠습니다:
<svg width="200" height="200">
<rect x="0" y="0" width="100" height="100" fill="red" />
<circle cx="150" cy="50" r="40" fill="blue" />
<line x1="0" y1="150" x2="200" y2="150" stroke="green" stroke-width="4" />
<text x="10" y="180" fill="purple">안녕하세요, SVG!</text>
</svg>이 예제에서 우리는 200x200 픽셀의 SVG 캔버스 내에 빨간 사각형, 파란 원, 초록색 선, 그리고 보라색 텍스트를 생성했습니다.
SVG 엘리먼트의 속성
SVG 엘리먼트는 그들의外观과 행동을 제어하는 다양한 속성을 가지고 있습니다. 몇 가지 흔한 속성을 소개하겠습니다:
| 속성 | 설명 |
|---|---|
width과 height
|
SVG의 크기를 설정합니다 |
fill |
도형 내부의 색상을 설정합니다 |
stroke |
도형 외곽선의 색상을 설정합니다 |
stroke-width |
도형 외곽선의 두께를 설정합니다 |
x과 y
|
요소의 위치를 설정합니다 |
cx과 cy
|
원의 중심점을 설정합니다 |
r |
원의 반지름을 설정합니다 |
HTML SVG 엘리먼트 예제
이제 모든 것을 하나로 모아 더 복잡한 예제를 보겠습니다:
- 웃는 얼굴:
<svg width="200" height="200">
<circle cx="100" cy="100" r="90" fill="yellow" />
<circle cx="70" cy="80" r="20" fill="black" />
<circle cx="130" cy="80" r="20" fill="black" />
<path d="M 50 140 Q 100 180 150 140" stroke="black" stroke-width="5" fill="none" />
</svg>이것은 노란색 원을 얼굴로, 두 개의 검은색 원을 눈으로, 그리고 곡선을 입으로 만듭니다.
- 간단한 집:
<svg width="200" height="200">
<rect x="50" y="100" width="100" height="80" fill="lightblue" />
<polygon points="50,100 100,50 150,100" fill="red" />
<rect x="80" y="130" width="40" height="50" fill="brown" />
</svg>이것은 연한 파란색 사각형을 집으로, 빨간색 삼각형을 지붕으로, 갈색 사각형을 문으로 만듭니다.
기억해 두세요, SVG를 마스터하는 열쇠는 연습입니다. 이 예제들을 수정해보세요, 색상, 크기, 위치를 바꿔보세요. 다양한 도형을 실험해보세요. 그러면 무엇을 만들 수 있을지 알게 될 것입니다!
결론적으로, SVG는 웹에서 확장 가능하고 효율적인 그래픽을 만드는 강력한 도구입니다. 웹 개발의 여정을 계속하면서, SVG가 흥미롭고 상호작용적이며 반응형 디자인을 만드는 데 큰 가능성을 열어줄 것입니다. 계속 연습해 나가세요. 곧 자신만의 놀라운 SVG 그래픽을 만들 수 있을 것입니다!
Credits: Image by storyset