PNG → SVG

로고나 아이콘의 외곽을 따서 벡터로 만들어요. 확대해도 안 깨져요.

파일과 입력값은 이 브라우저 밖으로 나가지 않아요.

이미지를 여기에 놓기색이 단순한 로고나 아이콘일수록 깨끗하게 따져요

PNG → SVG 소개

로고나 아이콘 이미지의 외곽선을 따서 벡터 SVG로 바꿔요. 색 개수와 단순화·곡선 단계를 조절해 결과를 다듬고 배경색을 뺄 수도 있어요. 벡터로 만들면 아무리 키워도 계단처럼 깨지지 않아서 인쇄물이나 큰 화면에 그대로 쓸 수 있어요.

픽셀과 벡터의 차이

PNG나 JPEG는 색이 칠해진 점을 격자로 늘어놓은 그림이에요. 그래서 키우면 점이 커지면서 가장자리가 계단처럼 보여요.

SVG는 점이 아니라 "여기서 여기까지 이런 곡선을 그리고 이 색으로 채워라"라는 설명이에요. 얼마나 크게 그릴지는 보는 쪽이 정하니 아무리 키워도 선이 매끈해요.

명함이나 현수막처럼 크게 인쇄할 일이 있는 로고는 벡터로 갖고 있는 편이 안전해요. 원본 벡터 파일이 없을 때 이 도구로 되살릴 수 있어요.

세 가지 조절 항목

색 개수는 결과에 몇 가지 색을 쓸지 정해요. 로고처럼 색이 몇 개 안 되는 그림이라면 실제 색 수에 맞춰 낮게 두세요. 많이 잡으면 비슷한 색이 여러 겹으로 겹쳐 파일이 커져요.

단순화는 외곽선의 점을 얼마나 줄일지 정해요. 올리면 선이 깔끔해지고 파일이 가벼워지지만 너무 올리면 모양이 뭉개져요.

곡선은 외곽을 얼마나 부드럽게 이을지 정해요. 둥근 로고는 올리고, 각진 로고나 글자는 낮게 둬야 모서리가 살아요.

잘 되는 그림과 안 되는 그림

색이 단순하고 경계가 뚜렷한 그림이 가장 깨끗하게 따져요. 로고, 아이콘, 캐릭터 라인아트, 도장 이미지가 여기에 해당해요.

사진은 맞지 않아요. 색이 수천 가지라 경로가 수천 개로 늘어나고, 결과 파일이 원본보다 커지면서 모양도 뭉개져요.

배경이 흰색인 로고라면 배경색 빼기를 켜 보세요. 흰 사각형이 함께 따라오지 않아서 다른 배경 위에 얹기 좋아요.

PNG → SVG 사용 방법

  1. 로고나 아이콘 이미지를 올려요.
  2. 색 개수를 실제 색 수에 가깝게 맞춰요.
  3. 단순화와 곡선 단계를 조절해 결과를 다듬어요.
  4. 배경색이 필요 없으면 빼고, SVG로 저장하거나 코드를 복사해요.

자주 묻는 질문

사진도 벡터로 바꿀 수 있나요?
색이 단순한 로고·아이콘에 알맞아요. 사진은 선이 수천 개로 늘어나 원본보다 커지고 모양도 뭉개져요.
결과가 지저분해요.
단순화를 올리면 선이 깔끔해지고, 내리면 원본에 가까워져요. 색 개수를 줄여 보는 것도 효과가 커요.
각진 로고인데 모서리가 둥글어졌어요.
곡선 단계를 낮춰 주세요. 각진 형태는 곡선을 낮게 둬야 모서리가 살아요.
배경 흰색을 없앨 수 있나요?
배경색 빼기를 켜면 배경이 빠진 SVG가 나와요.
큰 이미지를 올려도 되나요?
따는 과정에서는 크기를 줄여 처리하지만, 저장되는 SVG는 원본 크기 그대로예요.
SVG 코드를 직접 쓸 수 있나요?
네, 코드 복사로 가져가 HTML에 그대로 붙여 넣을 수 있어요.

알아 두면 좋은 점

  • 원본에 없던 디테일을 만들어 내지는 못해요. 흐릿한 이미지는 결과도 흐릿해요.
  • 글자가 든 이미지는 벡터 도형으로 바뀌어요. 편집 가능한 글자로 남지 않아요.