Search code examples
htmlcordovasvgwindows-phone-8.1adobe-illustrator

Some SVGs not displaying in Windows Phone 8.1 (PhoneGap)

Firstly, I know about the problem with the starting XML tag my question not about it.

I have a many multi-layered .ai files (Adobe Illustrator CC 2015 19v) Each layer it is a copy previous layer + some changes. (something similar to this)

  • If I save top layer it is perfectly displayed on all devices. (desktop, android, WP8.1)

  • If I save lower layers it is do not displayed in WP 8.1.

I tried different options are saved, but nothing has changed. This occurs with each .ai file.

Then I decided to explore the text representation of the svg files. If I copy the style from top layer at the nontop, then everything is OK. They are displayed.

Start SVG file TOP LAYER (7/7) - (displayed)

<svg id="lesson_2_7" data-name="lesson 2 7" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 686 526"><defs><style>.cls-1{fill:#fff;}.cls-2{fill:#a2a2a2;}.cls-3{fill:#6c6c6c;}.cls-4{fill:#a9aeb7;}.cls-5{fill:#6f6f6f;}.cls-6{mask:url(#mask);}.cls-7{fill:#adadad;}.cls-8{mask:url(#mask-2);}.cls-9{fill:#46cc00;}.cls-10{fill:#fff7f7;}.cls-11{filter:url(#luminosity-noclip-2);}.cls-12{filter:url(#luminosity-noclip);}</style>

Start SVG file NONTOP LAYER (5/7) - (not displayed)

<svg id="lesson_2_5" data-name="lesson 2 5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 686 526"><defs><style>.cls-1{fill:#fff;}.cls-2{fill:#fff7f7;}</style>

Start SVG file NONTOP LAYER with Style from TOP (5/7) - (displayed)

<svg id="lesson_2_5" data-name="lesson 2 5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 686 526"><defs><style>.cls-1{fill:#fff;}.cls-2{fill:#a2a2a2;}.cls-3{fill:#6c6c6c;}.cls-4{fill:#a9aeb7;}.cls-5{fill:#6f6f6f;}.cls-6{mask:url(#mask);}.cls-7{fill:#adadad;}.cls-8{mask:url(#mask-2);}.cls-9{fill:#46cc00;}.cls-10{fill:#fff7f7;}.cls-11{filter:url(#luminosity-noclip-2);}.cls-12{filter:url(#luminosity-noclip);}</style>

As if not enough styles to display the image. enter image description here

I downloaded the entire SVG for example here.

Someone met similar? I'll be glad to any idea. Perhaps, as need to configure AI for export?

Solution

  • IE in PhoneGap doesn't not render SVG with < 7 styles.