Android SVG display issue

Question

Im building an app via Phonegap and decided to use SVG icons in the tabbar instead of PNG.

I've managed to get them working and looking good in iOS, just tested in Android and they dont show up at all.

I read that SVG isnt supported in Android 2+ but is in 3+ - My test device is a Samsung S2 running 4.1.2 so I'd expect them to show up?

Heres the inline SVG and the CSS to color them.

SVG:

<a href="#view-3" class="tab-link">
                <svg version="1.1" id="Cabs" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                     width="38px" height="38px" viewBox="0 0 38 38" enable-background="new 0 0 38 38" xml:space="preserve">
                <path id="Cab" fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" d="M36,35.004C36,35.555,35.568,36,35.035,36
                    H2.965C2.432,36,2,35.555,2,35.004V2.994C2,2.445,2.432,2,2.965,2h32.07C35.568,2,36,2.445,36,2.994V35.004z"/>
                <g id="Logo">
                    <path d="M22.057,18.429c0.008-0.221,0.033-0.38,0.081-0.488c0.048-0.105,0.147-0.157,0.299-0.157h0.008
                        c0.253,0,0.379,0.187,0.379,0.563v0.203h-0.387h-0.368C22.068,18.494,22.064,18.455,22.057,18.429 M22.437,19.273h1.468V18.16
                        c0-0.241-0.061-0.444-0.186-0.613c-0.125-0.165-0.291-0.287-0.506-0.364c-0.213-0.082-0.456-0.122-0.729-0.122h-0.048
                        c-0.974,0.018-1.464,0.446-1.464,1.3v1.649c0.015,0.38,0.151,0.667,0.417,0.848c0.255,0.184,0.604,0.273,1.047,0.277h0.034
                        c0.301,0,0.556-0.052,0.767-0.151c0.207-0.104,0.364-0.255,0.472-0.45c0.109-0.195,0.161-0.433,0.161-0.705
                        c0-0.018,0-0.04-0.004-0.069c-0.004-0.03-0.004-0.052-0.004-0.07h-1.079c0,0.243-0.022,0.417-0.065,0.517
                        c-0.042,0.095-0.134,0.146-0.281,0.15h-0.018c-0.104-0.01-0.186-0.043-0.247-0.104c-0.063-0.062-0.094-0.139-0.104-0.242v-0.737
                        H22.437z"/>
                    <path d="M20.259,17.447c-0.086-0.117-0.195-0.209-0.332-0.272c-0.14-0.066-0.287-0.096-0.442-0.096
                        c-0.181,0-0.347,0.048-0.494,0.144c-0.147,0.095-0.265,0.237-0.351,0.432v-0.49h-1.014v3.851h1.083v-2.757
                        c0-0.098,0.03-0.171,0.089-0.223c0.058-0.052,0.131-0.071,0.217-0.071c0.095,0,0.165,0.03,0.213,0.089
                        c0.048,0.062,0.068,0.135,0.068,0.217v2.746h1.082v-3.175C20.38,17.694,20.342,17.562,20.259,17.447"/>
                    <path d="M15.925,19.807c-0.012,0.177-0.05,0.311-0.125,0.402c-0.07,0.087-0.159,0.129-0.267,0.129h-0.01
                        c-0.107,0-0.199-0.029-0.276-0.096c-0.074-0.063-0.118-0.147-0.125-0.247c0-0.129,0.021-0.236,0.06-0.322
                        c0.04-0.088,0.096-0.157,0.165-0.217c0.048-0.04,0.108-0.078,0.177-0.114c0.036-0.021,0.074-0.04,0.114-0.056
                        c0.121-0.056,0.215-0.1,0.289-0.129V19.807z M17.008,20.677v-2.489c0-0.312-0.069-0.56-0.213-0.741
                        c-0.026-0.036-0.06-0.069-0.094-0.105c-0.082-0.074-0.195-0.133-0.342-0.181c-0.213-0.065-0.49-0.1-0.836-0.1h-0.004
                        c-0.312,0.004-0.576,0.056-0.79,0.147c-0.446,0.199-0.671,0.589-0.671,1.177h0.671h0.425c0-0.215,0.032-0.37,0.096-0.458
                        c0.058-0.074,0.147-0.117,0.272-0.125c0.022-0.004,0.044-0.004,0.066-0.004c0.089,0,0.173,0.038,0.239,0.122
                        c0.068,0.082,0.098,0.177,0.098,0.285c0,0.087-0.03,0.169-0.089,0.247c-0.062,0.082-0.147,0.133-0.261,0.165l-0.052,0.012
                        c-0.129,0.044-0.294,0.096-0.498,0.166c-0.108,0.034-0.208,0.074-0.296,0.111c-0.095,0.044-0.177,0.088-0.247,0.136
                        c-0.14,0.089-0.247,0.215-0.329,0.376s-0.129,0.364-0.133,0.615c0,0.237,0.043,0.442,0.133,0.611
                        c0.091,0.167,0.213,0.297,0.364,0.38c0.068,0.04,0.137,0.07,0.211,0.086c0.092,0.026,0.188,0.04,0.284,0.04
                        c0.177,0,0.345-0.034,0.51-0.111l0.018-0.01c0.173-0.082,0.311-0.199,0.424-0.351l0.065,0.338h0.329h0.436h0.309
                        C17.042,20.85,17.008,20.736,17.008,20.677"/>
                    <polygon points="12.547,19.983 12.296,19.983 12.296,15.858 12.105,15.858 11.344,15.858 11.076,15.858 11.076,21.015 
                        11.344,21.015 12.105,21.015 12.547,21.015 13.768,21.015 13.768,19.983   "/>
                    <path d="M28.601,22.484c0,0.197-0.159,0.356-0.354,0.356H9.801c-0.197,0-0.356-0.159-0.356-0.356v-6.909
                        c0-0.197,0.159-0.356,0.356-0.356h18.445c0.195,0,0.354,0.16,0.354,0.356V22.484z M28.179,14.882H9.821
                        c-0.394,0-0.715,0.319-0.715,0.715v6.805c0,0.395,0.321,0.715,0.715,0.715h18.357c0.395,0,0.715-0.32,0.715-0.715v-6.805
                        C28.894,15.201,28.573,14.882,28.179,14.882"/>
                    <path d="M26.048,17.164l-0.386,2.499H25.65l-0.364-2.499h-1.1l0.845,3.863c0.016,0.137,0.025,0.225,0.025,0.25
                        c0,0.074-0.031,0.126-0.092,0.17c-0.06,0.04-0.125,0.06-0.203,0.06c-0.018,0-0.033-0.004-0.056-0.008
                        c-0.021,0-0.044-0.004-0.065-0.012c-0.018-0.005-0.044-0.011-0.063-0.015c-0.024-0.004-0.04-0.008-0.054-0.008v0.822
                        c0.117,0.012,0.257,0.022,0.424,0.022c0.048,0,0.109,0,0.188-0.007c0.069,0,0.121-0.004,0.151-0.004
                        c0.159-0.023,0.303-0.081,0.42-0.155c0.121-0.073,0.229-0.199,0.328-0.38c0.096-0.178,0.186-0.43,0.255-0.749l0.818-3.851H26.048z"
                        />
                </g>
                </svg>
            </a>

