Computer >> 컴퓨터 >  >> 프로그래밍 >> JavaScript

자바스크립트로 SVG 그래픽 만드는 방법 – 코드 예제로 배우기

SVG란 무엇인가?

SVG(Scalable Vector Graphics)는 XML 기반의 벡터 이미지 형식으로, 화면을 확대하거나 축소해도 품질이 저하되지 않는 것이 가장 큰 장점입니다. 로고, 아이콘, 데이터 시각화 차트 등 다양한 웹 요소에 폭넓게 활용되고 있습니다.

모던 브라우저의 SVG 지원 현황

현재 사용되는 모든 최신 브라우저는 SVG를 기본적으로 지원합니다. 구글 Chrome과 Firefox는 물론 Safari, Edge 등에서도 별도의 플러그인 설치 없이 SVG를 문제없이 렌더링할 수 있습니다. 또한 자바스크립트를 활용하면 SVG를 동적으로 제어하는 것도 매우 간단합니다.

자바스크립트로 SVG 도형 생성하기

자바스크립트를 이용하면 빈 SVG 문서 객체 모델(DOM)을 동적으로 만들고, 속성(attribute)을 지정하여 원(circle)이나 사각형(rectangle) 같은 도형을 손쉽게 추가할 수 있습니다. 다음은 노란색 원을 생성하는 기본 예제입니다.

var svgNS = "https://www.w3.org/2000/svg";
var myShape = document.createElementNS(svgNS, "circle");

myShape.setAttributeNS(null, "cx", 40);
myShape.setAttributeNS(null, "cy", 40);
myShape.setAttributeNS(null, "r", 30);
myShape.setAttributeNS(null, "fill", "yellow");

document.body.appendChild(myShape);

코드 단계별 설명

  • 네임스페이스 정의: SVG 요소는 반드시 https://www.w3.org/2000/svg 네임스페이스 안에서 생성해야 하므로, 이 주소를 변수에 담아 재사용합니다.
  • 요소 생성: createElementNS() 메서드로 circle 요소를 만듭니다. 일반적인 createElement()가 아닌 네임스페이스 버전을 사용해야 한다는 점에 유의하세요.
  • 속성 설정: setAttributeNS()를 통해 원의 중심 좌표(cx, cy), 반지름(r), 채우기 색상(fill)을 지정합니다.
  • 문서에 추가: 마지막으로 appendChild()를 호출해야 생성한 도형이 실제 화면에 나타납니다.

마무리

이처럼 자바스크립트와 SVG DOM API를 조합하면 정적인 이미지 파일 없이도 동적이고 인터랙티브한 그래픽을 구현할 수 있습니다. 여기에 애니메이션 효과나 사용자 입력에 반응하는 인터랙션을 더하면, 훨씬 풍부한 웹 시각화를 만들 수 있습니다.