SVG란?

천지윤·2024년 1월 21일

svg 직접

기술

목록 보기

2/6

SVG 뜻

Scalable Vector Graphics

: 벡터로 2차원 그래픽을 표현하기 위한 XML기반 파일 형식

xml

Extensible Markup language의 약자로 마크업 언어다.

벡터

백터는 점을 이은 선으로 구성된 이미지파일이다. 대표적으로 예로 ai(일러스트)파일이 있다.
벡터와 비교되는 파일은 레스터형식으로 픽셀단위로 표현한다. 대표적으로 jpeg가 있다.

누가 왜 만들었는가?

1990년대 후반 W3C가 새로운 벡터이미지 포맷을 만들고 싶어서 개발자들에게 요청해 6개 안건을 받았고, 이들을 기반들로 만들었다.

장점

마크업기반이라서 텍스트로 svg를 만들기 때문에 용량이 적어 로딩시간이 짧다. 텍스트로 만들고 브라우저가 읽는 방식으로 화면에 나타낸다.
또한 벡터기반이라 크기를 자유롭게 줄이고 늘여도 깨지지 않는다. 그래서 로고나 아이콘에 많이 사용한다.

그렇다면 svg가 어떻게 생겼는지 살펴보자.

svg을 직접 마크업 해보자.

간단한 사각형

아래는 100px크기로 사각형을 만든 svg코드다. html처럼 요소와 속성들을 조합해 벡터이미지를 만들 수 있다. 이처럼 간단한 svg는 직접 만들어 쓸 수 있다.

<svg width="100" height="100">
    <rect width="100" height="100" fill="#517e4b" />
</svg>

path

웹개발을 할 때 iconify에서 아이콘은 가져다 쓰다보면 path라는 태그가 많이 보인다. path는 선, 곡선 등을 자유롭게 그릴 수 있는 요소이기 때문에 많이쓰인다.
path는 d속성 하나에 모두 적는데, 그 안에는 (M: 이동, L: 선그리기, H: 가로선, V: 세로선, Z: 현재 위치부터 시작점까지 선 그리기, C: 베지어 곡선 그리기 등과 같은) 다양한 키워드들이 있다. 이런 문자와 수치를 조합해 만들 수 있다.

<svg width="200" height="200">
    <path d="M100 100 Q 60 60 50 100 T 100 180 M100 100 Q 140 60 150 100 T 100 180"
      stroke-width="3" stroke="#E55948"
      fill="#E55948" />
</svg>