현대 웹 사이트의 SVG 아이콘 대 PNG 아이콘

나는 왜 그렇게 소수의 현대 웹 사이트가 여전히 아이콘에 PNG만을 사용하는지 궁금합니다 (그러나이 가정은 내 관찰에 근거한 것입니다). 지금까지 SVG보다 PNG를 사용하는 주된 이유는 IE8이고 SVG는 더 많은 CPU 성능을 사용한다는 것입니다 (하지만 이것이 단순한 1K 아이콘에 대한 문제라고 생각하지 않습니다). SVG를 스프라이트, 이미지 또는 인라인 SVG로 사용할 때 SVG를 사용할 때 많은 이점을 볼 수 있으며 현재 사용하고 있습니다.

( 연구를 찾고있는 질문 : PNG 스프라이트 대 SVG 스프라이트 대 아이콘 글꼴 은 성능에 초점을 맞추고 관련 답변이 없습니다. 아이콘 글꼴 대 SVG 캐싱 및 네트워크 문제 는 네트워크 트래픽에 초점을 맞추지 만 예를 들어 템플릿으로 쉽게 해결할 수 있습니다.)

새 웹 사이트가 최신 브라우저 만 지원하는 경우 SVG를 사용하지 않는 이유가 있습니까 (또는 아이콘에 PNG를 사용하는 이유가 있습니까)? IE8에 신경 쓰지 않고 SVG 사용이 템플릿 및 / 또는 캐싱으로 백업된다면 SVG에만 의존하는 문제가 있습니까?

SVG가 좋은 선택이 될 수있는 이유 :

• 특히 CSS를 사용하여 모든 크기의 브라우저를 원활하게 지원합니다. background-size
• 호버 효과 와 같이 확대 / 축소 할 수 있습니다.
• SVG를 임베드하고 JavaScript 및 DOM을 사용하여 실시간으로 수정할 수 있습니다.
• CSS를 사용하여 SVG 및 SVG 일부의 스타일을 지정할 수 있습니다 (색상, 윤곽선 등 변경).
• 클라이언트 또는 서버에서 동적으로 SVG를 생성 할 수 있습니다. 텍스트 기반 특성으로 인해 저수준 라이브러리 나 강력한 서버가 필요하지 않습니다.

PNG가 좋은 선택이 될 수있는 이유 :

• 브라우저 지원
• PNG 스프라이트 시트를 만들기위한 기존 도구
• 대부분의 사람들은 컴퓨터에 PNG 호환 편집기가 있습니다.
• 그래픽이 사진이거나 이미지를 벡터화하기 어려운 기타

기타 문제 :

• 일부 SVG 편집기는 SVG에 메타 데이터를 저장하여 파일 크기를 늘리고 의도하지 않게 데이터를 노출 할 수 있습니다.
  • 예를 들어 Inkscape에서 PNG를 내보낼 때 저장할 때 SVG에서이 디렉토리에 대한 절대 경로를 저장했습니다.
  • SVG 압축기는 이것을 제거 할 수 있지만 테스트하지는 않았습니다 (있는 경우 자유롭게 편집하십시오).

매우 단순한 모양 / 디자인을 보여 주거나 앱으로 그래픽의 일부를 특별히 수정해야하는 경우가 아니면 SVG를 사용하는 데 많은 인센티브가 없습니다. 레티 나 디스플레이의 경우 원래 크기의 두 배로 PNG를 생성 할 수 있으며 파일 크기는 훨씬 더 작게 만들 수 있습니다. 레거시 브라우저에 대한 더 나은 적용 범위는 말할 것도 없습니다 (자바 스크립트 또는 폴리 필 필요 없음).

