6 Replies Latest reply on May 8, 2016 11:04 PM by ianhowse

    SVG images not showing

    ianhowse Level 1

      My Phonegap app has to load 80 51x51px icons but only 50 of them actually display (the 30 missing are at 'random' positions in the list of 80).

       

      If I run the exact same code (great benefit of Phonegap!) on the same device (iphone/ipad) as a web page, all 80 show correctly (as it does if I run on a desktop with Firefox/Chrome/IE/Safari.

       

      I have tried using <img src='......> and <td style='background:url('......... and placing the list in it's own external CSS stylesheet as img.xxx {background:url('....} and as td.xxx {background:url('....} and just referencing the xxx id in the page html - all with the same result

       

      Anybody got any clues / hints / suggestions as to what's wrong?

        • 1. Re: SVG images not showing
          kerrishotts Adobe Community Professional

          Thoughts:

           

          • Are the missing images random each time, or are the missing images persistent? That is, if you launch the app do different images start disappearing?
          • Make sure the SVG icons are optimized; I suppose it's possible you're running into a memory issue if these are super-large SVG files
          • Does anything appear in the JavaScript / Device console? That could be useful information.
          • Have you considered using a sprite sheet? This means only one load (instead of one per SVG icon).
          • It's possible some of your CSS styles are causing the issue. For example, on iOS SVG icons don't always appear during animations coming in from off-screen (they render after).
          • Are you using UIWebView or WKWebView? What iOS models and OS versions are you testing on?
          • 2. Re: SVG images not showing
            ianhowse Level 1

            Hi Kerri

            • Missing images are the same ones each time - they are random within the set (ie. not every 2nd, or 5th, etc)
            • They are NOT optimised (straight out of Illustrator) - I will optimise them once they all work fine (so I've got a fallback position) but they are all less than 4Kb so size is not an issue at the moment.
            • No, nothing appears anywhere.
            • Sorry, don't know what a sprite sheet is
            • The whole set is displayed in a loop using the same css style.
            • I've got no idea whether I'm using UIWebView or WKWebView (it is 'straight' HTML5 code utilising the latest version of the  Phonegap desktop onto the Phonegap iPhone/iPad app) and the result is the same on iPhone & iPad (both running ios 9.3.1)

             

            If it helps, below is the code for one that DOES work, then one that does NOT work.

             

            Much appreciate your interest!

            Ian.

             

            WORKS:

            <?xml version="1.0" encoding="utf-8"?>

            <!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->

            <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 51 51" style="enable-background:new 0 0 51 51;" xml:space="preserve">

            <style type="text/css">

              .st0{fill:#39B6CF;}

              .st1{enable-background:new    ;}

              .st2{fill:#FFFFFF;}

            </style>

            <path class="st0" d="M40,51H11C4.9,51,0,46,0,40V11C0,4.9,4.9,0,11,0h29c6,0,11,4.9,11,11v29C51,46,46,51,40,5 1z"/>

            <g class="st1">

              <path class="st2" d="M15.8,42.6v-4.3h0.8V40h1.6v-1.7H19v4.3h-0.8v-1.9h-1.6v1.9H15.8z"/>

              <path class="st2" d="M19.7,40.5c0-0.4,0.1-0.8,0.2-1.1c0.1-0.2,0.2-0.4,0.4-0.6s0.3-0.3,0.5-0.4c0.3-0.1,0.5-0 .2,0.9-0.2

              c0.6,0,1.1,0.2,1.4,0.6c0.4,0.4,0.5,0.9,0.5,1.6c0,0.7-0.2,1.2-0.5,1.6c-0.4,0.4-0.8,0.6-1.4 ,0.6c-0.6,0-1.1-0.2-1.5-0.6

              C19.9,41.7,19.7,41.2,19.7,40.5z M20.6,40.5c0,0.5,0.1,0.9,0.3,1.1c0.2,0.3,0.5,0.4,0.8,0.4s0.6-0.1,0.8-0.4

              c0.2-0.2,0.3-0.6,0.3-1.1c0-0.5-0.1-0.9-0.3-1.1c-0.2-0.2-0.5-0.4-0.8-0.4c-0.3,0-0.6,0.1-0. 8,0.4C20.7,39.6,20.6,40,20.6,40.5z"/>

              <path class="st2" d="M24.3,38.3h0.8v2.3c0,0.4,0,0.6,0,0.7c0,0.2,0.1,0.3,0.3,0.4c0.1,0.1,0.3,0.2,0.5,0.2c0.2 ,0,0.4,0,0.5-0.2

              s0.2-0.2,0.2-0.4c0-0.1,0-0.4,0-0.7v-2.4h0.8v2.3c0,0.5,0,0.9-0.1,1.1c0,0.2-0.1,0.4-0.2,0.5 s-0.3,0.3-0.5,0.4

              c-0.2,0.1-0.5,0.1-0.8,0.1c-0.4,0-0.7,0-0.9-0.1c-0.2-0.1-0.4-0.2-0.5-0.4c-0.1-0.2-0.2-0.3- 0.2-0.5c-0.1-0.2-0.1-0.6-0.1-1.1V38.3

              z"/>

              <path class="st2" d="M28.3,41.2l0.8-0.1c0,0.3,0.1,0.5,0.3,0.6S29.7,42,30,42c0.3,0,0.5-0.1,0.6-0.2c0.1-0.1,0 .2-0.3,0.2-0.4

              c0-0.1,0-0.2-0.1-0.3c-0.1-0.1-0.2-0.1-0.3-0.2c-0.1,0-0.3-0.1-0.7-0.2c-0.4-0.1-0.8-0.3-0.9 -0.4c-0.3-0.2-0.4-0.5-0.4-0.9

              c0-0.2,0.1-0.4,0.2-0.6c0.1-0.2,0.3-0.3,0.5-0.4s0.5-0.1,0.8-0.1c0.5,0,0.9,0.1,1.2,0.4s0.4, 0.6,0.4,0.9l-0.8,0

              c0-0.2-0.1-0.4-0.2-0.5C30.3,39,30.2,39,29.9,39c-0.2,0-0.4,0.1-0.6,0.2c-0.1,0.1-0.1,0.2-0. 1,0.3c0,0.1,0,0.2,0.1,0.3

              c0.1,0.1,0.4,0.2,0.8,0.3s0.7,0.2,0.9,0.3s0.3,0.3,0.5,0.4c0.1,0.2,0.2,0.4,0.2,0.7c0,0.2-0. 1,0.5-0.2,0.7s-0.3,0.4-0.6,0.5

              c-0.2,0.1-0.5,0.2-0.9,0.2c-0.5,0-0.9-0.1-1.2-0.4C28.5,42.1,28.3,41.7,28.3,41.2z"/>

              <path class="st2" d="M32.3,42.6v-4.3h3V39h-2.2v1h2.1v0.7h-2.1v1.2h2.3v0.7H32.3z"/>

            </g>

            <g>

              <path class="st2" d="M13,19.2L13,19.2c-0.5-0.7-0.4-1.6,0.2-2.1l10.9-8.8c0.7-0.5,1.6-0.4,2.1,0.2l0,0c0.5,0.7 ,0.4,1.6-0.2,2.1

              l-10.9,8.8C14.5,19.9,13.5,19.8,13,19.2z"/>

              <path class="st2" d="M38,19.2L38,19.2c0.5-0.7,0.4-1.6-0.2-2.1L26.9,8.2c-0.7-0.5-1.6-0.4-2.1,0.2l0,0c-0.5,0. 7-0.4,1.6,0.2,2.1

              l10.9,8.8C36.5,19.9,37.5,19.8,38,19.2z"/>

              <path class="st2" d="M15.6,19.8l0.2,11.8h6.7h1v-6.9c0,0-0.1-3.3,2.5-3.4s2.3,3.5,2.3,3.5v6.8h7.2l-0.1-11.8l- 9.2-7.2l-0.7-0.5

              L15.6,19.8z"/>

              <polygon class="st2" points="32.3,12.5 32.3,9 36.1,9 36.1,15.7 "/>

            </g>

            </svg>

             

            NOT WORKS:

            <?xml version="1.0" encoding="utf-8"?>

            <!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->

            <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 51 51" style="enable-background:new 0 0 51 51;" xml:space="preserve">

            <style type="text/css">

              .st0{fill:#39B6CF;}

              .st1{enable-background:new    ;}

              .st2{fill:#FFFFFF;}

            </style>

            <path class="st0" d="M40,51H11C4.9,51,0,46,0,40V11C0,4.9,4.9,0,11,0h29c6,0,11,4.9,11,11v29C51,46,46,51,40,5 1z"/>

            <g class="st1">

              <path class="st2" d="M19.2,38.1h1.6c0.3,0,0.6,0,0.7,0c0.2,0,0.3,0.1,0.4,0.2c0.1,0.1,0.2,0.2,0.3,0.4c0.1,0.2 ,0.1,0.3,0.1,0.5

              s-0.1,0.4-0.2,0.6s-0.2,0.3-0.4,0.4c0.2,0.1,0.4,0.2,0.6,0.4s0.2,0.4,0.2,0.6c0,0.2,0,0.4-0. 1,0.6c-0.1,0.2-0.2,0.3-0.4,0.4

              c-0.1,0.1-0.3,0.2-0.6,0.2c-0.1,0-0.5,0-1,0H19v-4.3H19.2z M20,38.8v1h0.5c0.3,0,0.5,0,0.6,0s0.3-0.1,0.3-0.2

              c0.1-0.1,0.1-0.2,0.1-0.3s0-0.2-0.1-0.3c-0.1-0.1-0.2-0.1-0.3-0.2c-0.1,0-0.3,0-0.7,0H20z M20,40.5v1.1h0.8c0.3,0,0.5,0,0.6,0

              c0.1,0,0.2-0.1,0.3-0.2c0.1-0.1,0.1-0.2,0.1-0.4c0-0.1,0-0.2-0.1-0.3s-0.1-0.2-0.3-0.2c-0.2, 0-0.4-0.1-0.7-0.1H20V40.5z"/>

              <path class="st2" d="M23.4,42.4v-4.3h0.8l1.7,2.9v-2.9h0.8v4.3h-0.8l-1.7-2.8v2.8H23.4z"/>

              <path class="st2" d="M27.5,38.1h1.6c0.3,0,0.6,0,0.7,0s0.3,0.1,0.4,0.2s0.2,0.2,0.3,0.4c0.1,0.2,0.1,0.3,0.1,0 .5s-0.1,0.4-0.2,0.6

              s-0.2,0.3-0.4,0.4c0.2,0.1,0.4,0.2,0.6,0.4c0.1,0.2,0.2,0.4,0.2,0.6c0,0.2,0,0.4-0.1,0.6c-0. 1,0.2-0.2,0.3-0.4,0.4

              c-0.1,0.1-0.3,0.2-0.6,0.2c-0.1,0-0.5,0-1,0h-1.4v-4.3H27.5z M28.3,38.8v1h0.5c0.3,0,0.5,0,0.6,0s0.3-0.1,0.3-0.2

              c0.1-0.1,0.1-0.2,0.1-0.3s0-0.2-0.1-0.3s-0.2-0.1-0.3-0.2c-0.1,0-0.3,0-0.7,0H28.3z M28.3,40.5v1.1h0.8c0.3,0,0.5,0,0.6,0

              s0.2-0.1,0.3-0.2c0.1-0.1,0.1-0.2,0.1-0.4c0-0.1,0-0.2-0.1-0.3s-0.1-0.2-0.3-0.2c-0.1,0-0.4- 0.1-0.7-0.1h-0.7V40.5z"/>

            </g>

            <g>

              <path class="st2" d="M10.9,31.9L10.9,31.9c-0.8,0-1.5-0.7-1.5-1.5v-9.5c0-0.8,0.7-1.5,1.5-1.5l0,0c0.8,0,1.5,0 .7,1.5,1.5v9.5

              C12.4,31.2,11.7,31.9,10.9,31.9z"/>

              <path class="st2" d="M40.2,31.9L40.2,31.9c-0.8,0-1.5-0.7-1.5-1.5v-4.6c0-0.8,0.7-1.5,1.5-1.5l0,0c0.8,0,1.5,0 .7,1.5,1.5v4.6

              C41.6,31.2,41,31.9,40.2,31.9z"/>

              <rect x="11.2" y="25.3" class="st2" width="30.5" height="5.1"/>

              <path class="st2" d="M14,24.3c0,0,0.5-1.3,2.1-1.3s1.7,1.3,1.7,1.3H14z"/>

              <path class="st2" d="M19.3,24.3c0,0-0.2-1.8,3.3-2s12.8,0,12.8,0s2.1-0.2,2.3,2H19.3z"/>

              <path class="st2" d="M19.3,9.1H30c0,0,0.7,5.2-2.4,5.7c-3.2,0.5-6.9,0-7.4-2.2S19.3,9.1,19.3,9.1z"/>

              <path class="st2" d="M29.9,9.5c0,0,2.6-0.4,2.5,1.7c-0.1,2.1-0.7,3.9-2.2,2.7c-1.5-1.1-1-0.6-1-0.6l0.4-0.4c0, 0,1.2,0.9,1.5,0.8

              s0.4,0.3,0.8-1.7c0.3-2-0.8-1.9-2-1.6"/>

              <path class="st2" d="M19.3,11.9c0,0-2.5,0.1-2.5,2.4s1.7,3.9,6,3.9s10.5,0.9,11.1-3.1c0.5-1.6,0-2.8-1.1-3c0,0 ,0.1,1.7-0.7,2.2

              c-0.9,0.6-0.9,0.5-2.4,0c-0.6,1-3.1,1.6-6.2,1.1S20,14.1,19.7,13C19.3,11.9,19.3,11.9,19.3,1 1.9z"/>

            </g>

            </svg>

            • 3. Re: SVG images not showing
              kerrishotts Adobe Community Professional

              Inline:

              Missing images are the same ones each time - they are random within the set (ie. not every 2nd, or 5th, etc)

               

               

              Ok -- if you create a sample PhoneGap project that simply serves to display an image that is missing from your list, does that image appear? I want to rule out problems with the SVG file itself.

               

              They are NOT optimised (straight out of Illustrator) - I will optimise them once they all work fine (so I've got a fallback position) but they are all less than 4Kb so size is not an issue at the moment.

               

              I'd probably optimize them anyway, although I agree: < 4KB is likely not the issue.

               

              Sorry, don't know what a sprite sheet is

               

              A sprite sheet is a collection of images within a single file. This is commonly used to speed up loading icons and the like, since one only has to make one http request, but it's also useful in PhoneGap to ensure that all the images are loaded at once (rather than waiting for the browser to load each one in).

               

              Open Iconic, a free and open icon set  has a good example of using SVG with sprite sheets.

               

              I've got no idea whether I'm using UIWebView or WKWebView (it is 'straight' HTML5 code utilising the latest version of the  Phonegap desktop onto the Phonegap iPhone/iPad app) and the result is the same on iPhone & iPad (both running ios 9.3.1)

              If you're using the PhoneGap Desktop/Developer app, then you're using UIWebView. On iOS, this view is an older version of the browser engine -- WKWebView is more modern, although it does come with its own share of caveats.

               

              I would suggest building your app either with PG Build or the PhoneGap CLI. Then see if that result has the same problems. It's possible you're running into some sort of bug with the PGDesktop/PGDev apps.

              • 4. Re: SVG images not showing
                ianhowse Level 1

                Thanks Kerri-

                I think I've proved it's a bug in PhoneGap!

                As you suggested, I removed all my code from the project and left just the Phonegap entries 'out of the box' and changed index.html to -

                <!DOCTYPE html>

                <html>

                <head>

                <meta charset="utf-8" />

                <meta name="apple-mobile-web-app-capable" content="yes">

                <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

                <meta name="apple-mobile-web-app-title" content="Elf">

                <link rel="apple-touch-startup-image" href="Elf.png">

                <link rel="apple-touch-icon" href="Elf.png">

                <meta name="viewport" content="user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1,width=device-width,heigh t=device-height,target-densitydpi=device-dpi">

                <script src="cordova.js"></script>

                <script src="Filters.js"></script>          // array of 80 ImageNames (xxx.svg)

                <script>

                var deviceReady, eRow;

                var IconNumber = 0;

                 

                     document.addEventListener("deviceready", onDeviceReady, false);

                 

                function onDeviceReady()

                {     deviceReady = true}

                 

                function pageLoaded()

                {     if (!deviceReady) {setTimeout(pageLoaded, 25)} else {initialise()}}

                function initialise()

                {    eRow = document.getElementById('IconCell');

                     DoIcon()

                }

                function DoIcon()

                {    eRow.innerHTML += IconNumber+"=<img src='Filters/"+Icons[IconNumber]+"_N.svg' style='width:64px; height:64px'>";

                     IconNumber++; if (IconNumber <= 80) {setTimeout(DoIcon, 999)}  // timed loop to ensure not timing issue ...no difference

                }

                </script>

                </head>

                <body onload='pageLoaded()'>

                <table>

                     <tr>

                          <td><img src='Beds2_N.svg' style='width:64px; height:64px'></td>          // displayed OK

                     </tr><tr>

                          <td id='IconCell'></td>                    // Image displayed above is #6 in array - does NOT display (along with 20 others)

                     </tr>

                </table>

                </body>

                </html>

                 

                Question now is what can I get done about it? - do you know how to submit a Bug Report to Adobe / Phonegap team?

                • 5. Re: SVG images not showing
                  kerrishotts Adobe Community Professional

                  You can file issues here:

                   

                  Apache Cordova - ASF JIRA

                   

                  I don't think this is a PhoneGap issue, though. It might be an issue with either the desktop or developer app, though.

                   

                  Would you mind sharing your simplified app bundle and SVG files so that I can test?

                  • 6. Re: SVG images not showing
                    ianhowse Level 1

                    Hi Kerri,

                     

                    If you want a laugh, check out this thread -

                    Not all Images display in Phonegap

                     

                    I also posed this query on that forum and it bought the extent of my stupidity to light - stupidity and ignorance about the difference between Phonegap Desktop / App and Phonegap Build - an ignorance I put squarely at the feet of Adobe and their appalling documentation and total disregard of newbies like me.

                     

                    As I said in part of that post sequence, I despair at how much time is wasted by developers and really helpful people like yourself in answering the same questions over and over - unbelievable!

                     

                    Thanks for your assistance and I greatly appreciate your interest