SVG(Scalable Vector Graphics, 확장 가능한 벡터 그래픽)는 XML 형식으로 2D 그래픽과 그래픽 애플리케이션을 기술하는 언어입니다. 이렇게 작성된 XML 코드는 SVG 뷰어를 통해 화면에 렌더링되며, 대부분의 최신 웹 브라우저에서는 PNG, GIF, JPG 이미지를 표시하듯이 SVG도 별도의 플러그인 없이 바로 표시할 수 있습니다.
HTML5에서는 SVG를 활용해 원, 사각형, 선 등 다양한 도형을 간단하게 그릴 수 있습니다. 이번 글에서는 SVG 로고를 직접 그려보는 예제를 소개합니다. 로고에 자연스러운 색상 전환 효과를 주기 위해 선형 그라디언트(linear gradient)를 함께 사용해 보겠습니다.
선형 그라디언트란?
선형 그라디언트는 두 개 이상의 색상이 일정한 방향으로 부드럽게 전환되는 효과입니다. SVG에서는 <linearGradient> 요소를 사용하여 정의하며, 시작점(x1, y1)과 끝점(x2, y2)을 지정해 그라디언트의 방향을 결정할 수 있습니다.
예제 코드
아래 코드를 실행하면 그라디언트가 적용된 타원형 SVG 로고를 확인할 수 있습니다.
<!DOCTYPE html> <html> <head> <title>HTML5 SVG logo</title> </head> <body> <svg height="170" width="400"> <defs> <linearGradient id="lgrad" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" style="stop-color:rgb(184,78,43);stop-opacity:1" /> <stop offset="50%" style="stop-color:rgb(241,241,241);stop-opacity:1" /> <stop offset="100%" style="stop-color:rgb(255,141,52);stop-opacity:1" /> </linearGradient> </defs> <ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#lgrad)" /> <text fill="#rgb(141,218,255)" font-size="40" font-family="Verdana" x="50" y="86">logo</text> </svg> </body> </html>
코드 설명
- <defs>: 재사용할 그래픽 요소(그라디언트 등)를 정의하는 영역입니다.
- <linearGradient>: 왼쪽(0%)에서 오른쪽(100%)으로 진행되는 그라디언트를 정의합니다. 적갈색 → 흰색 → 주황색 순서로 색상이 전환됩니다.
- <ellipse>: 중심 좌표(cx=100, cy=70), 가로 반지름(rx=85), 세로 반지름(ry=55)을 가진 타원을 그리고, 위에서 정의한 그라디언트를 채움(fill)으로 적용합니다.
- <text>: 타원 위에 'logo' 텍스트를 표시합니다.
실행 결과
위 코드를 브라우저에서 실행하면, 적갈색에서 흰색을 거쳐 주황색으로 부드럽게 변하는 그라디언트가 적용된 타원형 로고와 그 위의 'logo' 텍스트가 화면에 나타납니다.
이처럼 SVG를 활용하면 이미지 파일 없이도 코드만으로 확대·축소 시에도 선명도가 유지되는 벡터 로고를 손쉽게 만들 수 있습니다. 색상 값이나 도형의 크기를 조절해 자신만의 로고를 만들어 보세요.