브라우저에서 SVG 파일 편집하는 방법

SVG(Scalable Vector Graphics)는 이미지를 픽셀이 아니라 도형과 패스, 즉 수학으로 저장합니다. 그래서 SVG로 저장한 로고는 파비콘이든 대형 광고판이든 항상 선명함을 유지하며, 아이콘, 로고, 일러스트에 적합한 형식이 됩니다. 또한 픽셀을 일일이 손대는 대신 파일을 열어 실제 형태 자체를 편집할 수 있다는 뜻이기도 합니다.

SVG 원본을 편집하는 것은 내보낸 PNG를 편집하는 것보다 거의 항상 낫습니다. 앵커 포인트를 옮겨도 곡선은 매끄럽게 유지되고, 칠 색상을 바꿔도 색이 정확하며, 전체를 확대·축소해도 흐려지지 않습니다. 이를 위해서는 벡터를 이해하는 편집기가 필요합니다.

EditItAll 벡터 편집기는 브라우저에서 바로 SVG 파일을 엽니다.

• 편집기를 열고 로고, 아이콘 세트, 일러스트 등 .svg 파일을 불러오세요.
• 선택 도구(V)로 오브젝트 전체를 옮기거나 크기를 바꾸고, 직접 선택 도구(A)로 개별 앵커 포인트를 잡으세요.
• 칠과 선 색상을 바꾸고, 문자 도구(T)로 텍스트를 편집하고, 스마트 가이드와 Illustrator 스타일 단축키로 도형을 정확한 위치에 맞추세요.

작업 내용은 진행하는 대로 브라우저에 자동 저장되며, 로드가 끝난 뒤 오프라인 상태가 되어도 편집기 전체가 계속 작동합니다. 이는 파일이 어디로도 전송되지 않는다는 확실한 증거입니다.

진짜 강력한 기능은 패스를 다시 그리는 데 있습니다. 펜 도구(P)는 베지어 핸들이 달린 앵커 포인트를 배치하므로, 곡선을 다시 그리거나 로고에 포인트를 추가하거나 처음부터 새 형태를 따라 그릴 수 있습니다. 프리핸드로 그릴 때는 연필 도구를 사용합니다.

더 복잡한 작업물을 만들려면 불리언 연산으로 단순한 도형을 조합하세요. 합치기로 도형들을 하나로 융합하고, 앞면 오브젝트 빼기로 한 도형에서 다른 도형을 잘라내고, 교차로 겹치는 부분만 남기고, 제외로 그 부분을 제거합니다. 이 연산은 정확한 연산 기반의 기하 엔진에서 처리되므로, 결과로 나오는 경계선은 픽셀의 일부만큼도 어긋나지 않고 항상 깔끔하게 유지됩니다. 이렇게 몇 개의 사각형과 원이 완성된 아이콘으로 바뀝니다.

작업을 마쳤다면 파일을 계속 편집 가능하게 유지하려고 .svg로 다시 저장하거나, 웹이나 문서용 래스터 이미지가 필요할 때 2× 크기의 PNG를 내보내세요. 이미 SVG가 있고 PNG만 필요하다면, 전용 SVG to PNG 변환기로 한 번에 끝낼 수 있습니다.

솔직히 말하면 두 가지 제약이 있습니다. 편집기는 표준 SVG를 읽을 뿐, Adobe의 .ai나 .eps 파일은 읽지 않습니다. 또한 그러데이션 메시, 패턴 칠, CMYK 색상도 지원하지 않습니다. 그렇지만 일상적인 로고, 아이콘, 일러스트를 SVG로 편집하는 용도라면 필요한 모든 것이 사용자의 기기에서 작동합니다. 벡터 편집기를 열어 시작해 보세요.