SVG를 PNG로 변환 Scalable Vector Graphics ↔ Portable Network Graphics 무료 온라인 안전

SVG를 PNG로 변환하는 이유

SVG는 그림이 아닙니다. 그림을 그리는 방법을 적은 지시문의 모음입니다. 여기에 원을 그리고, 저기에 곡선을 긋고, 이 도형을 저 색으로 채우고, 이 글자를 이 글꼴로 쓰라는 식입니다. 픽셀이 아니라 지시문이기 때문에 SVG는 어떤 크기로 보여 주어도 흐려지지 않으며, 그래서 로고, 아이콘, 차트, 일러스트에 가장 사랑받는 형식입니다. 그런데 의외로 많은 소프트웨어가 이 지시문을 따를 줄 모릅니다. 이메일 프로그램, 소셜 네트워크, 많은 업로드 양식, 프레젠테이션 도구, 오래된 편집기는 픽셀로 이루어진 그림을 원합니다. 그래서 사람들은 SVG를 PNG로 변환합니다. 그림은 있는데 어디서나 받아 주는 형태가 필요한 것입니다.

PNG는 이 일에 자연스러운 선택입니다. 그려진 그대로 모든 픽셀을 정확히 보존하고 투명도도 유지하므로, 배경이 없는 로고는 배경 없는 로고로 남습니다. 모든 브라우저, 편집기, 오피스 프로그램, 휴대폰이 이해합니다. 대부분 단색 면과 날카로운 가장자리로 이루어진 SVG라면 PNG가 그것을 충실하게 재현하는 형식입니다.

이 페이지는 브라우저 안에서 SVG를 PNG로 변환합니다. 파일 속의 지시문을 고른 크기로 한 번 따라 그리고, 그 결과를 PNG로 저장합니다. 그림은 파일 안의 어떤 것도 실행될 수 없는 샌드박스에서 렌더링되며 아무것도 업로드되지 않습니다. 아래에서는 작동 방식, 유지되는 것, 하나의 중요한 한계, 그리고 크기를 고르는 방법을 설명합니다.

변환이 작동하는 방식

지시문을 한 번 따라 그립니다

SVG는 브라우저 안에서 열리고, 브라우저는 SVG에 대해 언제나 하던 대로 그리기 지시문을 따라 결과를 칠합니다. 그렇게 칠해진 것을 선택한 크기의 그림으로 캡처해 PNG로 저장합니다. 이 과정은 기기에서 이루어지므로 기다릴 것도, 나중에 지울 것도 없습니다.

아무것도 실행될 수 없는 샌드박스

SVG 파일에는 원칙적으로 스크립트와 다른 것에 대한 참조가 들어 있을 수 있습니다. 이것이 위험 요소가 되지 않도록, 그림은 파일 안의 어떤 것도 실행될 수 없는 샌드박스에서 렌더링됩니다. 도형만 칠해집니다. 출처를 완전히 믿기 어려운 곳에서 내려받은 파일이라도 안전합니다.

크기는 직접 고릅니다

SVG에는 고유한 픽셀이 없으므로 PNG가 몇 픽셀이 될지는 여러분이 정합니다. 너비를 고르면 높이는 작품의 비율에 따라 정해집니다. 크기가 클수록 그림은 더 선명해지고 파일은 더 무거워집니다.

유지되는 것

모든 도형이 그려진 그대로

모든 도형이 그려진 그대로 유지됩니다. 곡선, 채우기, 선, 겹침의 순서까지 그렇습니다. PNG는 브라우저에서 SVG가 보이는 모습을 충실하게 담은 그림입니다.

작품 본래의 비율

그림의 비율이 유지되므로 늘어나거나 찌그러지지 않습니다. SVG의 가로가 세로의 두 배라면 PNG도 그렇습니다.

투명도

