SVG는 이미지를 다음과 같이 저장합니다. 수학적 모양 흐릿함 없이 어떤 크기로든 확장되는 반면 PNG는 고정된 픽셀 격자를 저장합니다. 이 단 하나의 차이가 선택을 결정합니다. 로고, 아이콘, 확장이 필요한 평면 그래픽에는 SVG를, 사진과 복잡한 디테일에는 PNG를 사용합니다. SVG(Scalable Vector Graphics)는 2001년 W3C에서 표준화한 XML 기반 형식입니다. PNG(Portable Network Graphics)는 1996년의 래스터 형식입니다. 이 비교에서는 벡터와 래스터, 각각이 크기 조정 및 파일 크기를 처리하는 방법, 투명도, 편집, 브라우저 지원 및 사용 위치에 대한 명확한 규칙을 설명합니다.

두 형식 모두 서로 다른 문제를 해결하기 때문에 전체적으로 더 나은 것은 아닙니다. SVG는 다양한 크기로 나타나는 그래픽에 있어 탁월한 성능을 발휘합니다. PNG는 사진과 상세한 이미지를 위한 유일한 합리적인 선택입니다. 귀하의 이미지가 어떤 계열에 속하는지 알면 변환기를 열기 전에 질문에 대한 답을 얻을 수 있습니다.

벡터 대 래스터

두 가지 형식은 이미지를 반대 방식으로 설명합니다. SVG에는 여기에 원을 그리거나 이 경로를 해당 색상으로 채우는 등의 지침이 나열되어 있어 브라우저는 어떤 크기에서도 해당 경로를 새롭게 렌더링합니다. PNG는 실제 색상을 저장합니다. 모든 픽셀 모자이크처럼 그리드에 표시됩니다. 벡터는 가장자리가 깨끗한 모양에 적합합니다. 래스터는 수백만 개의 고유 픽셀로 설명할 모양이 없는 사진에 적합합니다. 이것이 그들 사이의 모든 실질적인 차이의 근원입니다.

비유가 도움이 됩니다. 벡터는 레시피입니다. 어떤 규모로든 이를 따르면 동일한 요리를 얻을 수 있습니다. 래스터는 완성된 접시의 사진입니다. 확대하면 더 크고 흐릿한 픽셀이 보입니다. 레시피는 어떤 크기에서도 완벽하게 유지됩니다. 사진은 그렇지 않습니다.

확장: SVG 승리

스케일링은 SVG의 결정적인 장점입니다. SVG 로고는 그대로 유지됩니다. 16픽셀 파비콘부터 광고판까지 매우 정교합니다., 수학은 각 크기에서 다시 계산되기 때문입니다. PNG는 해상도 이상으로 확대하는 순간 흐려집니다. 소프트웨어는 캡처되지 않은 픽셀을 생성해야 하기 때문입니다. 여러 크기로 표시되는 모든 항목의 경우 SVG는 PNG가 다양한 해상도로 여러 내보내기가 필요한 하나의 파일을 제공합니다.

이것은 들리는 것보다 더 중요합니다. 최신 화면은 소형 휴대폰부터 대형 4K 모니터까지 다양하며 디자인은 모든 화면에서 선명하게 보여야 합니다. SVG는 단일 파일의 모든 화면을 처리합니다. PNG에는 작은 버전, 큰 버전이 필요하며 관리하는 자산이 늘어나는 Retina 버전도 필요합니다.

파일 크기

파일 크기는 크기가 아닌 복잡성에 따라 달라지며 이는 PNG와 반대입니다. SVG와 같은 단순한 2색 로고의 무게 몇 킬로바이트 어떤 규모에서도 해당 크기를 유지하며, 종종 PNG보다 작습니다. 그러나 SVG 크기는 모양 수에 따라 커지므로 추적된 사진은 PNG보다 몇 배 더 커지고 렌더링 속도가 느려집니다. PNG 크기는 픽셀 수에 따라 커지므로 큰 사진은 어찌됐든 무거워집니다.

교훈은 형식을 내용에 맞추는 것입니다. 플랫 아이콘의 경우 SVG는 더 작고 무한히 확장 가능합니다. 상세한 사진의 경우 SVG는 수천 개의 경로로 확장되고 PNG는 예측 가능한 크기를 유지합니다. 형식 이름이 아닌 복잡성이 무게를 결정합니다.

투명성

