SVG 이미지가 고해상도 png, jpg 또는 gif보다 축소 된 모양으로 보입니까?

이미지를 확대하려면 SVG가 현명한 선택이라는 것을 알고 있습니다.

그러나 내 상황은 사용자가 CMS를 통해 업로드 할 수있는 아이콘이 있다는 것입니다. SVG는 만들기가 까다롭기 때문에 jpg, gif 또는 png는 관리자에게 이상적인 형식으로 보입니다.

디스플레이 크기보다 크거나 같은 크기로 업로드하고 올바른 비율로 유지하면 크기를 줄이면 jpg, gif 또는 png가 SVG만큼 고품질이 될 수 있습니까?

내 가정은 브라우저가 svg를 특정 크기 이하로 안티 앨리어싱해야하기 때문에 gif는 더 많이 보이는 것처럼 보이지만 다른 형식과 마찬가지로 흐려질 수 있습니다.

(참고 : 내 답변은 OP 조사에 대한 의견이므로이 답변 전에 OP 자체 답변을 읽어 보시기 바랍니다. )

이것은 Android Chrome의 알려진 문제입니다. 일부 빌드에서는 앤티 앨리어싱을 비활성화하여 벡터 모양이 선명한 가장자리로 렌더링되었습니다. 그 이유는 앤티 앨리어싱 계산으로 인해 발생하는 과부하를 줄이기위한 것입니다. 불만으로 인해 앤티 앨리어싱을 다시 활성화해야하는 업데이트가 릴리스되었습니다.

이 문제에 대해 Stack Overflow에는 여러 스레드가 있습니다. 여기에 그중 하나가 있습니다 : https :
//.com/questions/19875908/vectors-poorly-displayed-on-chrome-for-android-canvas

iPod Touch Safari에서 동일한 문제에 대한 참조를 찾을 수 없지만 추정하고 문제가 동일하다고 가정하는 것이 안전합니다.

안티 앨리어싱을 비활성화하는 경우에도 기본적으로 요소 주위에 약간의 패딩을 추가하여 안티 앨리어싱을 적용하는 브라우저를 유발하는 이 트릭 과 같이 안티 앨리어싱을 강제로 시도하는 방법 이 있습니다. 또한 요소 의 모양 렌더링 속성을 선명한 가장자리와 다른 것으로 설정하여 브라우저가이를 존중하는지 확인할 수 있습니다.

방금 테스트를 실행했으며 유일한 차이점은 모바일 브라우저에있는 것으로 보입니다.

트위터 아이콘의 990 x 900px 이미지를 만들었습니다 (그 아이콘은 스케일링이 너무 좋기 때문에이 테스트에는 적합하지 않습니다). SVG, JPG, GIF, 투명 GIF (새 모양, 배경색 없음, CSS 대신 추가), PNG, 투명 PNG로 저장했습니다.

그런 다음 이것을 15px, 25px, 50px, 100px 및 150px로 줄였습니다.

Firefox의 결과는 다음과 같습니다.

Chrome의 결과는 다음과 같습니다.

생성 된 픽셀을 볼 수 있도록 가장 작은 결과의 화면 캡처를 확대하면 Firefox (위)가 불투명 버전의 가장자리가 약간 어두워 지지만 다른 모든 결과는 매우 비슷합니다.

그러나 아이팟 터치 사파리 브라우저에서 SVG 버전은 매우 흐릿하게 보이고 다른 버전은 매우 픽셀 화됩니다.

비슷한 결과가 Android Chrome에서도 나타납니다. 이 스크린 샷을 찍지 않았습니다.

이것이 픽셀 밀도와 관련이있을 수 있는지 궁금합니다. 이는 디스플레이의 주요 차이점이지만 모든 이미지가 SVG가 아닌 모바일에서 다르게 처리되는 경우 더 의미가 있습니다.