투명도가 유지됩니다. 채우기가 없는 SVG의 영역은 PNG에서도 비쳐 보이는 채로 남으며, 색이 있는 배경 위에 놓을 로고나 아이콘에 꼭 필요한 성질입니다.

SVG를 PNG로 변환하기 전에 알아 둘 점

PNG는 영원히 한 가지 크기입니다

PNG는 영원히 한 가지 크기이며, SVG는 그렇지 않았습니다. 이것이 이 페이지에서 가장 중요한 내용입니다. 작은 크기를 골랐다가 나중에 큰 것이 필요해지면, PNG를 확대할 때 흐려집니다. 그러니 앞으로 필요할 가장 큰 크기를 고르십시오. 큰 그림을 작게 만드는 것이 그 반대보다 훨씬 쉬우며, 나중을 위해 SVG는 언제든 보관해 둘 수 있습니다.

다른 곳의 글꼴과 이미지는 불러와지지 않습니다

SVG가 다른 곳에서 가져오는 글꼴과 이미지는 그림이 그려지는 샌드박스 안에서 불러와지지 않습니다. 그림 속 글자가 파일이 서버에서 불러오는 웹 글꼴로 지정되어 있다면 PNG에서는 시스템 글꼴로 대체되고 글자의 모양이 달라집니다. SVG가 파일 바깥에 저장된 그림을 참조하고 있다면 그 그림은 빠지게 됩니다. 가장 좋은 결과를 얻으려면 글꼴이 윤곽선으로 변환되고 그림이 삽입된 SVG를 사용하십시오.

파일 크기는 그림에 따라 달라집니다

단순한 로고는 아주 작은 PNG가 됩니다. 정교한 일러스트를 큰 크기로 만들면 무거운 PNG가 됩니다. 결과가 목적에 비해 너무 크다면 크기를 줄이거나 PNG 압축을 거치십시오.

여기서 SVG를 PNG로 변환하는 방법

그림 추가

SVG를 페이지에 끌어다 놓거나 기기에서 선택하십시오. 파일은 브라우저 안에서 읽히며 업로드되지 않습니다.

크기 고르기

PNG의 너비를 고르십시오. 그림이 쓰일 가장 큰 자리를 생각하고 그 크기를 고르십시오.

변환하고 내려받기

버튼을 누르고 PNG를 내려받으십시오. 열어서 가장자리와 글자를 살펴보고, 투명한 부분이 여전히 비쳐 보이는지 확인하십시오.

SVG와 PNG를 자세히 살펴보면

벡터와 래스터

SVG는 벡터 형식입니다. 도형과 그것을 그리는 규칙을 저장합니다. PNG는 래스터 형식입니다. 색이 있는 점들의 격자를 저장합니다. 벡터는 도형을 매번 다시 그리기 때문에 어떤 크기로도 조절할 수 있습니다. 래스터는 점의 수가 정해져 있어서 확대하면 점이 커질 뿐입니다. SVG를 PNG로 변환한다는 것은 규칙에서 고정된 격자로 넘어가는 일이며, 어떤 격자로 할지는 여러분이 정합니다.

JPG가 아니라 PNG인 이유

그림에는 거의 언제나 PNG가 더 나은 답입니다. 날카로운 가장자리를 깨끗하게 유지하고 투명도도 유지합니다. JPG는 단색 면과 가장자리를 뭉개고 투명도가 없습니다. JPG만 받는 곳이라면 SVG를 JPG로 변환을 쓰고, 그렇지 않다면 PNG를 고수하십시오.

해상도와 화면

요즘 화면은 예전 화면보다 두 배나 세 배의 밀도로 그림을 보여 주는 경우가 많습니다. PNG가 이런 화면의 페이지에서 어떤 크기로 나타날 것이라면, 그 크기의 두 배 너비로 만드십시오. 그러면 또렷하게 보입니다.

자주 있는 상황 자세히 보기

이메일과 소셜 네트워크용 로고