두 형식 모두 투명성을 지원하므로 여기서는 둘 다 승리하지 못합니다. SVG는 도형 뒤에 채우기가 없을 수 있고 PNG는 풀 알파 채널 부드럽고 부분적인 투명성을 위해. 로고는 어떤 형식에서든 어떤 배경에서도 투명하게 유지됩니다. 차이점은 SVG의 투명도는 모양 설명의 일부인 반면 PNG는 모든 픽셀에 대한 불투명도 값을 저장한다는 것입니다.

편집 및 유연성

편집에서는 그래픽용 SVG를 선호합니다. SVG는 모양을 설명하는 텍스트이기 때문에 해당 경로는 CSS로 다시 색칠하고 애니메이션 적용, 내부 텍스트는 스크린 리더가 읽을 수 있고 검색 엔진이 색인을 생성할 수 있는 실제 텍스트로 유지됩니다. PNG는 고정 픽셀이므로 색상을 변경한다는 것은 소스에서 다시 내보내는 것을 의미합니다. 스타일을 변경하거나 테마를 지정하거나 애니메이션을 적용할 로고의 경우 SVG가 훨씬 더 유연합니다.

브라우저 지원

지원은 두 가지 모두에 대해 보편적이므로 선택을 결정하지 않습니다. 모든 브라우저는 플러그인 없이 SVG와 PNG를 읽으며 둘 다 수년 동안 사용되었습니다. 실질적인 차이점은 컨텍스트입니다. SVG는 웹 페이지 및 앱 인터페이스에 속하지만 PNG는 SVG를 허용하지 않는 이메일, 문서 및 이전 소프트웨어에서도 작동합니다. 웹사이트의 경우 둘 중 하나가 안전합니다. 이메일 로고의 경우 PNG가 더 신뢰할 수 있는 선택입니다.

각각을 사용하는 경우

규칙은 간단하며 기억할 가치가 있습니다.

SVG 사용 크기를 조정하고 선명하게 유지해야 하는 로고, 아이콘, 차트, 다이어그램 및 라인 아트의 경우.
PNG 사용 스크린샷, 상세한 그래픽, 부드러운 가장자리나 다양한 색상이 포함된 이미지에 적합합니다.
사진에는 둘 다 사용하지 않음 장기적으로 JPG 또는 WebP는 PNG보다 훨씬 작은 사진을 압축합니다.

브랜드 자산에 대한 마스터 벡터 파일을 유지하고 이메일이나 일부 앱 업로드와 같이 SVG가 허용되지 않는 경우 PNG 복사본을 내보냅니다.

SVG 및 반응형 디자인

반응형 디자인은 SVG가 그 가치를 유지하는 곳입니다. 최신 사이트는 휴대폰, 노트북, 4K 모니터에서 선명하게 보여야 하며 SVG는 다음 세 가지를 모두 처리합니다. 모든 픽셀 밀도의 하나의 파일. 별도의 소형, 대형 및 레티나 내보내기가 필요하지 않으며 브라우저가 고해상도 화면에 맞게 이미지 크기를 확대할 때 흐림 현상도 없습니다. 벡터는 레이아웃이 요구하는 크기에 관계없이 선명하게 다시 그려집니다.

PNG는 이 항목과 일치할 수 없습니다. 레티나 디스플레이에서 선명도를 유지하려면 PNG를 이중 해상도로 내보내야 하며, 이로 인해 파일 크기가 두 배로 늘어나고, 그 이상으로 늘어나면 흐려집니다. 반응형 레이아웃을 위해 여러 PNG 크기를 관리하는 것은 단일 SVG로 제거되는 실제 유지 관리 비용입니다.

실제로 PNG가 SVG를 능가하는 경우

PNG는 평판이 시사하는 것보다 더 많은 경우에 승리합니다. 다음이 포함된 모든 이미지 사진 디테일, 그라데이션, 질감 또는 부드러운 그림자 SVG로 추적하면 부풀어오르고 보기 흉한 혼란이 생기기 때문에 PNG에 속합니다. 스크린샷은 벡터화되지 않은 인터페이스 세부 사항과 텍스트를 혼합하므로 PNG 영역입니다. 그리고 수백 가지 색상이 포함된 복잡한 그림은 수천 개의 경로가 있는 거대한 SVG보다 PNG가 더 작고 깨끗합니다.

사람들이 저지르는 실수는 SVG가 항상 현대적이고 탁월한 선택이라고 가정하는 것입니다. 평면적이고 가장자리가 단단한 그래픽에만 탁월합니다. 상세한 이미지를 SVG로 푸시하면 원하는 것과 반대로 느리게 렌더링되는 더 큰 파일을 얻을 수 있습니다.

SVG 및 보안에 대한 참고 사항

