Reputation: 61

SVG sprite not showing on ios iphone ipad

SVG sprite not showing on ios iphone ipad.

In android, and on a PC, everything is ok. But on iphone, ipad - just a white screen, how to fix it?

 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                 viewBox="0 0 1080 700" style="enable-background:new 0 0 1080 700;" xml:space="preserve">
                <g>
                    <path class="st0 state" data-state="Some text 1" d="M323.3,243.1c8,5,22.6,10,30,12c7.2,1.3,6.9-0.8,14-2c6.6,6.6,18.8,8.9,24,17c2.9,4.3,3.9,7.1,5.6,12.1
                        c2.9,11.4,12.6,20.4,11.2,32.9c-2.7-0.1-5.4-0.2-8-0.2c-2.6-8.5-5.6-17-7.2-25.8c-3.5,0-9.1-0.1-12.6,0c-2,5-6.4,8.3-8,13
                        c1,2,4.1,3.9,6,5c1,8.5,8.8,19.2,1.5,26.5c-4.9,5.4-2.2,13.4,1.1,19c5.9,9.3-0.7,18.2-3.6,27.5c-9.9-0.7-18.6-3.6-24-11.8
                        c-6-0.2-10.9-1.3-17-1.2c1.9-8.2,3.1-12.6,4-21c4.7,4.6,9.6,9.2,17,9c-0.1-4.7,1.5-12-1-17c-3.1-2.7-11.6-9.7-14-10
                        c0.2-4.3,0.6-11.5,2-19c1.7-8.8,6.5-20.2,7-30c0.3-6.5-3.1-13.2-4-15c-1-0.5-5.7-0.8-9-1c-3.4-0.2-5.5-0.1-7,1c-3.2-4-6-5-12-7
                        c-1,3-2.8,9.2-2,12c0,2,2.2,3.4,3,6c0.6,1.9,0,3.3,0,5c-13.5-0.3-24.7,0.9-38.1-0.9c-6.4-1.7-10.9-7.1-16.4-10.3
                        c-3-1.5-4.3-2.7-7.4-3.8c0-3-0.1-4.1,0-7c2.2,0,16.5,6.2,33,4C304.7,260.2,318.4,249.8,323.3,243.1z"/>
                </g>
                <g>
                    <path class="st1 state" data-state="Some text 2" d="M560.8,149.4c2.5-2.3,5.8-0.3,8.3,0.8c4.8,2.6,10.2,4.3,14.6,7.5c4.1,3.8,7.9,8.7,13.7,9.9
                        c9.8,1.4,20.1,0.2,29.5,4c4.4,2.9,7.9,6.9,11.5,10.7c5.3,5.7,6.8,13.6,10.4,20.3c1.7,3.5,6,3.9,9.1,5.4
                        c7.7,2.7,14.5,7.7,22.3,10.1c7.9,2.6,14.6,7.5,22.3,10.6c14.5,4.7,28.3,11.5,40.5,20.6c5.8,4.2,12.9,6.8,17.7,12.3
                        c1.8,2.1-0.6,4.6-1.2,6.6l-0.3,0.7c-4,7.6-5,16.7-10.4,23.5c-5,5.5-12.9,6.4-19.6,8.6c-0.9,5.4-1.7,10.9-2.3,16.3l-0.2,0.9
                        c4.7,1,9.4,1.9,14.1,2.8c-1.8,2.8-3.5,6.1-6.8,7.3c-3.9,1.3-8,1.6-11.8,2.7c-0.4,2.2-1.2,6.5-1.6,8.7c8.6,0.1,17.3,0.3,25.9,0.5
                        c0.1,4.6,0.2,9.2-0.9,13.7c-5.8,3.5-4.9,11.1-6,16.9c-8.8,0.4-13.9-7.6-21.8-9.6c-3.3,6.2-5,13-5.7,20c-4.9-2.8-9.9-5.1-15-7.3
                        c-1.3-0.7-2.7-1.1-4.1-0.9c-10.5,0.6-21.1,1-31.6,1.1c0-0.8,0-2.5,0-3.3c3.1-1.8,6.3-3.4,9.5-5.1c-0.9-3.9-0.8-9.2-4.7-11.4
                        c-5.3-1.1-5.9,6-8,9.5c-5.8-2.1-11.8-3.2-17.9-3.3c-1.2,0-2.4,0-3.5,0c-4.7,0.1-9.8,0.2-14,2.6c-2,3.2-2,7.4-4.5,10.3
                        c-6.2,0-12.3-0.9-18.5-0.7c-3.2,0.4-5.9,2.5-9.2,2.7c-1.8-0.6-3.3-1.9-5-3l-0.1-1c-0.1-1.5-0.1-3.1-0.1-4.6
                        c-7,0.1-14.5-1.5-20.9,1.9c-4.1,1.7-7.8,4.3-10.8,7.5c-2.6,0.5-5.2,0.9-7.9,1.2c-2.1-4.5-2.6-9.5-5.2-13.8
                        c-5.6-6.1-17.8-7.5-18.2-17.5c5.1-6,12.5-10.2,20.3-11.6c-0.7-4.3-2.1-8.8-5.3-11.9c-6.3-3.8-7.1,6.6-13.2,5
                        c-11.8,0.7-23.6-4.6-32.9-11.5c-0.1-0.5-0.3-1.5-0.3-2c-0.1-0.4-0.3-1.1-0.3-1.5c-6.4-0.6-14.1,2.5-19.3-2.5
                        c-4.7-3.5-7.5-8.9-12.3-12.4c-1-0.8-2-1.6-3.1-2.3c4.1-1.9,8.6-3.8,11-7.8c3.7-6.2,5.3-13.5,5.5-20.6c0-1.1-0.4-2-1.1-2.9
                        c-4.3-1.4-9.3-0.3-13.4-2.5c-5-7.2-6.1-16.3-10.9-23.5c-6.8-0.3-13.5,0.7-20.1,1.9c-1.3-7.6,1-17.9-6.4-23.1
                        c-0.3-0.8-0.7-1.6-1.1-2.4c-3.8-6.3-5.6-13.3-5.5-20.7c4,0.2,8.1,0.6,12.2,0.9c2.4,0.2,4.8,0.5,7.3,0.7c0.4,0,1.2,0.1,1.6,0.2
                        c2.4-3,5.5-5.4,7.8-8.5c1-2,2.2-6.4,0.7-9.3c-1.5-2.8-3.7-3.8-5-4c-1-2-1-2-1-4c12.6-0.7,24.7-1.5,37.2-2.9c4.6,0,9,1.4,13.6,1.8
                        c3.4,0.4,6.8,0.7,10.2,1.1l0.9,0.1c2.8,0.7,5.6,1.3,8.4,1.8c1.2-6,2.6-12,3.9-18c1.3,0.1,2.5,0.3,3.8,0.5c1.4,4.2,0.4,9.6,3.5,13
                        c4.7,2.6,10.3,0.6,15.3,0.3c6.2-0.7,10.3-5.9,15.5-8.8C554,156.6,557.1,152.7,560.8,149.4z M560.5,180.6"/>
                </g>
            </svg>

