로고는 두 개의 파일에 도착: logo.svg 3KB에서 logo.png 40 KB 에서. 둘 다 브라우저 탭에서 동일하게 보입니다. 프로젝터 화면을 채우기 위해 날려 버리고 하나만 선명하게 유지하십시오. 소셜 프로필에 업로드하려고 시도하면 다른 하나만 허용됩니다. 그리고 당신이 가진 것이 PNG 뿐이라면 "PNG 를 SVG " 로 변환; 기술적으로 SVG 이지만 디자이너가 만들었을 파일이 아닌 것을 다시 건네주십시오.
이 가이드는 각 파일이 저장하는 것, 언제 어떤 것을 사용할지, SVG를 픽셀로 렌더링할 때 어떤 일이 발생하는지, PNG를 벡터 모양으로 추적하는 것이 무엇을 복구할 수 있는지와 복구할 수 없는지 측면에서 두 형식의 차이점을 설명합니다. 여기에는 Toolz 변환기 뒤에 있는 추적 엔진의 실수가 포함되며 아래에 위치합니다 이미지 도구 허브.
TL;DR: SVG 는 벡터 형식입니다: 형상으로 모양을 저장하므로 흐려지지 않고 모든 크기로 확장되며 로고,아이콘 및 다이어그램에 이상적입니다. PNG 는 래스터 형식입니다: 고정 된 픽셀 그리드를 무손실로 저장하여 스크린 샷,세부 아트 워크 및 이미지 만 허용하는 모든 곳에 적합합니다. SVG 에서 PNG 로 이동하는 것은 선택한 크기로 정확합니다; 를 사용하십시오 SVG 에서 PNG 변환기 날카로운 출력을 위해 2x 또는 4x 에서. PNG 에서 SVG 로가는 것은 픽셀에서 모양을 다시 만들고 원래 디자인을 복구하지 않는 추적입니다. 플랫 로고 및 라인 아트에 대해 작동하며 사진에 실패합니다. 여기의 모든 변환은 클라이언트 측을 실행하며 업로드 된 것이 없으며 무료이며 가입이 없습니다.
SVG 와 PNG 의 차이점은 무엇입니까?
SVG 는 이미지를 그리기 위한 지침으로 설명하고 PNG 는 완성된 그림을 픽셀로 저장합니다. 두 형식에 대한 다른 모든 것은 그 한 가지 차이점을 따릅니다.
W3C에 의해 정의된 SVG 파일입니다 확장 가능한 벡터 그래픽(SVG) 2는 XML 텍스트입니다. 경로,원, 직사각형,그라디언트 및 텍스트를 나열하며 각각 좌표와 색상이 있습니다. 그 안에 이미지가 몇 픽셀인지 나와 있지 않습니다. 브라우저가 표시하면 렌더러는 각 모양이 화면 크기로 어떤 픽셀을 덮는지 계산하므로 동일한 파일이 전화기와 5K 모니터에서 선명합니다.
W3C에서 다음과 같이 지정한 PNG 파일입니다 휴대용 네트워크 그래픽 그리고 ISO/IEC 15948 로 간행해,DEFLATE 로 압축된 착색한 화소의 격자입니다. 압축은 무손실 입니다,그래서 당신이 해독하는 화소는 저장되었던 화소 정확하게 입니다. PNG 는 가득 차있는 알파 채널 및 수로 당 16 까지 비트를 나를 수 없습니다 세부사항을 추가하기 위한 것입니다: 2048 년 x 2048 에 보인 512 x 512 PNG 는 4 x 4 구획에 기지개된 각 화소를 비치하고,가장자리는 연약하거나 blocky 돌았습니다.
다음은 SVG 소스와 동일한 간단한 배지입니다:
<svg xmlns="http://www.w3.org/2000/svg" width="240" height="80" viewBox="0 0 240 80">
<rect x="4" y="4" width="232" height="72" rx="16" fill="#1d4ed8"/>
<text x="120" y="52" font-family="Arial, sans-serif" font-size="32"
text-anchor="middle" fill="#ffffff">TOOLZ</text>
</svg>
마크업의 그 4 개의 라인은 전체 이미지이고,폭 240 픽셀로 표시하든 24,000 으로 표시하든 4 개의 라인을 유지합니다. 240 x 80 에서 동일한 배지의 PNG 버전은 19,200 픽셀을 보유하고 960 x 320 에서는 307,200 을 보유합니다.
SVG vs PNG: 어떤 형식을 사용해야 합니까?
스케일링이 필요한 도형으로 만들어진 모든 것에 SVG 를 사용하고,픽셀로 만들어지거나 래스터 이미지만 허용하는 어딘가로 향하는 모든 것에 PNG 를 사용합니다. 이 표는 이들을 나란히 설정합니다:
| 재산 | SVG | PNG |
|---|---|---|
| 이미지 모델 | 벡터: 경로, 모양, 텍스트 | 래스터: 고정 픽셀 그리드 |
| 표준 | W3C SVG 2 | W3C PNG, ISO/IEC 15948 |
| 스케일링 | 어떤 크기로도 날카 롭습니다 | 확대하면 흐려지거나 막힙니다 |
| 압축 | 텍스트; 서버에서 gzip | 무손실 디플레이트 |
| 투명성 | 예 | 네, 풀 알파입니다 |
| 로고의 파일 크기입니다 | 보통 몇 KB | 픽셀 크기로 성장합니다 |
| 사진의 파일 크기 | 비실용적인 | 크지만 합리적인 |
| 내보내기 후 편집 가능 | 예, 벡터 편집기의 모양과 색상입니다 | 픽셀 단위로만 |
| 안에 텍스트 | 선택 및 검색이 가능합니다 | 픽셀로 구워졌습니다 |
| 스크립트를 포함할 수 있습니다 | 예, 보안 문제입니다 | 아니요 |
| 소셜 업로드, 사무실 앱, 이메일에서 허용됩니다 | 종종 그렇지 않습니다 | 거의 항상 |
| 위한 최고의 | 로고, 아이콘, 도표, 도표, UI 삽화 | 스크린샷, 디테일 아트, 고정 크기 자산 |
실용적인 규칙: 모든 벡터에 대해 SVG를 마스터로 유지하고 각 대상에서 필요한 크기로 PNG를 내보냅니다. 픽셀을 다시 모양으로 바꾸는 것은 모양을 픽셀로 바꾸는 방식으로 손실이 없기 때문에 로고의 PNG만 유지하지 마십시오.
사진의 경우,어느 형식도 전달에 적합한 선택이 아닙니다. PNG 의 사진은 크고,SVG 의 사진은 XML 로 감싼 PNG 이거나,추적된 근사치입니다. JPEG,WebP 또는 AVIF 는 해당 작업을 위해 제작되었습니다; webp가 무엇이며 언제 사용해야하는지 사진면을 덮는다.
왜 많은 곳에서 SVG 업로드를 거부합니까?
SVG 는 단지 이미지가 아니라 활성 콘텐츠를 포함할 수 있는 문서이기 때문입니다. SVG 사양은 허용합니다 <script> 요소, 이벤트 처리기 속성 등 onload를 통해 외부 리소스 및 내장 HTML에 대한 링크를 제공합니다 <foreignObject>. SVG 업로드를 수락하고 나중에 자체 도메인에서 제공하는 사이트는 파일을 직접 여는 모든 방문자에 대해 다른 사람 & # 39;s JavaScript 를 실행하게 될 수 있습니다.
SVG 를 안전하게 소독하는 것은 가능하지만 까다롭기 때문에 많은 플랫폼이 더 간단한 경로를 택합니다: 프로필 사진,마켓플레이스 목록,광고 네트워크,많은 CMS 미디어 라이브러리 및 대부분의 이메일 클라이언트는 래스터 형식만 허용합니다. Office 문서 및 채팅 앱도 더 패치된 지원을 제공합니다.
이것이 SVG를 PNG로 변환하는 가장 일반적인 이유입니다. SVG를 이미지로 그리는 브라우저는 안전한 경우입니다. SVG가 다음을 통해 로드되기 때문입니다 <img> element 또는 on a canvas 는 스크립트를 실행하거나 외부 파일을 가져오는 것이 허용되지 않습니다. Toolz 변환기는 SVG 를 정확히 그런 방식으로 렌더링하므로 알 수 없는 소스에서 파일을 변환하는 것이 안전합니다.
품질을 잃지 않고 SVG를 PNG로 변환하려면 어떻게해야합니까?
SVG 를 필요한 픽셀 크기로 렌더링하거나 더 크게 렌더링하고,이후에는 PNG 를 절대 스케일업하지 마십시오. SVG 는 지오메트리이기 때문에,4x 로 그리는 것은 1x 로 그리는 것만큼 정확합니다; 이 방향의 모든 품질 손실은 너무 작은 출력을 선택하는 데서 비롯됩니다.
X-1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 10 SVG 에서 PNG 변환기 크기를 이 순서대로 계산합니다:
- SVG 루트가 설정되면
width그리고height, 등의 단위로 사용됩니다mm,pt,in그리고cmCSS 픽셀로 변환. - 만약 a만 가지고 있다면
viewBox는, viewBox 너비와 높이가 사용됩니다. - 둘 다 없으면 1024 x 1024로 그려집니다.
- 가장 긴 변이 여전히 512 픽셀 미만인 경우 선언된 크기로 그려진 24 x 24 아이콘이 사용하기에는 너무 작기 때문에 해당 변이 512가 될 때까지 그림이 비례적으로 확대됩니다.
- 그런 다음 SVG 스케일 옵션은 결과에 1, 2 또는 4를 곱합니다.
선언하는 위의 배지를 가져가세요 width="240" height="80". 가장 긴 변은 512 이하이므로 512 x 171 로 확대됩니다. 2x 에서 PNG 는 1024x342 로 나오고 도색되지 않은 모서리는 투명하게 남습니다. 결과 아래의 메모에는 크기와 출처가 나와 있으므로 추측이 없습니다.
화면은 2x 를 선택하면 대부분의 휴대폰과 노트북은 CSS 픽셀당 두 개 이상의 장치 픽셀을 사용하고 인쇄 또는 대형 디스플레이는 4x 를 사용합니다. 출력 천장은 100 메가 픽셀 또는 한 면에 16,384 픽셀이며 50MB 이상의 SVG 파일은 거부됩니다; 더 작은 규모로 첫 번째 경우를 수정합니다.
두 종류의 콘텐츠는 렌더링에서 살아남지 못합니다. URL 로 링크된 이미지와 웹 글꼴은 생략됩니다. 이미지로 그려진 SVG 는 파일 외부의 어떤 것도 가져올 수 없기 때문에 텍스트는 시스템 글꼴로 다시 떨어집니다; 내보내기 전에 벡터 편집기에서 텍스트를 윤곽선으로 변환하면 이를 피할 수 있습니다. 그리고 애니메이션 SVG 는 단일 스틸 프레임이 됩니다.
SVG 를 PNG,JPG 또는 PDF 로 변환해야 합니까?
기본적으로 PNG 로 변환하고,대상이 PNG 를 거부하거나 사진과 같은 그래픽을 위해 더 작은 파일이 필요한 경우에만 JPG 로 변환하고,인쇄 또는 전자 메일을 보낼 문서가 필요한 경우 PDF 로 변환합니다.
| 타겟 | 투명성 | 크기 | 당신이 잃는 것 | 위해 사용하십시오 |
|---|---|---|---|---|
| PNG | 보관됨 | 중간 | 확장성 | 업로드, 슬라이드, 앱 자산, 투명한 배경의 모든 것 |
| JPG | 흰색으로 채워져 있습니다 | 복잡한 예술을 위한 가장 작은 | 확장성, 투명성, 약간의 가장자리 선명도 | JPG만 사용하는 양식, 이메일 첨부 파일 |
| PDF(래스터화) | 투명 영역은 흰색 페이지를 보여줍니다 | 더 크게 | 확장성,선택 가능한 텍스트,클릭 가능한 링크 | 증명 시트, 차트 인쇄, 디자이너가 아닌 사람에게 삽화 보내기 |
X-1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 10 SVG 에서 JPG 변환기 JPEG 에는 알파 채널이 없기 때문에 투명한 영역을 흰색으로 채우고 품질 슬라이더를 적용합니다. 평평한 색상의 선명한 가장자리는 JPEG 압축으로 희미한 울림이 남는 바로 그 곳이므로 로고는 일반적으로 PNG 로 더 잘 보입니다.
X-1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 10 SVG 를 PDF 변환기 명확한 경고를 받을 만합니다. 래스터화: 각 SVG 는 픽셀로 그려져 PNG 로 저장되며 페이지에 배치됩니다. PDF 에는 벡터 모양이 없고 텍스트를 선택할 수 없으며 충분히 멀리 확대하면 픽셀이 표시됩니다. 스케일 옵션은 여전히 도움이 됩니다. 페이지 크기가 고정되어 있는 반면 2x 및 4x 는 더 많은 픽셀을 (Fit to image 로 인치당 72,144 또는 288 픽셀) 팩을 더 많이 넣기 때문입니다. 인쇄소에서 벡터 PDF 를 요청하는 경우 당 ISO 32000 PDF는 진정한 벡터 경로를 전달할 수 있지만, 이를 위해서는 이미지 변환기가 아닌 벡터 편집기's 내보내기가 필요합니다.
PNG 를 SVG 로 변환하면 어떤 역할을 합니까?
PNG 를 SVG 로 변환하면 이미지를 추적합니다: 픽셀을 비슷한 색상의 영역으로 그룹화하고 각 영역 주위에 윤곽선을 맞춰 채워진 벡터 경로를 생성합니다. PNG 에는 이를 만든 도형에 대한 레코드가 포함되어 있지 않기 때문에 원본 벡터 파일을 찾을 수 없습니다. 출력의 모든 가장자리는 픽셀에서 가져온 추정치입니다.
뒤에 있는 추적자 PNG를 SVG로 그리고 JPG를 SVG로 on Toolz is imagetracerjs,백그라운드에서 실행 Web Worker 그래서 페이지는 응답 상태를 유지. 그것은 두 단계로 작동:
- 색상 감소. 이미지는 색상: 2, 8 또는 16에서 선택한 숫자인 작은 팔레트로 축소됩니다.
- 가장자리 이음쇠. 각 색상 레이어에 대해 추적자는 연결된 모든 영역의 경계를 걷고 직선과 곡선을 여기에 맞춰 영역당 하나의 채워진 경로를 생성합니다.
각 경로는 또한 그것의 자신의 색깔에 있는 1 개 화소 윤곽선을 얻습니다. 그것 없이,이웃 모양은 그들의 가장자리가 확실히 만나지 않는 가는선 간격을 남겨두고,배경은 얇은 백색 솔기로 처음부터 끝까지 보여줍니다.
세부 정보는 해당 윤곽선이 픽셀을 얼마나 가깝게 따라가는지 제어합니다:
| 세부사항 | 선과 곡선 포용력 | 얼룩이 아래로 떨어졌습니다 | 프리블러 | 결과 |
|---|---|---|---|---|
| 낮은 | 2px | 16점 | 약간 | 더 매끄럽고, 더 간단하고, 더 작은 파일 |
| 중간 (기본값) | 1px | 8점 | 없음 | 균형 잡힌 |
| 높은 | 0.5px | 2 점 | 없음 | 픽셀을 밀접하게 따르고 작은 모양을 더 무겁게 유지합니다 |
추적된 SVG는 다음과 같이 작성됩니다 width 그리고 height 원본 이미지 크기로 설정하고 a viewBox 추적 픽셀로, 그래서 당신이 기대하는 크기로 열리고 당신이 그것을 어디에 놓든지 깨끗하게 확장됩니다.
추적은 무엇을 잘 할 수 있으며, 어디에서 실패합니까?
추적은 처음부터 벡터와 같았던 이미지에서 잘 수행됩니다: 평면 색상, 단단한 가장자리, 몇 가지 색상. 연속 톤이 있는 모든 것에서는 실패합니다. 사진에는 찾을 가장자리가 없고 그라데이션만 있기 때문입니다.
| 소스 | 어떻게 추적하는지 | 제안 설정 |
|---|---|---|
| 편평한 로고, 2 6 색깔 | 깨끗한 모양, 작은 파일 | 8가지 색상, 미디엄 |
| 흑백 라인 아트, 서명, 우표 | 매우 깨끗합니다 | 2가지 색상, 중간 또는 높음 |
| 그라데이션이 있는 아이콘입니다 | 그라데이션이 밴드로 변합니다 | 16가지 색상, 중간, 편집기에서 단순화하세요 |
| 종이에 스캔한 그림 | 종이 질감이 얼룩이 됩니다 | 2가지 색상, 낮음 |
| 압축 아티팩트가 포함된 JPG 로고 | 가장자리를 따라 얼룩이 있고 배경이 모양으로 추적됩니다 | 낮은 세부 사항; 이후 배경 모양을 삭제합니다 |
| 텍스트가 포함된 스크린샷 | 글자는 얼룩덜룩한 윤곽선이 됩니다 | PNG 로 보관하세요 |
| 사진 | 얼룩덜룩한 포스터 모양, 거대한 파일 | 추적하지 마십시오 |
사진 행은 취향의 문제가 아닙니다. Toolz 엔진을 테스트할 때 16 가지 색상으로 추적된 2000 px 의 시끄러운 사진은 28 초가 걸렸고 46 MB SVG 를 생성했는데,이는 원래 이미지보다 몇 배나 무겁고 여전히 눈에 띄게 더 나빴습니다. 소음은 추적자에게 수천 개의 작은 영역을 제공하며 각각은 자체 좌표를 가진 자체 경로가 됩니다.
그 테스트는 컨버터가 추적하기 전에 한 면의 1200 픽셀보다 긴 이미지를 1200 까지 축소하는 이유입니다. 그런 다음 추적은 몇 분이 아닌 몇 초 만에 끝나며 출력이 원래의 너비와 높이를 유지하기 때문에 SVG 가 배치되는 방식에 대해 아무것도 변경되지 않습니다. 탭을 무한정 바쁘게 두는 대신 더 적은 색상이나 더 낮은 세부 사항을 제안하는 메시지와 함께 2 분 후에도 여전히 실행 중인 추적이 중지됩니다.
JPG 소스는 두 가지 특정 문제를 추가합니다. JPEG 압축은 날카로운 모서리 주위에 희미한 블록을 남기며,추적자는 길 잃은 모양으로 변할 수 있습니다; 낮은 디테일은 약간 흐려지고 반점을 떨어 뜨립니다. 그리고 JPG 는 투명도가 없으므로 로고 주위의 흰색 상자는 아트 워크 뒤에 채워진 모양이 하나 더됩니다. 벡터 편집기에서 해당 모양을 선택하고 삭제하십시오.
PNG 로고에서 깨끗한 SVG를 얻으려면 어떻게해야합니까?
디자인을 보존하는 가장 간단한 설정으로 시작하여 미리보기를 살펴보고 무언가가 누락되었을 때만 색상이나 세부 정보를 추가하십시오. 더 무거운 설정은 나쁜 흔적을 거의 수정하지 않습니다; 그들은 그것에 더 많은 경로를 추가합니다.
신뢰할 수 있는 시퀀스:
- 가지고 있는 가장 크고 깨끗한 소스를 사용하세요. PNG 내보내기가 스크린샷을 이기고,스크린샷이 인쇄물의 사진을 이깁니다.
- 로고에 있는 색상을 세고 그 위 또는 그 위에 있는 가장 가까운 옵션을 선택합니다. 2색 표시는 2를 원하고, 5색 표시는 8을 원합니다.
- 중간에서 추적합니다. 미리보기와 결과 아래에 표시된 파일 크기를 확인합니다.
- 얼룩이나 거친 가장자리가 있는 경우 Low에서 되돌리고 얇은 세부 사항이 사라진 경우 High에서 되돌립니다.
- 마지막 단계의 벡터 편집기에서 결과를 엽니다: 배경 모양이 있으면 삭제하고, 하나여야 하는 모양을 병합하고, 추적된 텍스트를 올바른 글꼴의 실제 텍스트로 바꿉니다.
추적 후 표시되는 파일 크기가 PNG 보다 큰 경우 이를 신호로 처리합니다. For a logo it usually means noise is being traced; for other other it usually means the image should stay raster.
흔적이 절단기, 레이저 조각기 또는 자수 소프트웨어로 향하는 경우, 2가지 색상은 채우기가 아닌 윤곽선에서 작동하기 때문에 다채로운 디자인에도 정답이 되는 경우가 많습니다.
한 곳에서 이러한 형식 간에 변환할 수 있나요?
예. 장군 이미지 변환기 JPG,JFIF, PNG,WebP, AVIF,GIF, BMP,ICO, HEIC,TIFF, PSD,CR2, DNG 및 PDF 와 함께 SVG 를 수락하고 JPG,PNG, WebP,GIF, ICO,PDF 또는 SVG 를 쓰며,목표로 SVG 를 선택하면 동일한 색상 및 세부 설정으로 모든 래스터 소스를 추적합니다; SVG 소스에 대한 래스터 대상을 선택하면 SVG 스케일 옵션이 표시됩니다.
전용 쌍 페이지는 화면의 옵션을 관련성 있게 유지하는 자체 소스 형식만 허용합니다: SVG 페이지는 스케일을 표시하고 추적 페이지는 색상과 세부 사항을 표시합니다.
하나의 조합은 제공되지 않습니다: PDF 를 SVG 로 변환기는 메시지와 함께 거부하고,제안하는 경로는 두 단계입니다: PDF 페이지를 PNG 로 먼저 변환 한 다음 PNG 를 추적하십시오. PDF 가 벡터 프로그램에서 나온 경우 해당 프로그램에서 SVG 를 내보내는 것이 실제 경로를 유지하고 더 나은 옵션입니다.
SVG 는 파비콘이 될 수도 있습니다. ICO 로 렌더링하면 각 아이콘 크기에서 정사각형 PNG 이미지가 생성되며 512 px 최소값은 작은 아이콘 SVG 가 여전히 깨끗한 256 px 항목을 제공한다는 것을 의미합니다. Favicon 크기와 ICO 파일 내부에 들어가는 내용 포함할 크기를 다룹니다.
SVG 및 PNG 변환은 비공개입니까?
예. 렌더링,인코딩 및 추적은 모두 브라우저 탭 내부에서 클라이언트 측에서 발생하므로 파일이 업로드되지 않습니다. SVG 디코딩 단계와 추적기는 파일이 필요할 때만 다운로드되므로 래스터 형식 간에만 변환할 때 페이지가 밝게 유지됩니다.
한계는, 한 곳에서: SVG 파일 최대 50 MB, 렌더링 출력 최대 100 메가 픽셀 및 16,384 픽셀 한 면, 래스터 소스 최대 100 메가 픽셀, 가장 긴 면의 최대 1200 px에서 추적, 추적 당 2 분 천장 도구는 무료이며 가입이 없으며 매일 전환 제한이 있습니다.
