Vikas Kumar Vikas Kumar - 2 months ago 11
CSS Question

Why isn't SVG and Text rendering on Windows Phone browsers?

The problem is with my blog My Blog If you open it on desktop browser, the Logo SVG Icon and Text PORTFOLIO render fine, as I want. But when I open this blog on any Mobile browser, neither SVG nor PORTFOLIO are displayed.

Screenshots of Mobile site opened in different Mobile browsers of Windows Phone:


  1. UC Browser



UC Browser


  1. Google Search (An app by Google Inc.)



enter image description here


  1. Explorer



enter image description here

It might be possible that Mobile browsers don't support SVG but why isn't PORTFOLIO being displayed?

Is it possible that SVG code has markup mistakes? I just saved it from Illustrator.

Here's the code (please do Inspect Element on My blog to get more details):

<div class='titlewrapper'><div id='titleimage'><a href='http://vkcreativework.blogspot.com'>
<svg style='enable-background:new 0 0 376.8 442;' version='1.1' viewBox='0 0 376.8 442' x='0px' xml:space='preserve' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' y='0px'>
<style type='text/css'>
.st0{display:none;fill:#00A99D;}
.st1{enable-background:new ;}
.st2{fill:#2A2A2A;}
.st3{clip-path:url(#SVGID_2_);enable-background:new ;}
.st4{fill:#313131;}
.st5{fill:#FEFEFE;}
.st6{clip-path:url(#SVGID_4_);enable-background:new ;}
</style>
<g id='Layer_2'>
<rect class='st0' height='563' width='654' x='-126.8' y='-42'/>
</g>
<g id='Layer_4'>
<g>
<g>
<g>
<g class='st1'>
<g>
<rect class='st2' height='152.7' transform='matrix(-0.7069 -0.7073 0.7073 -0.7069 -40.7001 753.0775)' width='2.5' x='134.5' y='308.6'/>
</g>
<g>
<rect class='st2' height='101.8' transform='matrix(-0.7069 -0.7073 0.7073 -0.7069 284.2971 923.7317)' width='2.5' x='332.3' y='352'/>
</g>
<g class='st1'>
<defs>
<path class='st1' d='M261.9,259.2l1.7,1.7c27.4,27.4,102,102.2,106.8,106.9l-1.7-1.7 C363.9,361.3,289.3,286.6,261.9,259.2z' id='SVGID_1_'/>
</defs>
<clipPath id='SVGID_2_'>
<use style='overflow:visible;' xlink:href='#SVGID_1_'/>
</clipPath>
<g class='st3'>
<path class='st4' d='M261.9,259.2l1.7,1.7c27.4,27.4,102,102.2,106.8,106.9l-1.7-1.7C363.9,361.3,289.3,286.6,261.9,259.2'/>
</g>
</g>
<g>
<path class='st5' d='M226.7,237.1c4.6,0,8.8,1,13.2,3.1c4.4,2.1,8.3,5.8,12.1,9c0.3,0.3,111,111.1,116.8,116.9l-72,72 L188.8,330.1L80.8,438.1l-36.9-36.9l136.5-135.8c8.5-8.5,17.4-16,27.4-22.6c4.6-3,9.8-5,15.4-5.5 C224.4,237.1,225.5,237.1,226.7,237.1z'/>
</g>
</g>
</g>
</g>
<g>
<g>
<g class='st1'>
<g>
<polygon class='st2' points='78.6,6.2 80.3,8 80.1,223.9 78.3,222.1 '/>
</g>
<g>
<polygon class='st2' points='155.4,219.4 157.1,221.1 9.9,367.8 8.2,366 '/>
</g>
<g class='st1'>
<defs>
<path class='st1' d='M257.5,190.3l1.7,1.7c-4.1-1.7-7.8-3.1-11.6-4.2c-7.1-2.1-14.4-3.1-21.8-3.1 c-3.4,0-6.7,0.2-10,0.6c-10.8,1.4-21.2,5-30.5,10.7c-8.3,5-15.2,11.8-22,18.7c-2.1,2.1-4.1,4.2-6.2,6.3l-1.7-1.7 c2.1-2.1,4.1-4.2,6.2-6.3c6.8-6.9,13.8-13.7,22-18.7c9.3-5.6,19.7-9.3,30.5-10.7c3.3-0.4,6.7-0.6,10-0.6 c7.4,0,14.7,1,21.8,3.1C249.7,187.2,253.4,188.6,257.5,190.3z' id='SVGID_3_'/>
</defs>
<clipPath id='SVGID_4_'>
<use style='overflow:visible;' xlink:href='#SVGID_3_'/>
</clipPath>
<g class='st6'>
<path class='st4' d='M257.5,190.3l1.7,1.7c-4.1-1.7-7.8-3.1-11.6-4.2c-7.1-2.1-14.4-3.1-21.8-3.1c-3.4,0-6.7,0.2-10,0.6 c-10.8,1.4-21.2,5-30.5,10.7c-8.3,5-15.2,11.8-22,18.7c-2.1,2.1-4.1,4.2-6.2,6.3l-1.7-1.7c2.1-2.1,4.1-4.2,6.2-6.3 c6.8-6.9,13.8-13.7,22-18.7c9.3-5.6,19.7-9.3,30.5-10.7c3.3-0.4,6.7-0.6,10-0.6c7.4,0,14.7,1,21.8,3.1 C249.7,187.2,253.4,188.6,257.5,190.3'/>
</g>
</g>
<g>
<polygon class='st2' points='368.7,78.2 370.5,79.9 259.2,192 257.5,190.3 '/>
</g>
<g>
<path class='st5' d='M296,6.2l72.8,72L257.5,190.3c-4.1-1.7-7.8-3.1-11.6-4.2c-7.1-2.1-14.4-3.1-21.8-3.1 c-3.4,0-6.7,0.2-10,0.6c-10.8,1.4-21.2,5-30.5,10.7c-8.3,5-15.2,11.8-22,18.7c-2.1,2.1-4.1,4.2-6.2,6.3L8.2,366L7.6,78.2 l71-72l-0.3,215.9L296,6.2z'/>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
<span id='titletext'>PORTFOLIO</span></a>
</div>

Answer

I noticed that for your SVG logo, you have only specified a width. IE has scaling issues if you don't specify both a width and a height. So try adding a value for height and see if that makes a difference.

I don't know much about the UC Browser. I couldn't find any definitive information on whether it supports SVG or not. One page I found said it didn't and another said it did. I don't know what engine it uses on WP either. If it uses the IE engine, then it could be affected by the same issue.