Windows에서 SVG 파일 열기 및 편집하는 방법

확장 가능한 벡터 그래픽(Scalable Vector Graphics, SVG)은 2D 그래픽, 벡터 일러스트레이션, 차트 등을 표시하는 데 사용되는 웹 친화적인 파일 형식입니다. 이미지처럼 렌더링되지만, 기본적으로는 곡선과 선을 정의하는 XML 코드입니다. Windows에서는 브라우저를 사용하여 SVG 파일을 쉽게 볼 수 있지만, 일반 이미지 편집기를 사용하여 편집할 수는 없습니다. 이 가이드에서는 Windows에서 SVG 파일을 여는 방법과 편집하는 방법을 보여줍니다.

브라우저를 사용하여 SVG 파일 열기

SVG 파일을 브라우저에서 여는 방법은 더블 클릭하거나 선호하는 브라우저로 드래그하는 것입니다.

이는 모든 SVG 파일을 여는 가장 쉬운 방법입니다. 그러나 이 방법으로 이미지를 편집할 수는 없습니다.

파일 탐색기에서 SVG 파일 보기

Microsoft PowerToys에서 SVG 미리보기 기능을 활성화하여 SVG 파일을 열 수 있습니다. 이를 위해 PowerToys를 공식 PowerToys 페이지, Microsoft Store 또는 Windows 패키지 관리자(winget)에서 다운로드하고 설치해야 합니다.

예를 들어, PowerShell에서 Winget 패키지 관리자를 사용하여 PowerToys를 설치할 수 있습니다:

winget install --id Microsoft.PowerToys --source winget

설치 후 시작 메뉴에서 PowerToys를 열 수 있습니다. PowerToys 설정에서 “파일 탐색기 추가 기능”으로 이동하여 미리보기 창 섹션에서 “확장 가능한 벡터 그래픽” 미리보기를 활성화합니다:

SVG 썸네일을 활성화하여 아이콘 보기에서도 볼 수 있습니다:

이제 파일 탐색기를 열고 Alt + P를 눌러 미리보기 창을 활성화하고, SVG 파일을 선택하여 오른쪽에 미리보기를 확인할 수 있습니다.

이 방법으로 추가 소프트웨어 없이 파일 탐색기에서 썸네일과 상세 미리보기를 볼 수 있습니다.

텍스트 편집기를 사용하여 SVG 파일 편집하기

SVG는 주로 XML 파일이므로 텍스트 편집기를 사용하여 쉽게 편집할 수 있습니다. 또한 CSS를 사용하여 SVG 스타일을 다양하게 적용할 수 있으며, 애니메이션도 추가할 수 있습니다. 이는 JPG나 PNG와 같은 일반 이미지 형식으로는 할 수 없는 작업입니다.

SVG 파일을 마우스 오른쪽 버튼으로 클릭하고 다음으로 열기 위에 마우스를 올린 후 Notepad와 같은 편집기를 선택합니다:

텍스트 편집기에서 SVG 파일을 열면 이미지 대신 XML 기반 코드를 볼 수 있습니다.

예를 들어, 주어진 SVG 파일의 채우기 색상을 검은색으로 변경하고 싶다면, fill 속성을 다음과 같이 편집할 수 있습니다:

코드를 텍스트 파일에 저장한 후 파일을 다시 열면 업데이트된 출력을 볼 수 있습니다. 다음과 같은 형태입니다:

텍스트 편집기를 사용하여 SVG 파일을 생성하거나 편집할 수 있지만, 이는 매우 단순한 이미지에 대해서만 잘 작동합니다. 이미지가 복잡할 경우 각 부분을 수동으로 변경하는 것은 너무 어려워집니다.

벡터 편집기를 사용하여 SVG 파일 편집하기

Adobe Illustrator 및 Inkscape와 같은 데스크톱 기반의 현대적인 벡터 편집 도구나 Figma 및 Canva와 같은 온라인 플랫폼에서는 SVG 파일을 열고 편집할 수 있습니다.

예를 들어, Canva의 SVG 편집기를 사용하여 온라인 도구로 SVG 이미지를 쉽게 편집하는 방법을 보여드리겠습니다. 우선, 공식 웹사이트에서 Canva의 SVG 편집기에 액세스한 후 SVG 편집 버튼을 클릭합니다:

파일 업로드 버튼을 클릭하고 편집할 SVG 파일을 선택합니다:

원하는 SVG 파일이 업로드되면 원하는 대로 편집할 수 있습니다. 여기서는 선택한 SVG 파일의 배경과 전경 색상을 변경했습니다.

기본 편집이 필요하다면 Canva의 SVG 편집기를 선택할 수 있습니다. 그러나 복잡한 벡터 그룹이나 경로를 편집하려면 Adobe Illustrator 또는 Inkscape와 같은 고급 도구를 사용하는 것이 좋습니다.

파일을 SVG 형식으로 변환하기 및 그 반대

데스크톱 기반의 이미지 편집 도구나 온라인 이미지 편집 도구를 사용하여 SVG 파일을 다른 형식으로 변환하거나 다른 이미지 형식에서 SVG로 변환할 수 있습니다.

SVG로 변환할 때, 특히 PNG나 JPG에서 전환할 경우, 온라인 도구가 복잡한 비주얼을 처리하는 데 어려움을 겪을 수 있습니다. 래스터 이미지를 벡터 그래픽으로 변환할 때 단순화된 형태나 색상이 누락되는 것을 발견할 수 있습니다.

예를 들어, 다음 PNG 파일을 SVG로 변환하고 싶다고 가정해 보겠습니다:

온라인 편집기인 Convertio를 사용하여 PNG 이미지를 SVG로 변환해 보겠습니다. 이를 위해 변환할 파일을 업로드한 후 원하는 출력 형식을 선택합니다. 마지막으로 변환 버튼을 클릭하여 파일을 선택한 형식으로 변환합니다:

파일이 변환되면 해당 버튼을 클릭하여 다운로드할 수 있습니다:

변환된 파일을 열어 최종 결과를 확인합니다:

출력 결과는 이미지 품질이 상당히 저하되었음을 나타냅니다.

반면에 SVG에서 PNG나 JPG와 같은 형식으로 변환하는 것은 일반적으로 더 정확하며 대부분의 도구에서 잘 작동합니다. 예를 들어, 다음 SVG 이미지를 JPG로 변환하고 싶다고 가정해 보겠습니다:

선택한 SVG 파일을 JPG로 변환하기 위해 convertio를 사용하겠습니다:

이미지를 다운로드하고 결과를 분석하기 위해 열어봅니다. 출력 결과는 SVG를 JPG로 변환해도 이미지 품질에 영향을 미치지 않음을 보여줍니다:

모바일에서 래스터 이미지를 작업해야 하는 경우, Android용 Photoshop을 사용하여 사진을 편집할 수도 있습니다.