Upvotes: 3

Answers (2)

Alexandr_TT

Reputation: 14545

Try removing from the SVG header style =" enable-background: new 0 0 1080 700; " xml: space = "preserve"

Modern browsers don't handle this right now.

Specify the fill color explicitly - <path fill="dodgerblue"

 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  viewBox="0 0 1080 700">
                <g>
                    <path fill="dodgerblue" class="st0 state" data-state="Some text 1" d="M323.3,243.1c8,5,22.6,10,30,12c7.2,1.3,6.9-0.8,14-2c6.6,6.6,18.8,8.9,24,17c2.9,4.3,3.9,7.1,5.6,12.1
                        c2.9,11.4,12.6,20.4,11.2,32.9c-2.7-0.1-5.4-0.2-8-0.2c-2.6-8.5-5.6-17-7.2-25.8c-3.5,0-9.1-0.1-12.6,0c-2,5-6.4,8.3-8,13
                        c1,2,4.1,3.9,6,5c1,8.5,8.8,19.2,1.5,26.5c-4.9,5.4-2.2,13.4,1.1,19c5.9,9.3-0.7,18.2-3.6,27.5c-9.9-0.7-18.6-3.6-24-11.8
                        c-6-0.2-10.9-1.3-17-1.2c1.9-8.2,3.1-12.6,4-21c4.7,4.6,9.6,9.2,17,9c-0.1-4.7,1.5-12-1-17c-3.1-2.7-11.6-9.7-14-10
                        c0.2-4.3,0.6-11.5,2-19c1.7-8.8,6.5-20.2,7-30c0.3-6.5-3.1-13.2-4-15c-1-0.5-5.7-0.8-9-1c-3.4-0.2-5.5-0.1-7,1c-3.2-4-6-5-12-7
                        c-1,3-2.8,9.2-2,12c0,2,2.2,3.4,3,6c0.6,1.9,0,3.3,0,5c-13.5-0.3-24.7,0.9-38.1-0.9c-6.4-1.7-10.9-7.1-16.4-10.3
                        c-3-1.5-4.3-2.7-7.4-3.8c0-3-0.1-4.1,0-7c2.2,0,16.5,6.2,33,4C304.7,260.2,318.4,249.8,323.3,243.1z"/>
                </g>
                <g>
                    <path fill="dodgerblue" class="st1 state" data-state="Some text 2" d="M560.8,149.4c2.5-2.3,5.8-0.3,8.3,0.8c4.8,2.6,10.2,4.3,14.6,7.5c4.1,3.8,7.9,8.7,13.7,9.9
                        c9.8,1.4,20.1,0.2,29.5,4c4.4,2.9,7.9,6.9,11.5,10.7c5.3,5.7,6.8,13.6,10.4,20.3c1.7,3.5,6,3.9,9.1,5.4
                        c7.7,2.7,14.5,7.7,22.3,10.1c7.9,2.6,14.6,7.5,22.3,10.6c14.5,4.7,28.3,11.5,40.5,20.6c5.8,4.2,12.9,6.8,17.7,12.3
                        c1.8,2.1-0.6,4.6-1.2,6.6l-0.3,0.7c-4,7.6-5,16.7-10.4,23.5c-5,5.5-12.9,6.4-19.6,8.6c-0.9,5.4-1.7,10.9-2.3,16.3l-0.2,0.9
                        c4.7,1,9.4,1.9,14.1,2.8c-1.8,2.8-3.5,6.1-6.8,7.3c-3.9,1.3-8,1.6-11.8,2.7c-0.4,2.2-1.2,6.5-1.6,8.7c8.6,0.1,17.3,0.3,25.9,0.5
                        c0.1,4.6,0.2,9.2-0.9,13.7c-5.8,3.5-4.9,11.1-6,16.9c-8.8,0.4-13.9-7.6-21.8-9.6c-3.3,6.2-5,13-5.7,20c-4.9-2.8-9.9-5.1-15-7.3
                        c-1.3-0.7-2.7-1.1-4.1-0.9c-10.5,0.6-21.1,1-31.6,1.1c0-0.8,0-2.5,0-3.3c3.1-1.8,6.3-3.4,9.5-5.1c-0.9-3.9-0.8-9.2-4.7-11.4
                        c-5.3-1.1-5.9,6-8,9.5c-5.8-2.1-11.8-3.2-17.9-3.3c-1.2,0-2.4,0-3.5,0c-4.7,0.1-9.8,0.2-14,2.6c-2,3.2-2,7.4-4.5,10.3
                        c-6.2,0-12.3-0.9-18.5-0.7c-3.2,0.4-5.9,2.5-9.2,2.7c-1.8-0.6-3.3-1.9-5-3l-0.1-1c-0.1-1.5-0.1-3.1-0.1-4.6
                        c-7,0.1-14.5-1.5-20.9,1.9c-4.1,1.7-7.8,4.3-10.8,7.5c-2.6,0.5-5.2,0.9-7.9,1.2c-2.1-4.5-2.6-9.5-5.2-13.8
                        c-5.6-6.1-17.8-7.5-18.2-17.5c5.1-6,12.5-10.2,20.3-11.6c-0.7-4.3-2.1-8.8-5.3-11.9c-6.3-3.8-7.1,6.6-13.2,5
                        c-11.8,0.7-23.6-4.6-32.9-11.5c-0.1-0.5-0.3-1.5-0.3-2c-0.1-0.4-0.3-1.1-0.3-1.5c-6.4-0.6-14.1,2.5-19.3-2.5
                        c-4.7-3.5-7.5-8.9-12.3-12.4c-1-0.8-2-1.6-3.1-2.3c4.1-1.9,8.6-3.8,11-7.8c3.7-6.2,5.3-13.5,5.5-20.6c0-1.1-0.4-2-1.1-2.9
                        c-4.3-1.4-9.3-0.3-13.4-2.5c-5-7.2-6.1-16.3-10.9-23.5c-6.8-0.3-13.5,0.7-20.1,1.9c-1.3-7.6,1-17.9-6.4-23.1
                        c-0.3-0.8-0.7-1.6-1.1-2.4c-3.8-6.3-5.6-13.3-5.5-20.7c4,0.2,8.1,0.6,12.2,0.9c2.4,0.2,4.8,0.5,7.3,0.7c0.4,0,1.2,0.1,1.6,0.2
                        c2.4-3,5.5-5.4,7.8-8.5c1-2,2.2-6.4,0.7-9.3c-1.5-2.8-3.7-3.8-5-4c-1-2-1-2-1-4c12.6-0.7,24.7-1.5,37.2-2.9c4.6,0,9,1.4,13.6,1.8
                        c3.4,0.4,6.8,0.7,10.2,1.1l0.9,0.1c2.8,0.7,5.6,1.3,8.4,1.8c1.2-6,2.6-12,3.9-18c1.3,0.1,2.5,0.3,3.8,0.5c1.4,4.2,0.4,9.6,3.5,13
                        c4.7,2.6,10.3,0.6,15.3,0.3c6.2-0.7,10.3-5.9,15.5-8.8C554,156.6,557.1,152.7,560.8,149.4z M560.5,180.6"/>
                </g>
            </svg>

Upvotes: 1

BharathRao

Reputation: 2046

You cannot show .svg images in iOS OS below 13. From Apple's Xcode 12 release notes:

Asset Catalogs New Features Added support for Scalable Vector Graphic (SVG) image assets. These preserve their vector representation with deployment targets of macOS 10.15 or later, iOS 13 or later, and iPadOS 13 or later. (18389814)

However you can use libraries eg: https://github.com/mchoe/SwiftSVG. But this doesn't not gurantee loading all types of svg images.

Upvotes: 1

SVG sprite not showing on ios iphone ipad

Answers (2)

Related Questions