SVG (Scalable Vector Graphic)

2016-07-23

Jekyll이나 Hexo를 이용할 때 SVG 포맷을 처음 보게 되어서 한 번 찾아보았다.

SVG는 Scalable Vector Graphic 의 약자로 XML을 통해 Vector Image(단순하게 말해서 확대해도 깨지지 않는 이미지)를 표현할 수 있게 정의된 포맷이다.

W3C에서 SVG를 정의하고 있고 Tutorial도 잘 정리해 두었다.

사용법은 굉장히 단순하게 보이지만 파고들면 역시나 쉽지 않다. (물론 시간만 있다면 Tutorial만 보고도 뭐든 그릴 수 있을 것 같긴 하다.)

뭘 그려볼까 하다가 LG의 CI를 그려보았다.

구성요소는 다음과 같다.

배경이 되는 빨간 circle
G의 기본이 되는 하얀 circle
우 상단 1/4 영역의 하얀 색을 지우기 위한 mask역할의 path
G의 가로줄 line
코 역할의 L을 그려줄 polyline

아래의 소스를 ~~~.svg 로 저장하고 html에서 <img> tag를 통해 사용할 수 있다.

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="80" height="80">
  <!-- background circle -->
  <circle cx="40" cy="40" r="40" fill="#C3013B" />
  <!-- inner circle -->
  <circle cx="40" cy="40" r="32" style="fill:none;stroke:#FFFFFF;stroke-width:3" />
  <!-- masking -->
  <path d="M40,8 A32,32 0 0,1 72,39" style="stroke:#C3013B;stroke-width:4;fill:none" />
  <line x1="50" y1="40" x2="73.5" y2="40" style="stroke:#FFFFFF;stroke-width:3" />
  <!-- eye -->
  <circle cx="25" cy="27" r="5" fill="#FFFFFF" />
  <!-- L -->
  <polyline points="40,22 40,58 50,58" style="fill:none;stroke:#FFFFFF;stroke-width:3" />
</svg>

그림의 결과는 아래와 같다.

Devetc

SVG (Scalable Vector Graphic)

참조