어느 한가한 날 오후 github 을 보다보니 README.md 파일에 예쁜 뱃지들이 보였습니다.

'build : passing, maven central : 8.1.0 저런 단추들은 어디서 만들 수 있는 것일까?' 하는 궁금증이 생겼습니다.

검색을 하다 보니, 가장 쉬운 방법 중 하나는 shields.io 를 사용하는 방법이었습니다.

사이트의 설명대로 아래 형식으로 링크를 걸어주면 간단한 이미지가 나옵니다.

https://img.shields.io/badge/<LABEL>-<MESSAGE>-<COLOR>

예를 들어, 위 그림과 같은 뱃지를 만들고 싶다면, 아래 코드와 같이 url 을 생성해서 만들면 됩니다.

https://img.shields.io/badge/build-passing-green 
https://img.shields.io/badge/maven central-8.1.0-green

이젠, README.md 파일에는 아래와 같은 코드 형식으로 넣어주면 됩니다.

![](https://img.shields.io/badge/build-passing-green)
![](https://img.shields.io/badge/maven central-8.1.0-green)

shields.io 를 둘러보다 보니 github 관련 기능들이 많이 있습니다.

이를 테면, github 에서 last-commit 같은 경우 입니다.

https://img.shields.io/github/last-commit/:user/:repo

그런데, 막상 원래 궁금했었던 Facebook SDK README.mdown 파일은 아래와 같은 url 로 이미지를 만들고 있었습니다.

![Build Status](https://travis-ci.org/facebook/facebook-android-sdk.svg?branch=master)

그래서, SVG 가 무엇인지 궁금해 졌습니다.

SVG, 스케일러블 벡터 그래픽스(Scalable Vector Graphics, SVG)는 2차원 벡터 그래픽을 표현하기 위한 XML 기반의 파일 형식으로, 1999년 W3C(World Wide Web Consortium)의 주도하에 개발된 오픈 표준의 벡터 그래픽 파일 형식입니다.

SVG 형식의 이미지와 그 작동은 XML 텍스트 파일들로 정의 되어 검색화·목록화·스크립트화가 가능하며 필요하다면 압축도 가능합니다. (출처 : WikiPedia)

간단히 설명하면, xml 로 그림을 그리는 표준 방식입니다.

이를 테면, Rect x=10 y=10 width = 100 height = 100, 이런 식으로 써놓으면, (10,10) 좌표에 너비=100, 높이=100 인 사각형을 그대로 그려주는 것입니다.

예제 코드는 아래와 같습니다.

<svg xmlns="http://www.w3.org/2000/svg" >
	<rect x="10" y="10" width="100" height="100"/>
</svg>

위 Facebook SDK 예제에서 나온 이미지(travis-ci.org/facebook/facebook-android-sdk.svg?branch=master) 를 받아보면, 아래 코드와 같습니다. (실제 더 긴 코드이지만, 중요한 부분만 골라봤습니다.)

<svg>
  <rect rx="3" width="90" height="20" fill="#555"/>
  <rect rx="3" x="37" width="53" height="20" fill="#4c1"/>
  <g fill="#fff" text-anchor="middle" font-size="11">
    <text x="19.5" y="14">build</text>
    <text x="62.5" y="14">passing</text>
  </g>
</svg>

이렇게 필요한 텍스트와 칼라 값들만 입력해주면, 적당한 모양의 그림을 만들어 줄 수 있는 이미지를 만들어 줄 수 있습니다. shields.io 에서 생성된 파일 역시 비슷합니다.

참고한 사이트

Github Facebook Android SDK : https://github.com/facebook/facebook-android-sdk
Shield IO : https://shields.io
Shield IO 사용법 : https://velog.io/@loakick/Shield-IO-%EC%82%AC%EC%9A%A9%EB%B2%95-iojyndy4pi

W3C SVG : www.w3.org/Graphics/SVG/
SVG Tutorial : tutorials.jenkov.com/svg/index.html
생활 코딩 SVG : https://opentutorials.org/course/2418/13666