SVG는 XML기반의 2차원 벡터 그래픽이다.
일반적인 도트단위 비트맵 그래픽과 달리 CSS와 Javascript의 적용이 가능하고, 이미지의 크기의 상관없이 화질이 선명하게 유지된다.
이러한 특징때문에 아이콘 혹은 그래프등과 같은 사용자 인터페이스에 널리 쓰인다.
다음 실습에 앞서서 SVG파일이 하나 필요한데 만약 없다면 아래 사이트에서 원하는 SVG파일을 다운 받을 수 있다.www.flaticon.com
1. SVG 출력하기
1. <img> 태그를 이용하여 출력하기
<img src="./example.svg" />
HTML
2. background를 통해 출력하기
<style>
.svg {
width: 600px;
height: 600px;
background: url('./example.svg') no-repeat 0 0;
}
</style>
<div class="svg"></div>
HTML
이 때, div태그는 너비가 없기 때문에 width와 height를 SVG크기만큼 지정해줘야한다.
3. 인라인으로 출력하기
<svg id="Capa_1" enable-background="new 0 0 512.009 512.009" height="512" viewBox="0 0 512.009 512.009" width="512"
xmlns="http://www.w3.org/2000/svg">
<g>
<path d="m379.514 358.581c-113.827 0-206.102-92.275-206.102-206.102 0-38.165 10.386-73.898 28.467-104.552-80.291 28.163-137.871 104.613-137.871 194.524 0 113.827 92.275 206.102 206.102 206.102 75.662 0 141.789-40.779 177.635-101.55-21.357 7.491-44.315 11.578-68.231 11.578z" fill="#8fd5f3"/>
<path d="m224.708 404.4c-5.365 0-10.522.878-15.351 2.478-9.902-27.216-35.998-46.655-66.637-46.655-30.862 0-57.105 19.727-66.84 47.255-5.316-1.986-11.068-3.078-17.076-3.078-26.954 0-48.804 21.85-48.804 48.804 0 26.953 21.85 48.804 48.804 48.804 15.008 0 28.428-6.78 37.38-17.438 12.454 10.851 28.721 17.438 46.537 17.438 17.291 0 33.13-6.198 45.435-16.483 8.941 10.105 21.999 16.483 36.553 16.483 26.954 0 48.804-21.85 48.804-48.804-.001-26.954-21.851-48.804-48.805-48.804z" fill="#e4e9ee"/>
<g>
<path d="m502.008 120.53-23.342-15.608 9.71-26.347c-18.63-9.764-41.026-12.306-62.611-5.293-3.648 1.188-7.393-1.533-7.391-5.37 0-22.695-9.338-43.21-24.381-57.911l-22.057 17.376-22.057-17.376c-15.043 14.701-24.381 35.215-24.381 57.911.002 3.837-3.742 6.557-7.391 5.37-21.585-7.013-43.98-4.472-62.611 5.293l9.71 26.347-23.342 15.608c9.333 18.85 25.958 34.07 47.542 41.083 3.65 1.184 5.08 5.586 2.823 8.688-13.34 18.361-17.844 40.446-14.314 61.182l28.058-1.093 7.631 27.023c20.811-3.051 40.424-14.159 53.764-32.52 2.254-3.105 6.882-3.105 9.135 0 13.34 18.361 32.953 29.469 53.764 32.52l7.631-27.023 28.058 1.093c3.529-20.736-.974-42.821-14.314-61.182-2.257-3.103-.827-7.505 2.823-8.688 21.585-7.013 38.21-22.233 47.543-41.083z" fill="#ec9eb0"/>
</g>
<g>
<path d="m444.436 337.566c-20.838 7.309-42.681 11.015-64.922 11.015-108.131 0-196.102-87.971-196.102-196.102 0-35.041 9.364-69.437 27.08-99.471 2.134-3.617 1.78-8.182-.886-11.427-2.666-3.246-7.075-4.478-11.037-3.09-30.438 10.676-58.625 28.454-81.512 51.412-22.893 22.963-40.583 51.209-51.158 81.685-1.811 5.217.951 10.915 6.169 12.726 5.224 1.813 10.916-.952 12.726-6.169 9.595-27.647 25.648-53.278 46.428-74.121 14.446-14.491 31.213-26.706 49.374-36.061-11.296 26.596-17.184 55.355-17.184 84.517 0 57.723 22.479 111.991 63.295 152.807 40.815 40.816 95.084 63.295 152.807 63.295 15.039 0 29.918-1.54 44.479-4.592-14.913 18.845-33.234 34.923-53.959 47.225-26.825 15.923-57.249 25.166-88.469 26.983-6.651-25.178-29.616-43.798-56.856-43.798-3.194 0-6.37.259-9.506.772-13.525-27.21-41.62-44.949-72.481-44.949-11.208 0-22.028 2.336-31.919 6.597-19.937-27.719-32.262-60.072-35.756-94.07-.564-5.494-5.465-9.491-10.97-8.926-5.494.565-9.489 5.476-8.925 10.97 3.788 36.864 16.99 71.971 38.33 102.186-9.748 7.479-17.823 17.172-23.388 28.507-3.701-.722-7.475-1.086-11.289-1.086-32.426-.001-58.805 26.378-58.805 58.803s26.379 58.804 58.804 58.804c14.162 0 27.666-5.066 38.247-14.143 13.394 9.173 29.299 14.143 45.67 14.143 15.901 0 31.443-4.717 44.612-13.422 10.46 8.613 23.662 13.422 37.375 13.422 30.758 0 56.059-23.742 58.58-53.859 34.21-2.082 67.539-12.276 96.954-29.736 31.3-18.58 57.621-44.974 76.116-76.33 2.134-3.617 1.78-8.182-.886-11.427-2.665-3.246-7.074-4.48-11.036-3.09zm-219.728 154.442c-11.098 0-21.691-4.778-29.063-13.11-1.974-2.229-4.725-3.373-7.493-3.373-2.265 0-4.541.765-6.409 2.328-10.921 9.128-24.779 14.156-39.021 14.156-14.688 0-28.883-5.319-39.968-14.978-2.022-1.762-4.655-2.639-7.346-2.43-2.676.208-5.155 1.483-6.881 3.538-7.403 8.814-18.237 13.87-29.723 13.87-21.397-.001-38.804-17.409-38.804-38.805s17.407-38.804 38.804-38.804c4.666 0 9.233.823 13.575 2.445 2.514.939 5.299.829 7.729-.305 2.432-1.135 4.305-3.199 5.199-5.728 8.586-24.277 31.658-40.589 57.413-40.589 25.517 0 48.52 16.104 57.239 40.073 1.849 5.083 7.403 7.775 12.542 6.074 3.947-1.307 8.054-1.97 12.206-1.97 21.396 0 38.804 17.407 38.804 38.804s-17.407 38.804-38.803 38.804z"/>
<path d="m507.566 112.217-16.793-11.229 6.985-18.956c1.737-4.713-.292-9.983-4.74-12.315-20.169-10.57-42.976-13.19-64.821-7.554-1.39-22.516-10.929-43.398-27.215-59.313-3.593-3.511-9.232-3.811-13.178-.704l-15.869 12.501-15.868-12.501c-3.944-3.108-9.584-2.808-13.178.703-16.285 15.914-25.825 36.795-27.216 59.313-21.841-5.635-44.649-3.017-64.82 7.554-4.448 2.332-6.478 7.602-4.74 12.315l6.984 18.956-16.793 11.229c-4.176 2.792-5.632 8.249-3.403 12.75 10.104 20.406 27.014 35.931 48.001 44.212-12.11 19.032-16.666 41.534-12.846 63.982.844 4.953 5.231 8.519 10.248 8.314l20.186-.786 5.49 19.442c1.231 4.358 5.204 7.283 9.616 7.283.481 0 .97-.035 1.459-.107 22.528-3.303 42.521-14.589 56.88-31.989 14.358 17.399 34.351 28.686 56.882 31.989 4.961.729 9.708-2.342 11.074-7.176l5.489-19.442 20.188.786c5.019.211 9.403-3.362 10.247-8.314 3.82-22.447-.735-44.947-12.847-63.982 20.984-8.279 37.896-23.805 48.001-44.212 2.229-4.5.773-9.957-3.403-12.749zm-56.185 39.884c-4.751 1.541-8.509 5.296-10.052 10.046-1.544 4.75-.711 9.997 2.224 14.032 9.598 13.21 14.262 28.905 13.491 44.949l-18.756-.731c-4.64-.174-8.757 2.828-10.014 7.275l-5.101 18.064c-15.497-4.226-28.981-13.511-38.577-26.718-2.934-4.042-7.667-6.454-12.66-6.454-4.994 0-9.728 2.413-12.658 6.451-9.598 13.21-23.083 22.496-38.58 26.722l-5.102-18.064c-1.221-4.321-5.162-7.282-9.62-7.282-.131 0-.262.002-.394.007l-18.755.731c-.771-16.044 3.893-31.739 13.487-44.945 2.938-4.04 3.771-9.287 2.228-14.037-1.544-4.75-5.301-8.505-10.047-10.044-15.529-5.046-28.528-15.001-37.336-28.435l15.604-10.433c3.841-2.569 5.423-7.435 3.824-11.771l-6.49-17.613c15.021-5.69 31.386-6.104 46.913-1.061 4.747 1.544 9.996.717 14.037-2.218 4.041-2.936 6.452-7.67 6.449-12.66 0-16.329 5.452-31.768 15.506-44.295l14.744 11.616c3.631 2.859 8.746 2.859 12.377 0l14.745-11.616c10.053 12.527 15.505 27.965 15.505 44.29-.003 4.995 2.408 9.729 6.449 12.665 4.042 2.935 9.289 3.764 14.032 2.221 15.529-5.045 31.896-4.632 46.918 1.059l-6.49 17.613c-1.599 4.336-.018 9.202 3.824 11.771l15.604 10.433c-8.807 13.432-21.804 23.388-37.329 28.432z"/>
<path d="m406.359 117.788-24.423 7.935v-25.681c0-5.523-4.478-10-10-10s-10 4.477-10 10v25.679l-24.424-7.936c-5.25-1.706-10.894 1.168-12.601 6.42-1.706 5.252 1.168 10.894 6.421 12.601l24.422 7.935-15.095 20.776c-3.246 4.468-2.256 10.722 2.212 13.968 1.775 1.29 3.831 1.91 5.87 1.91 3.092 0 6.142-1.43 8.098-4.123l15.095-20.775 15.095 20.777c1.956 2.693 5.006 4.123 8.098 4.123 2.038 0 4.095-.621 5.87-1.91 4.468-3.246 5.459-9.5 2.212-13.968l-15.094-20.775 24.424-7.936c5.253-1.707 8.127-7.348 6.421-12.601-1.707-5.25-7.348-8.126-12.601-6.419z"/>
<circle cx="65.363" cy="218.747" r="10"/>
</g>
</g>
</svg>
HTML
svg파일을 보면 XML형식의 태그들을 볼 수 있다. 해당 코드를 HTML에 인라인으로 입력해도 출력 가능하다.
4. Object 태그 활용하기
<object data="./example.svg" type="image/svg+xml"></object>
HTML
2. 직접 SVG 그리기
1. SVG 사이즈
<style>
svg {
background-color: grey;
}
</style>
<svg>
<rect x="50" y="30" width="100" height="100"></rect>
</svg>
HTML
위의 예시를 이용해서 SVG를 그리면 다음과 같다.
일단 SVG는 그 자체로써 하나의 영역을 가진다. 회색으로 칠해진 부분이 기본 너비와 높이이다.
그리고 그 안에는 직사각형(rect), 원(circle), 타원(ellipse), 직선(line), 폴리 라인(polyline), 다각형(polygon)과 같은 기본 모양을 그릴 수 있는 요소들을 제공한다.
해당 요소들은 어디에 그릴지, 그리고 그 크기가 얼마만큼인지 정해주어야 한다.
해당 예시는 SVG내에서 X축으로 50px Y축으로 30px 인 위치에서 width 100px height 100px인 사각형을 그린다.
이 때 단위를 생략하면 px로 지정된다.
SVG역시 크기를 지정해줄 수 있다.
<style>
svg {
width:300px;
height: 300px;
background-color: grey;
}
</style>
<svg>
<rect x="50" y="30" width="100" height="100"></rect>
</svg>
HTML
이 때 SVG의 크기와 관련된 속성이 또 하나 있는데 viewBox라는 개념이다.
<style>
svg {
width:300px;
height: 300px;
background-color: grey;
}
</style>
<svg viewBox="0 0 200 200">
<rect x="50" y="30" width="100" height="100"></rect>
</svg>
HTML
viewBox역시 x축 y축 너비 높이 값을 순서대로 입력받는다.
viewBox는 보여지는 도형의 비율이다. 실제로는 300px 300px의 SVG컨테이너를 가졌지만, 내부에선 마치 200px 200px 컨테이너에 있는 것처럼 노출된다.
2. CSS 적용 및 속성
<svg viewBox="0 0 300 300">
<style>
svg {
background-color: gray;
}
@keyframes rect-ani {
from {
transform: scale(0.9);
}
to {
transform: scale(1.1);
}
}
.rect {
fill:blue;
stroke: violet;
stroke-width: 10px;
transform-origin: 100px 80px;
animation: rect-ani 1s infinite alternate;
}
</style>
<rect class="rect" x="50" y="30" width="100" height="100"></rect>
</svg>
HTML
svg 요소들은 다음과 같은 속성을 가진다.
fill : 배경색을 칠함
stroke: 테두리 색을 결정
stroke-wdith: 테두리의 너비
또한 transform-origin 속성은 해당 도형이 아닌 SVG를 기준으로 동작한다.
이 때, SVG안에 style태그를 사용했는데 style뿐만 아니라 및 script태그 역시 사용되는것도 가능하다.
3. 곡선 및 원형 도형
출력물은 다음과 같다.
원형 태그부터 살펴보자
원형은 포지션을 잡을때 cx, cy속성을 사용한다. 이는 원의 중앙점의 좌표이다.
사각형의 바로 옆자리로 만들기 위해서 x축을 10 + 100 + 10 + 50 ( 사각형의 포지션 + 사각형의 길이 + 사각형과 원 사이 거리 + 반지름 )을 더해주었다.
사각형 태그에는 rx, ry속성을 사용했는데 이는 모서리의 굴곡 사이즈를 설정한다.
타원 속성은 사이즈 자체를 rx, ry속성을 사용했다. 이는 각각 x축의 반지름 y축의 반지름을 의미한다.
4. 직선 및 자유곡선
line은 직선을 그린다. 시작축 (x1,y1)과 끝 축(x2,y2)를 정해서 그릴 수 있다.
polyline은 연속된 직선을 그린다. points속성은 x y를 하나의 세트로 ,로 구분하여 연속되게 작성한다.
이때 CSS속성으로 fill을 transparent로 정했는데 이는 모든 SVG요소는 fill이 black으로 기본값이 정해져 있기 때문이다.
polygon은 polyline과 동일하지만 끊어진 선을 연결하여 하나의 도형으로 만든다.
5. PATH
path는 마우스 포인터로 그린다고 생각해볼 수 있다.
M ( x , y) 는 최초의 시작 점으로 마우스를 옮긴다.
H ( x ) 는 직각으로 X축의 길이만큼 선을 그린다.
V ( y ) 는 수직으로 Y축의 길이만큼 선을 그린다.
L ( x , y) 는 대각선으로 X, Y 축까지 선을 그린다.
A는 시작좌표 B는 중심좌표 C는 끝좌표
C는 베지에 곡선을 그릴때와 같다.
C ( 시작좌표 x, 시작좌표y, 중심좌표x, 중심좌표y, 끝좌표x, 끝좌표y )
CSS로 쓰인 속성들은 다음과 같다.
stroke-linecap: 선의 양 끝의 처리를 해준다. round라면 선 끝을 둥글게 처리한다.
stroke-linejoin: 선이 만나는 지점을 처리해준다. round라면 만나는 지점을 둥글게 처리한다.
6. TEXT 입력하기
글자는 text태그에 x, y축으로 시작지점을 속성으로 설정하여 작성한다.
이 때, CSS Font 속성을 그대로 사용하나 Color는 예외적으로 fill속성을 이용한다.
textPath속성은 path를 참조하여 곡선형태로 글을 작성할 수 있게 된다.
사용방법은 defs태그 안에 path를 작성한다 이 때 아이디 값을 textPath에 href 속성으로 참조시킨다.
defs 태그는 렌더링이 목적이 아닌 참조를 목적으로 사용할 때 사용된다. 그 때문에 defs안에 있는 태그는 렌더링되지 않는다.
그리고 text태그 내에 특정 글자만 선택할 때는 tspan 태그를 이용할 수 있다.
7. 그라디언트 적용하기
fill 속성에 gradient를 적용하기 위해선 linearGradient라는 태그에 아이디를 선언해 fill에서 참조해야 한다.
linearGradient 안에는 stop태그로 각각의 offset과 color를 설정해준다.
8. 패턴
pattern태그를 통해서 fill을 패턴으로 채울 수 있다. 이 때 내부의 도형을 width와 height의 비율로 동강내서 패턴화시킨다.
예시에서 500px의 선이 가로 하나 세로 하나 있는데, 이것을 width 0.1 width 0.1 비율로 나누었기 때문에 ( 1을 100%로 본다 )
가로 50px 세로 50px인 선이 10개 생기게 된다.
이번에는 원을 그렸다. 이 때, 원이 4분의 1동강이 났는데, 그 이유는
viewBox가 500 500 인데, x축 50 y축 50으로 반지름 50 즉 지름 100의 원을 10개 (0.1, 0.1 비율) 그리다보니 지름 50만큼 짤리게 된 것이다. ( 총 필요한 viewBox는 1000 1000이 된다 . )
9. 마스크
마스크는 mask태그를 이용해서 참조 시킨다. 이 때, g태그를 이용해서 그룹화를 시킨후 참조시킨다.
이 때, 검정 부분을 마스킹하기 때문에 흰 부분은 완전히 보이고 검은 부분은 완전히 보이지 않게 한다.
예제에서는 붉은색 계열을 사용했는데 어두운 양만큼 적용되다보니 저런식으로 흐리게 나오게 된다.
3. 애니메이션 적용
1. Dash Animation
stroke-dashoffset을 통해 선을 그리는 듯한 애니메이션을 적용 할 수 있다.
이 때, stroke-dasharray로 선의 전체 길이로 나누어야 한다. stroke-dasharray 값에 따라 픽셀단위로 나뉘게 된다. 예제에서는 원지름 (50 * 2 * 𝝿 ) 의 크기인 314만큼 적용해주었다.
2. SMIL Animation
위 예제처럼 animate태그를 이용해서 애니메이션을 줄 수 있다. 이를 SMIL ANIMATION이라고 부른다.
해당 주소에서 더 자세한 정보를 알아볼 수 있다.
<svg viewBox="0 0 500 500">
<style>
svg {
background-color: white;
}
</style>
<polygon fill="#FFD41D" points="97.3,0 127.4,60.9 194.6,70.7 145.9,118.1 157.4,185.1 97.3,153.5 37.2,185.1 48.6,118.1 0,70.7
67.2,60.9">
<animate id="animation-to-check" fill="freeze" attributeName="points" dur="500ms" to="110,58.2 147.3,0 192.1,29 141.7,105.1 118.7,139.8 88.8,185.1 46.1,156.5 0,125 23.5,86.6
71.1,116.7"/>
<animate id="animation-to-green" fill="freeze" attributeName="fill" dur="500ms" to="#53B848"></animate>
</polygon>
</svg>
Plain Text
다음 예시는 points와 fill을 애니메이션화 시켰다 이 결과 노란 별모양이 초록색 체크로 바뀌는것을 확인할 수 있다.
<svg viewBox="0 0 500 500">
<style>
svg {
background-color: white;
}
</style>
<rect x="10" y="10" width="20%" height="20%">
<animate attributeName="x" repeatCount="indefinite" dur="1s" values="0; 300; 0;" keyTimes="0; 0.5; 1" fill="freeze" ></animate>
</rect>
</svg>
Plain Text
이번 예시는 alternate 애니메이션을 구현 한 것이다 to 대신 values를 이용하여 매 오프셋마다 동작하는 값을 설정해주었고 keyTimes에 오프셋의 길이를 결정해주었다.