svg 이미지 (폰트어썸)

어제, 폰트어썸에 있는 아이콘을 사용했다.

 

클릭했을 때 자동으로 맨 위로 올라가는

버튼을 만들기 위해서 사용했다.

 

폰트어썸 이미지를 import할 때 svg라는 알파벳?

이 있는데 그냥 알파벳이구나~ 하고 넘겼다.

 

오늘은 div태그에 border: 3px solid red;를 적용하고

그 div태그 사이에 아이콘을 넣었고

아이콘 뒤에는 회색 원형 div가 있었다.

 

그러면 당연히 빨간색 직사각형 안에 아이콘이

위치해야 한다고 생각하는데 빨간색 짧은 선 우측에

버튼이 위치해 있었다......;;

 

그 때 튜터님께서

"왜지? svg 이미지라 그런가??" 라고 하셨다.

 

버튼이 저렇게 위치했던 이유는

버튼을 div로 감싸주지 않아서 였다.

(버튼이 div없이 혼자 있으면

top, right, right, bottom이런 값을 아무리 줘도

움직일 수가 없다고 한다.)

 

궁금한건 해결했지만 궁금한게 생겼다.

도대체 svg가 뭘까??

 

 

SVG

(Scalable Vector Graphics):

scale이 가능한 벡터 이미지

 

특징

1. 아이콘이나 로고 등 웹 문서에 삽입할 때 사용

2. css 스타일을 조절할 수 있음

3. scale이 가능한 벡터 이미지

4. 이미지 크기를 늘리거나 줄여도

화질에 영향을 받지 않음 (.png는 흐려짐)

5. 스타일 수정이 쉬워짐

6. XML 기반 문서

7. 애니메이션이나 CSS3 효과로 적용할 수 있음

 

사용하는 곳

1. 로고 아이콘

2. 차트나 그래프