저는 벡터 그래픽으로 UI를 만드는 사람이라고 말합니다. 멋진 디자인 도구이지만 전달 / 대역폭 / 도달을 위해 PNG를 차지하기가 어렵습니다. 어젯밤에 잘 알려진 로고를 테스트했습니다. CocaCola.svg는 거의 20K였습니다. 단색 / 플랫 컬러 였기 때문에 12 색 팔레트 압축을 사용하여 PNG-8로 내 보냈고 1.6K (!!!)로 줄였습니다. 몇 개의 로고에 대해서는 큰 문제는 아니지만 40 개를 표시해야 할 때 그들 중 .. 글쎄, 당신은 그림을 얻습니다.

가장 좋은 점은 PNG를 base64 데이터 URI로 변환하여 스타일 시트에 바로 포함 할 수 있다는 것입니다. 특히 모바일 브라우저에서 성능 및 호환성 문제로 이미 유명한 형식 인 SVG에서는 권장되지 않습니다.

마지막으로 두 가지 모두에 대한 강점과 사용 사례가 있다고 말해야합니다. 그러나 PNG는 훨씬 더 많은 흔적을 남겼고 전류와 함께 갈 때 저항에 직면하지 않습니다. SVG가 더 잘 맞는을 수행하는 이상한 경우를 들어, 내가보기 엔 추천 이 문서 와 이 학습 자원을

행복한 디자인!

SVG는 멋지고 (FakeRainBrigand가 멋지게 설명 된 방식) 아름답게 렌더링되지만 꽤 복잡 할 수 있습니다. 브라우저는 픽셀 기반 이미지 대신 벡터 데이터를 처리 할 때 더 많은 작업을 수행합니다. 이미지는 하나의 요소이며 SVG에는 인라인으로 사용할 때 DOM에 추가 할 수있는 많은 하위 항목이있을 수 있습니다.

나는 귀중한 성능 테스트를하지 않았지만 논리적 관점에서 SVG는 특히 중년 모바일 브라우저 (CPU 스트레스)를 다룰 때 성능면에서 신중하게 사용해야합니다. 다른 Android 및 IOS 장치에서 100 개의 SVG 이미지와 100 개의 PNG 이미지가 소비하는 CPU 전력을 볼 수있는 차트를 갖는 것이 매우 유용 할 것입니다.

SVG의 또 다른 버그는 태그에 어떤 브라우저와 오래된 IE에 관계없이 일부 Android / Samsung에 대한 너비 및 높이 속성이 필요하다는 것입니다. 그리고 A *** e Illustrator와 같은 대부분의 최신 SVG 편집기는 "viewBox"속성 만 추가합니다.

SVG의 가장 멋진 점은 모든 픽셀 밀도에서 멋지고 선명하게 렌더링된다는 것입니다.

사실, png는 거의 모든 곳에서 사용됩니다. 대부분의 경우 SVG가 쓸모없고 이미지가 더 커야하고 (내 생각에) 컴퓨터는 확대 할 때마다 이미지를 재생성해야하기 때문이라고 생각합니다 (항상 이미지를 확대하기 때문입니다. ?) 이것이 가장 중요한 이유라고 생각합니다.

성능면에서 SVG가 끔찍해질 수 있다는 점에 유의하십시오 . Chrome과 같은 최신 브라우저에서도 (2019 년에 작성했습니다!) SVG 아이콘이 수백 개 (실제적으로 3 ~ 800 개)있는 CMS와 유사한 페이지는 말 그대로 5 초 이상 브라우저를 중단하여 렌더링을 완료합니다. 한편 CPU를 최대로 사용합니다.

다른 곳에서 언급했듯이 페이지에 포함 된 SVG의 수 는 브라우저의 부하를 기하 급수적으로 증가 시키므로 이러한 상황에 직면하게되면

옵션 # 1 : svg를 웹 폰트로 변환 (여기 성능 차트 참조 : http://frozeman.de/blog/2013/08/why-is-svg-so-slow/ )

옵션 # 2 : 일반 오래된 PNG로 대체

즉석 색상 수정과 같은 멋진 작업을하고 싶지 않고 SVG 인스턴스가 많으면 이전 PNG가 작업을 수행하고 하루를 절약 할 수있는 상황입니다!