10 svg

1. 개요

[SVG 예제사이트] [SVG 한글 예제사이트]

SVG(Scalable Vector Graphics) 는 웹용 벡터방식 이미지 포멧입니다.

다양한 해상도에 대응하는 웹서비스 제작시 용이하게 사용할수 있습니다.

2. 예제

2.1. viewbox

viebox 는 일러스트레이터의 아트보드와 유사합니다

[미리보기]

1
<svg width="50" height="50" viewBox="0 0 100 100">
2
  <circle cx="50" cy="50" r="25" fill="red" />
3
</svg>
4
<svg width="100" height="100" viewBox="0 0 100 100">
5
  <circle cx="50" cy="50" r="25" fill="red" />
6
</svg>
7
<svg width="100" height="100" viewBox="0 0 50 50">
8
  <circle cx="50" cy="50" r="25" fill="red" />
9
</svg>

width , height 는 svg 요소의 크기입니다
viewbox 는 svg 요소의 프레임이며 속성값은 프레임의 좌표를 의미합니다.
같은 크기의 svg 이미지라도 프레임의 크기에 따라 다르게 보이기도 합니다.

2.2. svg 삽입하기

[미리보기]

svg이미지를 html 에 삽입하는 3가지 방법을 알아봅시다.

1
<img src="images/twitter_logo_original.svg" alt="" />
2
<div class="svg"></div>
3
<object type="image/svg+xml" data="images/twitter_logo_original.svg"></object>

1
.svg {
2
  width: 300px;
3
  height: 300px;
4
  background: url(images/twitter_logo_original.svg) no-repeat;
5
}

2.3. 자바스크립트 이벤트 넣기

[미리보기]

1
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
2
<rect width="32" height="32" fill="#D9D9D9"/>
3
<script>
4
document.querySelector('rect').onclick=function(){
5
  this.setAttribute('fill','red');
6
}
7
</script>
8
</svg>

2.4. text path 애니메이션

회전하는 글씨를 만들어보자

Step 1
STEP 2

2.5. 마퀴텍스트

특정영역안에서 흐르는 텍스트애니메이트를 만들어보자

실행화면

Step 1