CSS:

/* -------- CABS TAB --------*/

#Cabs #Logo {fill : #FFF;}
#Cabs #Cab {fill : transparent; stroke : #FFF;  }

.active #Cabs #Logo {fill : rgba(170, 28, 27, 1);}
.active #Cabs #Cab {fill : #FFF; stroke : #FFF;}

Heres what they look like in iOS:

enter image description here

In Android the tabbar is blank, just the red background..

Im new to SVG so not sure what Android isn't happy about?

EDIT: After some more investigation I added an svg via the Object and img tag - both these displayed - but using this method I cannot access the css elements inside to style them. But at least this shows the my device does support SVG so I guess there is an issue with the inline SVG above?

Thanks

possible duplicate of [Having issue on Real Device using vector image in android. SVG-android](http://stackoverflow.com/questions/18356098/having-issue-on-real-device-using-vector-image-in-android-svg-android) — Sinister Beard, Nov 12 '14 at 10:12
Just had a read of that... looking at the Android Dev guidelines it says "Hardware acceleration is enabled by default if your Target API level is >=14" My app target API is already set to 14. http://developer.android.com/guide/topics/graphics/hardware-accel.html — MarkL, Nov 12 '14 at 10:16
That issue linked by BFDatabaseAdmin only applies when using one of the external SVG rendering libraries. It doesn't apply when using a browser. There is nothing obviously wrong with your SVG. Try using a really simple SVG. The one you posted in the previous comment isn't exactly that simple. Try one without `` and ``. — Paul LeBeau, Nov 12 '14 at 15:13

score 3 · Answer 1 · answered Nov 14 '14 at 14:24

3

After much head scathing it turns out this was a css issue.

Android 4.1.2 should and does support SVG - I had some css saying the svg should be height and width 100% - and this made them disappear. I changed to a pixel height and width and they showed up fine!

answered Nov 14 '14 at 14:24

MarkL

109
1
14

I just encountered this issue using containing divs with no dimensions set. My conjecture is that the SVG's containing div MUST have static measurements for Android 4.1.2. Also thanks, this comment probably saved me several hours. – Sterling Nelson Apr 14 '17 at 18:40

score 2 · Answer 2 · answered Nov 24 '16 at 12:43

This seems to be an Android 4.1.2 (maybe whole Jellybean) issue only. At least I had a similar problem just now.

Some elements of a SVG were missing. So I investigated. The missing parts had all one thing in common: They were placed in a <g>-tag. So I tried removing all <g>-tags with the result that the whole SVG was missing afterwards.

Seems like <g>-tags need to be around <defs>- and <clipPath>-tags, but <polyline>- or <path>-tags inside a <g>-tag will not be displayed.

I know your post is two years old, but maybe someone will find that useful.

score 0 · Answer 3 · answered Nov 19 '15 at 14:30

0

I was just about to scrap using SVG, I'm using RaphaelJS to render an image to 100%, and setting to pixel value and it appeared!

pupil.paper.setSize('250px', '250px');

answered Nov 19 '15 at 14:30

Adam Maloney

525
4
12

Android SVG display issue

3 Answers3