Scalable Vector Graphics
2차원 벡터 그래픽을 표현하기 위한 XML 기반의 파일 형식
벡터 이미지는 확대해도 깨지지 않고 단순 도형 표현에 적합함
형태가 복잡해질수록 CPU 연산이 많아지고, XML 데이터가 많아져서 비트맵보다 용량이 커질 수 있음
래스터 이미지를 base64로 인코딩해 넣은 SVG 파일 또한 용량 매우 커짐
<svg version="1.1"
baseProfile="full"
width="300" height="200"
xmlns="http://www.w3.org/2000/svg">
<rect width="100%" height="100%" fill="red" />
<circle cx="150" cy="100" r="80" fill="green" />
<text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text>
</svg><rect />을 그려 배경을 빨간색으로 설정
<circle /> 녹색 원
<text /> 텍스트 svg
<rect x="0" y="0" width="100" height="100" />왼쪽 상단에서 100px의 정사각형을 정의
<svg width="200" height="200" viewBox="0 0 100 ">viewBox="x y width height"
SVG 캔버스 전체 크기는 200x200
viewBox속성을 사용하여 (0,0)에서 시작하는 100x100px의 화면을 200x200px의 화면에 출력
사각형
<rect x="60" y="10" rx="10" ry="10" width="30" height="30"/>rx 사각형의 둥근 꼭짓점의 x 방향으로의 반지름
ry 사각형의 둥근 꼭짓점의 y 방향으로의 반지름
원
<circle cx="25" cy="75" r="20" />r 원의 반지름
cx 원의 중심 중 x 값을 의미
cy 원의 중심 중 y 값을 의미
선
<line x1="10" x2="50" y1="110" y2="150" />x1 점 1의 x 값
y1 점 1의 y 값
x2 점 2의 x 값
y2 점 2의 y 값
Polyline
연결된 직선들의 그룹
<polyline
points="60 110, 65 120, 70 115, 75 130, 80 125, 85 140, 90 135, 95 150, 100 145" />포인트들의 목록, 각 숫자는 공백, 쉼표, EOL 또는 줄 바꿈 문자로 구분됨 각 포인트는 반드시 x 좌표와 y 좌표를 가지고 있어야 함
따라서 포인트 목록 (0,0), (1,1) 및 (2,2)는 "0 0, 1 1, 2 2"라고 쓸 수 있다
패스
SVG에서 사용할 수 있는 가장 일반적인 형태
path 요소를 사용해서 사각형(둥근 모서리가 있거나 없는), 원, 타원, 폴리라인 및 다각형을 그릴 수 있음
d 속성은 어떻게 경로를 그릴지
M은 이동(moveTo)
알파벳이 대문자일 경우(예를 들면 대문자 M), 뒤따르는 좌표는 페이지의 절대 좌표를 참조하며, 소문자 알파벳(m)일 경우 마지막 위치에 대한 상대적 좌표로 참조
L 선 그리기 (lineTo)
H는 가로선 V는 세로선을 그릴 수 있음
Z 패스 닫기 (closePath)
Q 베지어 곡선
T 곡선 이어그리기
<path d="M10 10 H 90 V 90 H 10 Z" fill="transparent" stroke="black"/>(10,10)에 시작해서 가로세로 90
채우기
fill은 도형 내부 색상을 설정
stroke는 도형의 외곽선 색상을 설정
HTML에서 쓰는 색상 지정 방식(예: red 같은 색상 이름, rgb(255 0 0), #FF0000 같은 hex 값 등)을 똑같이 사용 가능
fill-opacity, stroke-opacity 투명도 설정
선
stroke-width 속성은 스트로크(선)의 두께를 설정
경로를 중심으로 양쪽에 그림
stroke-linecap 선 끝 모양
butt선 끝을 딱 끊어서 90도 각도로 자름 (기본값)squarebutt처럼 직선이지만, 스트로크가 약간 더 튀어나옴 (길이의 절반만큼)round선 끝을 둥글게 마감, 둥근 stroke-width에 비례
각 polyline(다각선)은 두 개의 선분으로 이루어져 있고,
이 선들이 만나는 모서리 부분(joint)은 stroke-linejoin 속성으로 조절
miter선을 날카롭게 꺾어서 뾰족한 각을 만듦.
선이 교차하는 각도에 따라 선이 밖으로 길게 튀어나올 수 있음round모서리를 둥글게 처리함bevel모서리를 뚝 자르듯 평평하게 만듦 각이 아니라 경사면처럼 절단된 형태가 됨
stroke-dasharray 선을 점선처럼 만들기
paint-order
fill과 stroke을 어떤 순서로 그릴지를 조절
기본적으로는 먼저 fill, 그다음 stroke, 그다음 markers 순서로 그려짐
그림을 어떤 순서로 렌더링하느냐에 따라 시각적 결과가 달라지는데 이걸 제어하는 게 paint-order 속성
CSS
CSS로 설정 가능한 것
fill, stroke, stroke-dasharray, paint-order, opacity, filter, marker 등
즉, 색칠/선 그리기 관련 속성들은 대부분 CSS로 제어 가능
gradient, pattern 같은 것도 CSS에서 제어 가능
CSS로 설정 불가능한 것
width, height, <path> 안의 d 값 등
좌표나 도형 자체의 형태를 결정하는 속성들은 X
CSS 스타일은 인라인으로 요소 안에 직접 쓰는 것 외에도 별도의 스타일 정의 영역에 따로 분리해서 넣을 수 있음
하지만 일반 HTML처럼 <head> 안에 넣는 게 아니라 SVG 내부의 <defs>라는 특수한 영역에 넣음
<?xml version="1.0" standalone="no"?>
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<style><![CDATA[
#MyRect {
stroke: black;
fill: red;
paint-order: stroke;
}
]]></style>
</defs>
<rect x="10" height="180" y="10" width="180" id="MyRect"/>
</svg>스타일을 <defs> 영역이나 외부 스타일시트로 분리하면
많은 요소의 속성을 한 번에 관리하기 쉬움
hover 같은 CSS 가상 클래스도 사용
마우스 오버 효과 같은 동적 반응도 가능
그라디언트
linearGradient 직선 방향으로 색이 변함
radialGradient 원형으로 색이 퍼짐
<svg width="200" height="200">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="red" />
<stop offset="100%" stop-color="blue" />
</linearGradient>
</defs>
<rect x="10" y="10" width="180" height="180" fill="url(#grad1)" />
</svg>텍스트
SVG 이미지에 텍스트를 넣는 방법
<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
<path id="my_path" d="M 20,20 C 80,60 100,40 120,20" fill="transparent" />
<text>
<textPath xmlns:xlink="http://www.w3.org/1999/xlink" href="#my_path">
A curve.
</textPath>
</text>
<style>
<![CDATA[
text{
dominant-baseline: hanging;
font: 28px Verdana, Helvetica, Arial, sans-serif;
}
]]>
</style>
</svg>