[svg] 개념과 도형의 기본이해하기

xml코드 기반의 확장 가능한 벡터 그래픽 

(점과 점 사이를 연결해서 라인의 길이를 계산해서 자동으로 연결시켜줌)

아이콘, 로고, 그래프, 사용자 인터페이스에 자주 사용된다. 

dom의 일부로써 각 객체별로 html 에서 엘리먼트로 추가됨

 

 

특징

• 벡터기반이기 때문에 이미지의 크기에 상관없이 선명하게 유지됨
• 모양이 복잡하지 않은 경우에는 용량도 작다.
• css나 스크립트도 다양하게 조작이 가능하다.
• 아이콘, 로고, 그래프, 사용자 인터페이스 등에서 사용

 

단점

• 선 하나하나가 데이터로 표현되기 때문에 복잡하고 개체수가 많을수록 용량이 증가하여 효율성이 떨어진다. (아이템이나 로고정도에만 사용하는 이유다)
• 그래픽요소이기때문에 fill 색이 그라데이션이 들어간 svg는 이미지가 깨진다

 

사용방법

• 태그상에 백그라운드 이미지로 연동 (이미지화 연동)
• 이미지 태그 안에 연동 (이미지화 연동)
• svg 소스 그대로 붙여넣기 (변형가능)
• object를 활용해 넣기 (변형가능)  

 

 

svg는 솔직히 실무에서 퍼블리셔나 실무자들이 코드를 직접 만들어서 사용하지 않는다. 워낙 디자인툴이 많이 발달하기도 했고 svg를 쉽게 제작할 수 있는 여러가지 툴이 많이 나와있어서 직접 코드를 짤 필요는 많이 없다. 하지만 실무적으로 부딧히는 여러가지 문제들을 해결할때 path의 기본요소들의 대한 지식을 요구하는 경우가 종종있다. 

과거에도 svg 요소를 다루는 일이 어려워서 네이버 블로그에 올려놓았지만 그럼에도 어려운 것 같다...

path 요소들이나 기본 도형을 만드는건 해당 블로그 참고하기!

 

 

[코딩] svg 개념과 도형의 기본이해