온라인에서 SVG 편집하기: 소프트웨어 설치 없이 색 변경과 배경 제거

1. 온라인 SVG 편집기로 할 수 있는 일

SVG를 편집하려고 하면 일단 Illustrator를 설치해야 한다고 생각하기 쉽지만, 색 변경이나 배경 제거, 요소 삭제 같은 가벼운 작업이라면 온라인 편집기로 충분합니다. PolySVG 온라인 SVG 편집기는 브라우저에서 동작하고 무료이며 설치나 가입이 필요 없습니다. 경로 단위 작업을 지원합니다. 클릭으로 삭제, 한 번의 클릭 배경 제거, 브러시로 칠하기, 마스크로 지우기, 색 변경, 실행 취소와 다시 실행, 그리고 SVG나 PNG 내보내기까지 할 수 있습니다. SVG를 직접 올릴 수도 있고 이미지 → SVG 도구에서 변환 결과를 한 번에 가져올 수도 있습니다. 디자이너에게는 납품 전 마지막 정리에 좋은 방법이고, 개발자에게는 디자인 도구를 오갈 필요 없이 페이지에 넣기 전에 아이콘의 색과 크기를 빠르게 조정할 수 있는 방법입니다.

2. 색 변경: 아이콘에 새로운 테마 색 입히기

캔버스의 색 블록을 클릭해 해당 경로를 선택한 다음 색상 패널에서 채우기 색을 바꿉니다. 전형적인 경우는 아이콘 세트를 라이트 테마와 다크 테마 사이에서 전환하거나, 벡터화한 로고를 브랜드 색으로 보정하거나, 서로 다른 출처의 자산들 사이에서 팔레트를 통일하는 것입니다. 코드에서 fill 속성을 찾아 헤매는 것과 비교하면 클릭으로 색을 바꾸는 방식은 훨씬 직관적이고 다른 경로를 망가뜨릴 위험도 훨씬 적습니다.

3. 배경 제거: 자동 제거와 수동 정리의 조합

“한 번의 클릭 배경 제거”를 누르면 엔진이 테두리의 주된 색을 감지해 배경 레이어를 제거하므로 흰 배경 SVG가 몇 초 만에 투명해집니다. 남은 배경 경로는 마우스로 선택해 지우면 됩니다. 아직 비트맵만 있다면 이미지 → 투명 벡터 도구로 한 번에 변환과 배경 제거를 마친 뒤 편집기에서 마저 정리하세요.

4. 브러시와 지우개: 칠하기와 지우기

브러시는 덧그리는 도구입니다. 빠진 획을 칠하면 획이 자동으로 새 경로로 벡터화되어 원래 그림에 자연스럽게 어울립니다. 벡터화한 로고의 끊어진 획을 복구하는 데 최적입니다. 지우개는 빼는 도구입니다. 원래 경로 데이터를 망가뜨리지 않고 마스크로 영역을 숨기며, 너무 많이 지웠다면 실행 취소할 수 있습니다. 둘 다 실행 취소와 다시 실행을 함께 지원하니 자유롭게 시도해 보세요. 브러시 획은 독립된 경로로 파일에 추가되어 나중에 클릭해 색을 바꿀 수 있고, 지우개의 마스크 효과는 내보낼 때 적용되어 내보낸 SVG가 캔버스에 보이는 모습과 일치합니다.

5. 실행 취소, 다시 실행, 내보내기

편집기는 작업의 전체 기록을 유지합니다. 실수를 실행 취소하고 마음이 바뀌면 다시 실행하세요. 작업이 끝나면 웹이나 추가 편집용으로 SVG 내보내기, 문서에 넣거나 미리보기로 쓸 PNG 내보내기를 선택합니다. SVG 파일을 열고 보는 방법은 SVG 파일 여는 방법을 참고하세요. 편집기의 직접 링크는 /editor입니다. PNG로 내보낼 때는 문서에서 선명하게 보일 만큼 해상도를 높이고, 웹에는 벡터 특성을 유지하도록 SVG로 내보내세요.

6. 자주 하는 편집 작업 요약

• 테마에 맞게 아이콘 색 바꾸기: 경로를 클릭해 채우기 색을 바꾼 뒤 라이트 테마용과 다크 테마용을 각각 내보내세요;
• 흰 배경 자산을 투명하게 만들기: 한 번의 클릭 배경 제거, 남은 경로 삭제, 투명 SVG 내보내기;
• 로고의 끊어진 획 복구하기: 빈틈을 브러시로 따라 그리면 획이 자동으로 벡터화되고, 이후 색을 통일해 보세요;
• 필요 없는 요소 삭제하기: 필요 없는 색 블록을 하나씩 클릭해 지우고, 테두리 세밀한 부분은 지우개를 사용하세요;
• 문서에 넣을 이미지: 편집이 끝나면 PNG를 내보내 Word, PowerPoint나 채팅 창에 넣으세요.