SVG는 Scalable Vector Graphics(확장 가능한 벡터 그래픽)의 약자로, XML 형식으로 2D 그래픽과 그래픽 애플리케이션을 표현하는 언어입니다. 작성된 XML 코드는 SVG 뷰어를 통해 화면에 렌더링되며, 대부분의 웹 브라우저는 PNG, GIF, JPG 이미지를 표시하는 것과 같은 방식으로 SVG도 문제없이 표시할 수 있습니다.
HTML SVG에서 선을 그리려면 <line> 요소를 사용합니다. 이 요소는 시작점과 끝점의 좌표를 지정하여 직선을 정의하며, 스타일 속성을 통해 색상과 두께를 자유롭게 조절할 수 있습니다.
line 요소의 주요 속성
- x1, y1 – 선이 시작되는 지점의 x, y 좌표
- x2, y2 – 선이 끝나는 지점의 x, y 좌표
- stroke – 선의 색상 지정
- stroke-width – 선의 두께 지정
예제
아래 코드를 실행하면 HTML5 SVG에서 선을 그리는 과정을 직접 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
#svgelem {
position: relative;
left: 10%;
-webkit-transform: translateX(-20%);
-ms-transform: translateX(-20%);
transform: translateX(-20%);
}
</style>
<title>HTML5 SVG Line</title>
</head>
<body>
<h2>HTML5 SVG Line</h2>
<svg id = "svgelem" width = "300" height = "200" xmlns = "https://www.w3.org/2000/svg">
<line x1 = "0" y1 = "0" x2 = "100" y2 = "100" style = "stroke:red;stroke-width:2"/>
</svg>
</body>
</html>
실행 결과
위 예제에서는 좌표 (0, 0)에서 (100, 100)까지 두께 2px의 빨간색 선이 그려집니다. x1, y1, x2, y2 값을 변경하면 선의 위치와 길이를 자유롭게 조정할 수 있고, stroke 값을 바꾸면 다양한 색상의 선을 손쉽게 표현할 수 있습니다.