I did some searching and couldn’t find anything relating to my issue however I would hope this has been discussed at some point or another given the large Apple user base and the appearance of retina displays.
I have published my site at www.mikeyevin.com and have used SVG’s for all images, however when my friends from work visit my website - all of which have Apple devices - they are presented with the following
Hi Mike, are you hosting your site in Webflow, or on your own external webserver? If you are hosting on your own web server, then update your html file, which contains the SVG so that it reads like this:
<!DOCTYPE svg PUBLIC “-//W3C//DTD SVG 1.1//EN”
“http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd”>
Then have your testers test again on mobile to see if the svg shows up. For some SVGs, the doctype declaration must be made for the browser to understand that you are loading an SVG from your server. Try that and let us know. I hope this helps to give you an avenue to explore.
SVGs not always showing up on iOS is a known iOS mobile issue (meaning IPAD on down).
The website is hosted on Webflow and not a third party. I have my domain hosted via Hover, but that shouldn’t matter in this situation.
Is there anyway for me to update this information in the html file generated within Webflow? It would be handy if pages could determine if an SVG was used so that the snippet of code could be inserted automatically.
Hi @mikeyevin , normally an SVG should load from a Webflow hosted site. Can you let me know what your domain is in Webflow, so I can do more investigation/testing for this? If you want to send me a private message with your webflow domain, I can check this out.
Hi @mikeyevin, I was doing some additional checking on this issue, and one thing to look at, is the SVG itself. There are certain limits in size and dimension for your SVG in order for it to be shown on Mobile iOS. According to the Safari Web Content Guide:
The maximum size for decoded GIF, PNG, and TIFF images is 3 megapixels for devices with less than 256 MB RAM and 5 megapixels for devices with greater or equal than 256 MB RAM.
That is, ensure that width * height ≤ 3 * 1024 * 1024 for devices with less than 256 MB RAM. Note that the decoded size is far larger than the encoded size of an image.
Now, I downloaded this SVG, and the file size is ok, only 39kb, but the decoded dimension in the file is very large:
w:706573 x h:706571
So I think you can solve this issue, by making a much smaller dimension SVG file. Try to reduce the size of the decoded SVG and then, I think those new dimensions stored in the file, will enable this to be viewed in iOS. You will probably have to make this change using your SVG editor/program.
I am surprised that the actual dimension of an SVG play a role in this, considering the images work off algorithms and size is essentially irrelevant. I will update the files to reduce their size below 2000px wide and see how that affects things. Thanks for working through this with me, I will let you know how it goes.
I have had this issue with SVGs as well, but it was on any device, not just iPhones. Didn’t have time to work it out so changed all SVGs to PNGs. When creating an SVG in Illustrator there are a lot of file format options, I don’t know which I used, probably the default. Does anyone know which option should be used…?
This makes interesting reading as like Mikey I assumed physical size would be irrelevant as it is a vector and nodes based file. Next time I’ll reduce the dimensions and see if that works.
Hi @PixelAce, yes please let us know your result. In my test, the svg worked ok when saved in smaller internal size. I cannot really say about Adobe Illustrator though, as I am using Sketch for SVGs. Maybe someone else who has that experience can say, what it is, that need to be changed in Adobe Illustrator to get correct results.
Sorry about not making this reply sooner but reducing the size of my SVG files fixed the issue of the images not showing up on Apple devices. I think I kept everything under 1500 px wide and it seemed to work for the few friends I had test it out.
I can’t really help on the Illustrator settings needed, but I have attached an image of the export dialog I used in CorelDraw and maybe that will give you some sort of direction to take within Illustrator