많은 이메일 프로그램과 소셜 플랫폼은 SVG를 받지 않습니다. 요구하는 크기로 SVG를 PNG로 변환하면 로고가 투명한 배경 그대로 통과합니다.

문서와 프레젠테이션용 그림

오피스 프로그램마다 SVG를 얼마나 잘 다루는지 다릅니다. PNG는 언제나 작동합니다. 그림을 프로젝터로 보여 줄 것이라면 큰 화면에서도 선명하도록 넉넉한 크기를 고르십시오.

앱과 사이트용 아이콘

SVG로 그린 아이콘 세트는 벡터를 읽지 못하는 곳을 위해 PNG 버전이 필요한 경우가 많습니다. 필요한 크기로 만들고, SVG는 원본으로 보관하십시오.

차트와 도표

차트를 SVG로 내보내는 도구는 일부 시스템이 거부하는 파일을 남깁니다. 차트의 PNG는 보고서, 웹 페이지, 메시지에 번거로움 없이 넣을 수 있습니다.

SVG를 PNG로 변환하기 전의 실용적인 조언

브라우저에서 SVG가 어떻게 보이는지 확인

먼저 브라우저에서 SVG를 열어 보십시오. 거기서 보이는 것이 PNG에 나타날 모습입니다. 글자가 시스템에 없는 글꼴을 쓰고 있다면 PNG에서도 같은 대체가 일어난다고 예상하십시오.

정확도를 위해 글자를 윤곽선으로

글자 모양이 정확해야 한다면 SVG를 저장하기 전에 그림 프로그램에서 글자를 윤곽선으로 변환하십시오. 그러면 글자가 도형이 되어 그리는 데 글꼴이 필요 없습니다.

그림을 삽입

SVG에 그림이 들어 있다면 링크로 연결하지 말고 파일 안에 삽입하십시오. 연결된 그림은 샌드박스가 찾을 수 없습니다.

앞날을 생각하며 크기 고르기

그림이 다른 어디에 쓰일 수 있을지 생각해 보십시오. 포스터에 충분한 크기는 웹 페이지에도 괜찮습니다. 아주 작은 아이콘에 맞춘 크기는 다른 어디에서도 쓸모가 없습니다.

변환 전에 사람들이 묻는 질문

어떤 크기를 골라야 하나요?

필요할 가장 큰 크기입니다. PNG는 언제든 줄일 수 있지만, 흐려지지 않게 키울 수는 없습니다.

투명도는 유지되나요?

네. SVG에서 비쳐 보이던 배경은 PNG에서도 비쳐 보입니다.

글자 모양이 왜 달라 보이나요?

글꼴이 다른 곳에서 불러오는 것이어서 샌드박스에서 불러와지지 않았기 때문입니다. 시스템 글꼴이 그 자리를 대신했습니다. 이를 피하려면 원본에서 글자를 윤곽선으로 변환하십시오.

연결된 그림이 왜 빠지나요?

파일 바깥에서 가져오는 그림은 불러와지지 않습니다. SVG 안에 삽입하십시오.

제 파일이 업로드되나요?

아니요. 변환은 브라우저에서 실행되며 파일은 기기를 떠나지 않습니다.

다시 벡터로 되돌릴 수 있나요?

따라 그리는 방법뿐입니다. PNG를 SVG로 변환은 그림을 도형으로 바꿔 주지만 복원이 아니라 추정입니다. 원래의 SVG를 보관하십시오.

SVG를 PNG로 변환할 때 현명하게 고르기

용도를 먼저 정하기

웹 페이지에는 적당한 크기가 필요합니다. 인쇄에는 큰 크기가 필요합니다. 아이콘에는 작고 단순한 것이 필요합니다. PNG를 쓰일 자리에 맞추십시오.

다른 선택지와 비교하기

파비콘에는 SVG를 ICO로 변환이 여러 크기를 하나에 담은 파일을 만들어 줍니다. 어떤 배율에서도 선명하게 유지되는 문서에는 SVG를 PDF로 변환이 그림을 그림으로 보존합니다.

