SVG 태그 정의, 사용법, 예제들

HTML과 CSS로 클론코딩을 해오면서 SVG 태그를 쓴적이 없었다.

 

이미지를 가져올때 PNG를 사용했었고, 아이콘을 따올때는 font awesome이나 구글폰트에

 

들어가 아이콘을 따왔다. 하지만 점차 svg태그를 많이 사용하는 것을 보았고,

 

이에 대해 대강만 듣고 넘어갔다.  sgv 태그가 점점 중요하게 쓰이는것을 느꼈고 이에 대해

 

자세히 알아보고기로 하였다. 우선 svg 태그의 정의는 이렇게 나와있다.

 

• SVG stands for Scalable Vector Graphics and is used to define graphics for the Web

즉 내부에 원 삼각형 사각형 등 그래픽을 담을 수 있는 그릇 같은 역할을 한다.

 

PNG => pixel 단위로 구성되며 비트맵 방식이다.

SVG => 수학 기반(Vector Image)으로, 직선 곡선 같은 형태로 구성되는 방식

 

SVG는 인터넷 익스플로8 이하로는 지원되지 않았기에 PNG에 비해 다소 생소해보인다.

 

SVG는 HTML,CSS,JAVASCRIPT와 함께 동작할 수 있기에 수정 추가 애니메이션 등

 

원하는 작업을 수행할 수 있으며 이미지가 깨지지 않는다.

 

하지만 SVG는 수학적 계산 능력이 필요하고 복잡한 도형일 경우 속도가 저하될 수

 

있기 때문에 단순화된 이미지에 사용되는 것이 일반적이다. 

 

PNG vs SVG