누군가가 이것이 왜 그런지를 설명 할 수 있다면, 나는 수용 된 답변 틱을 이전 할 것입니다. 그렇지 않으면 TL; DR의 대답은 흐리거나 픽셀 화 된 아이콘을 선호하는지 (또는 반응 형 중단 점에 대한 완벽한 크기의 픽셀로 많은 아이콘을 만드는지) 달려 있다는 것입니다.

편집 : 나는 svgs가 일반적으로 애플 장치에서 훨씬 명확하다는 것을 관찰했습니다. 트위터 조류는 위의 테스트에서 표시하기에 너무 상세 할 수 있으므로 아이콘에 사용하기에 적합한 형식이라고 생각하십시오.

벡터 이미지와 비트 맵 이미지 사이에는 매우 중요한 차이점이 있습니다. 비트 맵 이미지를 렌더링하는 동안 비트를 단순화하면 벡터 이미지가 클라이언트에 의해 렌더링됩니다.

이것은 이미지를 보내는 응용 프로그램이 이미지의 작동 방식에 대해 더 많은 것을 말해줍니다. 최종 결과는 다음과 같은 단점 이 있다는 것입니다 .

• 이미지를 표현할 수있게하려면 더 많은 리소스가 필요합니다
  • 이 경우 렌더링 할 리소스가 충분하지 않아 렌더링 품질이 떨어질 수 있습니다.
• 각 이미징 시스템에는 고유 한 단점과 결함이 있습니다
  • 일관성을 유지하기 어렵게 만듭니다
  • 당신은 프로그래머의 문제를 얻는다

반면 에 이것의 장점 이 있습니다 :

• 이미지의 크기를 자유롭게 조정할 수 있고 조작 옵션이 더 많습니다.
  • 이는 단순히 클라이언트 측에서 수행 한 작업의 결과이므로 픽셀을 계산하는 데 더 많은 시간을 투자하여 확장 방법을 알고있는 요소를 보내면 더 큰 그림을 얻을 수 있습니다.
• 대부분의 경우 데이터는 픽셀 이미지보다 작습니다 (필요하지는 않지만).

시스템에 버그가있는 렌더러가있는 경우 할 수있는 일이 많지 않습니다. 최종 응용 프로그램에 선택을 제공하면 해당 선택을 사용하여 잘못된 결정을 내릴 수 있습니다.

어떤게 더 좋아

이미지를 얼마나 잘 렌더링 할 수 있는지 그리고 원하는 대역폭을 얼마나 사용하는지에 따라 다릅니다. 브라우저보다 더 나은 렌더링을 수행하는 것이 가능합니다. Illustrator보다 더 나은 작업을 수행 할 수 있다는 것은 놀라운 일이 아닙니다. 그러나 지연 렌더링을 사용하면 얻을 수있는 모든 이점을 잃게됩니다.

세 번째 옵션이 있습니다.

결과에 만족하지 않으면 항상 자체 렌더링 엔진을 만들 수 있습니다. webgl을 지원하는 플랫폼으로 가능합니다. 예를 보려면 여기 를 참조하십시오 . 그러나 이것은 꽤 하드 코어이며 구현 세부 정보를 저장하지 않습니다.

(리차드 B의 답변에 대해 아직 직접 언급 할 의견이 충분하지 않습니다.)

귀하의 질문에 대답하기 위해 Richard B는 저전력 하드웨어에서 앤티 앨리어싱이 필요한 요소에 종종이 영향을 미칩니다. 앤티 앨리어싱이 감소되거나 해당 환경에서 제거 될 때 둥근 모서리가있는 DOM 요소에서도 발생합니다.

우리 회사에서는 저전력 하드웨어를 사용하는 경우가 있는데이 "매우 들쭉날쭉 한 모양"문제가 발생하기 시작했습니다. 성능을 향상시키기 위해 앤티 앨리어싱 양을 비활성화 / 축소했습니다. 이것이 모바일 테스트에서 결과를 반환 한 것과 같은 이유 일 수 있습니다.