SVG는 보관하기

SVG가 원본입니다. 필요할 때 언제든 어떤 크기, 어떤 형식으로도 바꿀 수 있습니다. 안전하게 보관하십시오.

변환 후 좋은 결과를 얻으려면

가장자리 확인

곡선과 대각선을 확대해 보십시오. 매끄러워야 합니다. 들쭉날쭉하다면 용도에 비해 크기가 너무 작았다는 뜻이며, 더 큰 크기가 도움이 됩니다.

색이 있는 배경에서 확인

PNG를 실제로 나타날 색 위에 놓아 보십시오. 원본에 부드러운 그림자가 있었다면 투명한 가장자리에 희미한 테두리가 드러날 수 있으며, 지금 발견하는 편이 낫습니다.

필요하면 가볍게

파일이 무겁다면 PNG 압축이 겉모습을 눈에 띄게 바꾸지 않고 무게를 줄여 줍니다.

SVG를 PNG로 변환할 때 최대한 활용하기

SVG를 PNG로 변환하기 전에 SVG를 준비하십시오

원본에 몇 분만 정성을 들이면 나중에 많은 수고를 덜 수 있습니다. 그림에 올바른 크기나 뷰 박스가 있는지 확인하고, 글자를 윤곽선으로 바꾸고, 그림을 삽입하고, 보이기를 원치 않는 숨은 레이어를 지우십시오. 깨끗한 SVG는 깨끗한 PNG가 되며, 변환을 두 번 할 필요가 없습니다.

한 번에 여러 크기 만들기

로고가 서로 다른 몇 가지 너비로 필요하다면 각각에 대해 SVG를 PNG로 한 번씩 변환하고 파일 이름에 너비를 붙이십시오. 바닥글용 작은 것, 페이지용 중간 것, 인쇄용 큰 것이면 대부분의 필요를 채우며, 미리 준비해 두면 요청이 올 때마다 다시 돌아올 일이 없습니다.

배경을 생각하기

PNG는 투명도를 유지하므로 로고는 뒤에 있는 색을 띠게 됩니다. 어두운 페이지 위의 어두운 로고는 사라집니다. PNG를 밝은 배경과 어두운 배경 양쪽에서 확인하고, 로고가 각각에 맞는 버전이 필요하다면 색이 다른 SVG를 두 개 만들어 둘 다 SVG를 PNG로 변환하십시오.

의미 있는 이름 쓰기

그림이 무엇이고 얼마나 큰지 알려 주는 이름을 쓰십시오. 예를 들어 logo-1600처럼 말입니다. 한 해 뒤에 그림이 가득한 폴더에서 그 파일을 찾았을 때 어떤 것인지 바로 알 수 있습니다.

개인정보 보호와 취급

그림에 로컬 변환이 중요한 이유

로고, 도면, 디자인은 공개되기 전까지 기밀일 수 있습니다. 많은 온라인 변환기는 파일을 서버에 올려 처리한 뒤 결과를 돌려보내고, 한동안 사본이 여러분이 통제하지 못하는 기계에 남습니다. 여기서는 여러분의 브라우저가 작업하므로 그림은 기기에 머뭅니다.

페이지를 떠나면

페이지를 닫으면 변환된 그림이 브라우저에서 사라지므로 먼저 내려받으십시오. 그림에 관한 어떤 것도 남지 않습니다.

문제가 생겼을 때

그림이 빈 채로 나올 때

SVG에 크기나 뷰 박스가 없을 수 있습니다. 텍스트 편집기로 열어 너비와 높이 또는 뷰 박스가 있는지 확인하거나 그림 프로그램에서 고치십시오.

그림이 잘릴 때

일부 SVG에는 선언된 영역 바깥으로 뻗은 요소가 있습니다. 모든 것이 들어가도록 원본의 뷰 박스를 조정하십시오.