SVG는 고려 사항을 전달합니다. PNG는 고려하지 않습니다. 즉, 코드이기 때문에 SVG 파일입니다. 스크립트를 포함할 수 있음. 사이트에 업로드된 악성 SVG는 이론적으로 표시될 때 JavaScript를 실행할 수 있습니다. 이것이 바로 많은 플랫폼이 사용자가 업로드한 SVG를 삭제하거나 거부하는 이유이며, 알려진 소스의 SVG만 신뢰해야 하는 이유입니다. 순수한 픽셀 데이터인 PNG에는 그러한 위험이 없습니다. 자신의 로고와 아이콘의 경우 이는 문제가 되지 않지만 일부 업로드 양식에서 SVG가 아닌 PNG를 허용하는 이유를 설명합니다.

SVG로 변환할 때 흔히 저지르는 실수

두 가지 실수로 인해 대부분의 PNG-SVG 변환이 망가집니다. 첫 번째는 사진을 벡터화하려고 합니다., 수천 개의 경로와 원본보다 큰 파일을 생성합니다. 두 번째는 자동 추적 후 SVG 내부에 원래 비트맵을 포함시켜 두는 것입니다. 따라서 파일은 실제로 SVG 래퍼의 PNG이므로 아무 것도 얻지 못합니다. 평평한 그래픽만 추적하고, 브랜드 로고의 경우 깔끔한 기하학과 가장 작은 파일을 제공하는 자동 추적을 신뢰하는 대신 벡터 편집기에서 다시 그립니다.

PNG를 SVG로 변환하는 방법

PNG를 SVG로 변환한다는 것은 벡터화를 의미합니다. 즉, 픽셀을 경로로 추적하는 것입니다. 이것은 작동합니다 플랫 로고, 아이콘 및 라인 아트, 그리고 추적할 깨끗한 모양이 없는 사진에는 실패합니다. 우리의 PNG-SVG 변환기 브라우저에서 간단한 그래픽을 추적하므로 아무것도 업로드되지 않습니다. 소유한 브랜드 로고의 경우 벡터 편집기에서 다시 그리면 자동 추적보다 더 깔끔한 결과를 얻을 수 있습니다. 사진을 찍으려면 PNG를 JPG로 변환하는 변환기 대신.

자주 묻는 질문

반응형 디자인에 SVG가 적합한가요?

예, 이상적입니다. 하나의 SVG가 모든 화면과 픽셀 밀도에서 선명함을 유지합니다., 별도의 소형, 대형 및 Retina PNG 내보내기가 필요하지 않습니다.

일부 사이트에서 SVG 업로드를 거부하는 이유는 무엇입니까?

왜냐하면 SVG에는 스크립트가 포함될 수 있습니다, PNG와는 다릅니다. 플랫폼은 보안을 위해 사용자 SVG를 삭제하거나 차단하므로 일부 양식에서는 PNG만 허용됩니다.

변환된 SVG가 PNG보다 큰 이유는 무엇입니까?

당신은 아마 사진을 추적하거나 비트맵을 포함된 상태로 두었습니다.. 평면 그래픽만 벡터화하고 추적 후 원본 이미지를 삭제하여 SVG가 픽셀이 아닌 경로를 유지하도록 합니다.

SVG가 PNG보다 낫나요?

그래픽의 경우 그렇습니다. SVG는 아주 작은 크기에서도 흐릿함 없이 확장됩니다.. 사진의 경우 PNG가 우선합니다. 사진에는 벡터로 저장할 깔끔한 모양이 없기 때문입니다.

SVG와 PNG의 차이점은 무엇입니까?

SVG는 확장 가능한 수학; PNG는 고정된 픽셀 격자입니다.. SVG는 어떤 크기에서도 선명하게 유지되는 반면 PNG는 해상도 이상으로 확대되면 흐릿해집니다.

사진에 SVG를 사용할 수 있나요?

아니요, 유용하지 않습니다. 사진에는 수백만 가지 색상과 부드러운 가장자리가 있습니다. 추적할 모양이 없으므로 SVG 사진은 크고 지저분합니다. PNG 또는 JPG를 사용하세요.

SVG와 PNG 중 어느 것이 더 작습니까?

간단한 그래픽의 경우 SVG. 2색 로고는 SVG로 몇 킬로바이트에 불과합니다. 어떤 크기로든. 사진의 경우 추적된 사진 풍선 때문에 PNG가 더 작습니다.

SVG는 투명성을 유지합니까?

