HTML img 요소의 iOS Safari SVG가 작동하지 않습니까?

Question

Can I Use에 따르면 <img/> 요소에서 SVG를 참조하는 기능은 iOS Safari에서 잘 지원됩니다. 콘텐츠와 함께 제공되는

<img src='E1M1.svg' class='img-responsive'/> 

을 그리고 SVG (곱슬 곱슬에 따른) :

HTML을 오히려 간단하다 그러나 my site 내가 렌더링 이미지를 점점 문제가 있습니다 image/svg+xml 타입 :

HTTP/1.1 200 OK 
x-amz-id-2: R7QpUKqnC7vYY/60mGfkkpk528vUlwwaMf8QS00Jvgg5H1EZk7NP6rkFdfvZsC3lLKX1HJXfqj8= 
x-amz-request-id: 9D47859B55E37B45 
Date: Thu, 22 May 2014 21:36:59 GMT 
x-amz-meta-s3cmd-attrs: uid:501/gname:staff/uname:jasonsperske/gid:20/mode:33188/mtime:1400783207/atime:1400783431/ctime:1400783207 
Last-Modified: Thu, 22 May 2014 18:39:44 GMT 
ETag: "3d7db47140e0f7e34e33ae8cbefaf022" 
Content-Type: image/svg+xml 
Content-Length: 41276 
Server: AmazonS3 

는 또한 valid SVG입니다. 어떤 아이디어?

Answer 1

SVG 내부의 이미지 크기는 모바일 Safari의 래스터 이미지와 동일한 제한 사항에 의해 결정됩니다. 원본 SVG에서 루트 노드는 다음과 같이 보입니다.

<svg baseProfile="tiny" 
    version="1.2" 
    height="4298px" 
    width="2826px" 
    xmlns="http://www.w3.org/2000/svg" 
    xmlns:ev="http://www.w3.org/2001/xml-events" 
    xmlns:xlink="http://www.w3.org/1999/xlink"> 

이미지의 총 크기는 12,146,148입니다. 애플의 모바일 사파리 문서 (source) 때문에 iOS에서 사용 가능한 메모리의

에 따르면, 처리 할 수있는 자원의 수에 한계가 있습니다

• 디코딩 GIF의 최대 크기, PNG, 및 TIFF 이미지는 256MB RAM 미만인 장치의 경우 3 메가 픽셀이고 256MB RAM 이상인 장치의 경우 5 메가 픽셀입니다.
• 즉, RAM이 256MB 미만인 장치의 너비 * 높이가 3 * 1024 * 1024인지 확인하십시오. 디코딩 된 크기는 이미지의 인코딩 된 크기보다 훨씬 큽니다.

이것은 SVG에도 적용됩니다. 해결책은 viewBox을 추가 한 다음 높이와 너비를 제한보다 낮은 값으로 설정하는 것입니다. SVG는 벡터 이미지이므로 디스플레이의 최대 해상도로 렌더링되지만 이미지는 Mobile Safari에서 허용되는 것으로 간주됩니다.

<svg baseProfile="tiny" 
    version="1.2" 
    height="1024" 
    width="1024" 
    viewBox="0 0 4298 2826" 
    xmlns="http://www.w3.org/2000/svg" 
    xmlns:ev="http://www.w3.org/2001/xml-events" 
    xmlns:xlink="http://www.w3.org/1999/xlink"> 

을 그리고 사이트는 이제 다음과 같습니다 :

는 루트 노드는 이제 다음과 같습니다