아주 큰 크기에서 페이지가 멈출 때

모든 것이 기기에서 실행되며 엄청나게 큰 그림은 메모리를 필요로 합니다. 더 작은 크기를 고르거나 더 성능이 좋은 컴퓨터를 쓰십시오.

관련 도구

같은 계열의 도구가 인접한 작업을 모두 다룹니다. JPG에는 SVG를 JPG로 변환을 쓰십시오. 파비콘이나 앱 아이콘에는 SVG를 ICO로 변환이 답이고, 어떤 배율에서도 선명하게 유지되는 문서에는 SVG를 PDF로 변환이 답입니다. 그림을 따라 그려 도형으로 바꾸려면 PNG를 SVG로 변환이 반대 방향으로 갑니다. PNG를 얻은 뒤에는 PNG를 WebP로 변환이 웹용으로 더 가볍게 만들어 주고, 투명도가 필요 없을 때는 PNG를 JPG로 변환이 작은 파일을 만들어 줍니다.

실제 사용 예

회사 로고가 SVG로 있는데, 어떤 소셜 네트워크가 너비 800픽셀 이상의 PNG만 받는다고 해 봅시다. 여기에 SVG를 끌어다 놓고, 넉넉하게 너비 1600픽셀을 고른 다음 버튼을 누릅니다. 잠시 뒤 같은 비율에 또렷한 가장자리와 투명한 배경을 가진 PNG를 내려받습니다. 업로드하면 로고가 어떤 색 위에서도 깔끔하게 보입니다. SVG는 원본으로 폴더에 남습니다.

간단한 점검표

변환 전

브라우저에서 SVG를 열어 보십시오. 필요한 가장 큰 크기를 정하십시오. 글꼴이 윤곽선으로 바뀌고 그림이 삽입되었는지 확인하십시오.

변환 중

파일이 준비될 때까지 페이지에 머무르십시오.

변환 후

PNG를 열어 가장자리와 글자를 확인하고, 실제 배경에서 시험해 보고, SVG는 보관하십시오.

흔한 실수

너무 작은 크기를 고르는 것

PNG는 영원히 한 가지 크기입니다. 나중에 확대하면 흐려집니다. 넉넉하게 고르십시오.

연결된 글꼴과 그림에 의존하는 것

샌드박스에서는 불러와지지 않습니다. 글자를 윤곽선으로 바꾸고 그림을 삽입하십시오.

SVG를 버리는 것

보관하십시오. 한계 없이 크기를 조절할 수 있는 유일한 버전입니다.

그림은 기기에 머뭅니다

변환은 로컬에서 이루어집니다. 그림은 여러분의 브라우저가 읽고, 그곳에서 칠하고, PNG로 돌려줍니다. 아무것도 업로드되지 않으므로 서버에 사본이 남지 않고 다른 누구도 볼 수 없습니다. 공개되지 않은 디자인이라면 이것이 SVG를 PNG로 변환하는 안전한 방법입니다.

요약

여기서 SVG를 PNG로 변환하려면 그림을 끌어다 놓고, 크기를 고르고, 버튼을 누르십시오. SVG는 그림이 아니라 그림을 그리는 지시문이며, 여기서는 그 지시문을 고른 크기로 한 번 따라 그린 뒤 결과를 PNG로 저장합니다. 그림은 파일 안의 어떤 것도 실행될 수 없는 샌드박스에서 렌더링되며 아무것도 업로드되지 않습니다. 모든 도형이 그려진 그대로, 작품 본래의 비율과 투명도와 함께 유지됩니다. PNG는 영원히 한 가지 크기이므로 필요할 가장 큰 크기를 고르십시오. 나중에 확대하면 흐려지기 때문입니다. SVG가 다른 곳에서 가져오는 글꼴과 이미지는 불러와지지 않으므로, 웹 글꼴로 지정된 글자는 시스템 글꼴로 대체됩니다.