웹 브라우저 엔진에서 SVG 지원 테스트 [사례 연구]
SVG (Scalable Vector Graphics)는 Internet Explorer를 포함한 모든 주요 웹 브라우저에서 공식적으로 지원됩니다. 이 지원은 다양한 이미지 편집기 소프트웨어, 특히 SVG를 기본 형식으로 사용하는 Inkscape (SVG에 대한 최신 정보를 원하면 여기를 클릭하십시오).
그러나 웹 브라우저는 정확히 무엇을 지원합니까? 모든 렌더링 엔진이 SVG 파일과 그 기능을 같은 방식으로 표시합니까? 그리고 필터와 같은 고급 기능은 무엇입니까? 우리가 알아 내야 할 것이 있습니다. 덜 악명 높은 브라우저를 포함하여 최신 브라우저 샘플을 가져 왔으며 이 목적을 위해 만들어진 SVG 파일로 테스트 해 보았습니다..
테스트 이미지
우리는 예술가들이 가장 많이 사용하는 요소에 초점을 맞춘 테스트 그림을 준비했습니다. 테스트 된 기능 중에는 텍스트 경로와 그 상호 작용, 그라데이션, 가우시안 블러 필터 및 더 많은 필터 유형에서 스택 된 고급 복합 필터가 있습니다..
웹 브라우저 엔진
블링크 엔진
우리는 가장 빈번한 렌더링 엔진 인 Blink로 시작했습니다. Blink는 Google의 Chrome 및 Chromium 브라우저, Opera 및 Android WebView의 기본 엔진입니다. 위에서 언급 한 모든 브라우저는 테스트 된 플랫폼에서 동일한 방식으로 이미지를 렌더링합니다..
Inkscape에서 제작 한 원본 이미지와 비교했을 때 누적 된 필터 효과의 렌더링에는 약간의 차이점이 있었지만.
| 브라우저 | 번역 | 플랫폼 | 결과 |
| 크롬 | 43.0.2357.125 | 리눅스 |  |
| 오페라 | 30.0.1835.59 | 리눅스 | |
| 오페라 | 30.0.1856.93524 | 기계적 인조 인간 | |
| 오페라 | 30.0.1835.88 | Windows | |
| 크롬 | 38.0.2125.114 | 기계적 인조 인간 | |
| 크롬 | 43.0.2357.130 | Windows | |
| 토치 | 39.0.0.9626 | Windows |
웹킷 엔진
최근 브라우저 사용 통계에 따르면 상위 3 순위는 웹킷 기반 브라우저에 속하지 않습니다 (2015 년 5 월 기준). 그러나이 엔진은 개발자들 사이에 널리 퍼져 있습니다. 거기에는 다양한 구현과 포크가 있습니다
테스트를 거친 모든 브라우저는 문제없이 SVG 파일을 렌더링했습니다. 그럼에도 불구하고, 합성 필터 구성 요소 인 Specular Lighting 렌더링에서의 차이점은 Inkscape와 비교하여 관찰되었습니다.
| 브라우저 | 번역 | 플랫폼 | 결과 |
| 원정 여행 | 8.0.6 | 맥 OS |  |
| 수달 | 0.9.05 | 리눅스 | |
| 퀴자 | 1.8.6 | 리눅스 | |
| 퀴자 | 1.8.6 | Windows | |
| 돌고래 | 10.3.1 | 기계적 인조 인간 | |
| Konqueror | 15.04.2 | 리눅스 | |
| UC 브라우저 | 10.5.0.575 | 기계적 인조 인간 |
트라이던트 엔진
Trident는 Internet Explorer 버전 4.0-11.0에서 사용되는 독점 엔진입니다. IE는 SVG를 완벽하게 해석했습니다. 또한 복합 필터 모양은 원본 이미지와 가장 잘 어울립니다. 두 번째로 많이 사용 된 IE (2015 년 5 월) IE 9를 테스트 한 결과이 버전에 가우시안 흐림 및 복합 필터 문제가 있음을 확인했습니다..
IE 9이 초기에 SVG 1.1 SE 표준의 초안 이전에 발표 되었기 때문에 이것은 놀랍지 않습니다. 필터 효과가 공식적으로 추가되었습니다.
| 브라우저 | 번역 | 플랫폼 | 결과 |
| IE | 11.0.9600.17843 | Windows |  |
| 브라우저 | 번역 | 플랫폼 | 결과 |
| IE | 9.0.8112.16421 | Windows |  |
도마뱀 붙이 엔진
Gecko는 Mozilla Corporation에서 개발 한 엔진으로 Firefox 웹 브라우저 또는 Thunderbird 이메일 클라이언트에서 사용됩니다. 브라우저 PaleMoon, Waterfox 및 이전 버전의 다른 많은 포크에서도 사용됩니다. Gecko 엔진의 경우 결과가 다른 플랫폼에서 정확히 동일하지 않았습니다..
Windows 버전에서는 경로를 따라 텍스트를 렌더링하는 데 약간의 결함이있었습니다. Firefox와 PaleMoon 브라우저에서 같은 문제가 발생했습니다. Gecko는 Webkit과 마찬가지로 Specular Lighting 필터 프리미티브를 올바르게 렌더링하는 데 문제가있는 것 같습니다..
| 브라우저 | 번역 | 플랫폼 | 결과 |
| Firefox | 38.0.5 | 리눅스 |  |
| Firefox | 38.0.5 | 기계적 인조 인간 | |
| PaleMoon | 25.5 | 기계적 인조 인간 |
| 브라우저 | 번역 | 플랫폼 | 결과 |
| Firefox | 38.0.5 | Windows |  |
| PaleMoon | 25.5 | Windows |
문제가있는 브라우저
위에서 볼 수 있듯이 모든 주요 렌더링 엔진 / 브라우저의 최신 버전은 큰 어려움없이 테스트를 통과했습니다. 이렇게 잘하지 않은 것들을 확인합시다..
맥슨 중국에서 개발 된 크로스 플랫폼 브라우저입니다. Fahad Khan의 20 가지 대체 웹 브라우저 인 Windows Maxthon에 따르면 Trident와 Webkit 엔진을 모두 사용합니다. Linux (v. 1.0.5.3) 및 Windows (v. 4.4.5.3000)에서는 SVG 렌더링에 아무런 문제가 없습니다. 그러나 안드로이드 장치에서 가우시안 흐림이나 다른 필터 기본 요소가 렌더링되지 않았습니다..
CM 브라우저 테스트 삼성 갤럭시 S3 장치에서 빠르게 수행되었지만 SVG 1.1 SE 사양에 설명 된 필터 효과도 지원하지 않습니다..
| 브라우저 | 번역 | 플랫폼 | 결과 |
| 맥슨 | 4.4.6.2000 | 기계적 인조 인간 |  |
| CM 브라우저 | 5.1.94 | 기계적 인조 인간 |
Konqueror 가장 인기있는 Linux 데스크탑 환경 중 하나 인 KDE의 기본 브라우저입니다. Konqueror에서 SVG 파일을 렌더링하는 기능은 렌더링 엔진에 따라 다릅니다. WebKit을 사용하면 SVG 테스트가 올바르게 렌더링되었습니다. 그러나 Konqueror의 기본 렌더링 엔진 인 KHTML은 여러 가지 기능을 지원하지 못하는 것 같습니다. 필터 효과는 기본 객체 및 획 끝 마커에 적용되지 않으며 경로 또는 패턴 객체의 텍스트는 전혀 렌더링되지 않습니다.
| 브라우저 | 번역 | 플랫폼 | 결과 |
| Konqueror KHTML | 15.04.2 | 리눅스 |  |
결론
우리의 테스트에서 우리는 최신 웹 렌더링 엔진에 걸쳐 SVG 형식의 지원에 중점을 두었습니다. 우리는 Maxthon이나 Dolphin과 같은 유명한 브라우저를 포함하여 네 가지 렌더링 엔진과 15 가지 브라우저를 테스트했습니다. 거의 모든 최신 버전의 브라우저가 테스트를 통과했으며 최종 승자를 선택하기가 어렵습니다..
저것은 나타난다 지원하다 과 필터 프리미티브의 올바른 스태킹 현재 렌더링 엔진의 마지막 남은 과제입니다. 원래 SVG 그림을 렌더링 된 모든 결과와 비교할 때 IE 11 (Trident 엔진)을 주관적으로 지명합니다.
그러나 블링크 엔진은 밀접하게 추구하고 있으므로 SVG 파일 렌더링에 블링크 기반 브라우저를 사용하는 것이 좋습니다. 원하는 브라우저를 신속하게 테스트하고 싶다면 SVG 렌더러 테스트 페이지를 자유롭게 사용해보십시오..
편집자 주 : 이 게시물은 Michal Rost의 Hongkiat.com 용으로 작성되었습니다. Michal은 생물 의학 회사에서 프로그래머로 일하지만 오픈 소스 앱 및 비영리 웹 포털 개발에 자유 시간을 바칩니다. 그는 scalablegfx의 창립자입니다. 당신은 그를 트위터에서 찾을 수 있습니다..