예. SVG는 기본적으로 투명도를 지원합니다., PNG의 알파 채널과 마찬가지로 로고가 어떤 배경에서도 투명하게 유지됩니다.

모든 브라우저가 SVG를 지원합니까?

예. 모든 최신 브라우저는 SVG 및 PNG를 읽습니다. 플러그인 없이. SVG는 웹 페이지에 적합하고 PNG는 이메일 및 이전 소프트웨어에서도 작동합니다.

PNG를 SVG로 어떻게 변환하나요?

추적해 보세요. 벡터라이저는 플랫 PNG를 SVG 경로로 추적합니다., 로고와 아이콘에는 작동하지만 사진에는 작동하지 않습니다.

SVG를 만든 후 편집할 수 있나요?

예. 모든 벡터 편집기에서 열리는 SVG 경로 파일은 고정 픽셀이 아니라 모양을 설명하는 텍스트이므로 CSS를 사용하여 다시 색칠하거나 애니메이션을 적용할 수 있습니다.

웹사이트 로고에는 어떤 형식을 사용해야 합니까?

SVG. 하나의 파일로 모든 화면에서 선명하게 확장됩니다.이며 해당 텍스트는 검색 엔진에서 계속 읽을 수 있습니다. SVG가 허용되지 않는 이메일의 경우 PNG를 유지하세요.

아이콘에는 PNG나 SVG가 더 좋나요?

스케일링을 위한 SVG. SVG 아이콘은 어떤 크기에서도 선명하게 유지됩니다., PNG 아이콘은 여러 번 내보내야 하며 확대 시 흐리게 표시됩니다.

SVG와 PNG는 서로 다른 문제를 해결합니다. SVG는 어떤 크기에서도 선명하게 유지되는 확장 가능한 수학을 저장하는 반면, PNG는 확대 시 흐려지는 고정된 픽셀 그리드를 저장합니다. SVG는 CSS로 크기 조정, 편집 및 애니메이션을 적용해야 하며 모든 화면을 하나의 파일로 제공하는 로고, 아이콘 및 라인 아트에서 승리합니다. PNG는 사진, 스크린샷, 세부 이미지에 적합하며 SVG가 허용되지 않는 경우에도 작동합니다. 형식을 콘텐츠에 맞추고 위의 변환기를 사용하여 브라우저에서 간단한 그래픽을 벡터화하거나 래스터 사진을 처리하세요.

빠른 참조: SVG 또는 PNG

도달하다 SVG 이미지가 크기 조정이 필요한 로고, 아이콘, 차트 또는 선 그림인 경우, CSS를 사용하여 색상을 다시 지정하거나 애니메이션을 적용하려는 경우 또는 하나의 파일이 모든 화면 크기를 처리해야 하는 경우. 도달하다 PNG 이미지가 스크린샷, 상세한 그래픽 또는 그라데이션, 텍스처 또는 부드러운 가장자리가 있는 모든 것인 경우, 이메일 또는 SVG를 거부하는 이전 소프트웨어에서 작업해야 하는 경우. 구분선은 간단합니다. 평면적이고 가장자리가 딱딱한 그래픽은 벡터로 변환되고 모든 세부적인 내용은 래스터로 변환됩니다.

벡터 마스터 유지

모든 브랜드 자산의 경우 원본을 벡터 마스터로 유지하고 필요에 따라 래스터 복사본을 내보냅니다. 단일 SVG 로고는 파비콘, 소셜 아바타, 인쇄 파일을 생성할 수 있으며 각각은 필요에 따라 올바른 형식과 크기로 내보낼 수 있습니다. 래스터 PNG에서 다시 벡터로 다른 방식으로 작업하는 것은 추적을 의미하며 이는 깨끗한 형상을 완전히 복구하지 못합니다. 따라서 가능하면 마스터를 SVG로 저장하고 PNG 내보내기를 언제든지 다시 생성할 수 있는 일회용 복사본으로 처리하십시오.

결론

SVG와 PNG는 전문가만큼 경쟁자가 아닙니다. 벡터는 모양과 크기를 영원히 설명하므로 로고와 아이콘은 SVG에 속합니다. 픽셀은 세부 사항을 캡처하므로 사진과 스크린샷은 PNG에 속합니다. 한 가지 질문으로 선택하세요. 이 이미지가 깨끗하고 평평한 모양입니까, 아니면 미세한 사진 디테일을 가지고 있습니까? 그 대답은 매번 형식을 결정하며, 벡터 마스터를 유지한다는 것은 필요한 래스터 복사본을 언제든지 내보낼 수 있다는 것을 의미합니다.