SVG 제작하기

png로 제작된 로고 초안

 

우선 회사에서 만들고 있는 솔루션이 있는데, 로고가 다음과 같이 PNG로 제작되어 있다.

 

png to svg로 포팅한 로고

 

png to svg online으로 구글링해보면 원하는 포맷으로 포팅할 수 있는데, 조금 복잡하면 제대로 나오지 않는다.

 

우선 원본 png 로고의 각각의 RGB(HEX) 색상을 확인하는데, 남색의 기준으로 #263971, 주황색은 #f97820이다.

svg의 fill attribute를 통해 각각의 색상으로 채워준다.

 

 

그 이후에는 SVG Path visualizer에서 원하는 그림(문자)의 path를 붙여넣고, 제공된 예제를 확인하며 하나하나 수정한다.

https://svg-path-visualizer.netlify.app/

 

 

넣어서 확인해보면.. 정말 굳이 필요하나 싶은 c(curve)가 정말 많이 들어있는데, 굴곡이 필요없다면 하나 하나 디버깅하며 굳이 필요 없는 것들은 l(Line to)를 이용해 원하는 x,y로 이동시킨다.

 

그리하여 완성된 나머지 로고..

 

수정 작업이 완료된 svg 로고

 

근데 지금 자세히보니 어색해 보이긴한다.

 

참고로.. png to svg를 통해 포팅하게 되면 단조로운 문자인데도 불구하고 정말 쓸데없는 curve들이 많이 들어가 있고, svg path visualizer에서 확인해보면 뒤집어져 있는데.. 애초에 펜을 M(Move) 2818, 1119로 시작하는 것처럼 이상하게 좌표를 찍어준다. 그리고 대충 그려놓고 css의 transform: translate를 이용해 그림을 반대로 뒤집는다.

 

대표님..... 이 글을 보고 계시다면... 있으면 좋을듯한 디자이너 좀...