Vectorization, small bug and seven-crutch

I just found a solution to a strange bug that has been haunting me for a week. This little epic made such an impression on me that I decided to share it with the community. The error that I discovered is probably present only in my firmware and, most likely, it will never affect you. Is that what you decide to do Cordova / PhoneGap / HTML5 application with vector graphics for Windows Phone 8.1

Interlude

Almost four years ago, Microsoft called on developers to make mobile applications for Windows on HTML5 and PhoneGap in particular.
When I needed to try myself in something new , I remembered this call ...

“In the new, in the new,” I decided, and began to rewrite my old application in JS. Since Cordova (and therefore PhoneGap) support iOS and Android, where recently screen resolutions have crossed the bar in 4K, I decided to transfer all graphics from the application (and this is almost all content) to vector. After all, you need to think about the future and after Microsoft Store try to return to Google Play.
')

Interesting note

If the illustrator, who took to vectorize your content in SVG, writes that he can into a vector - perhaps he uses SAI and does not suit you.

It makes no sense to write what it is to program and impose under IE. I just note that IE in WebView does not always behave like a normal mobile IE, but it doesn’t always behave like Standalone IE 9 on which it is recommended to test content. Experienced developers will think that I am faced with a very interesting behavior of the browser due to the XML start tag or I want to complain about the lack of native support for svg in WP, but this is not the case; You can still move the cursors from the button, which reduces my karma.

Interesting note

If the illustrator, who undertook to vectorize your content after the prepayment, has published his photo with a hookah in VK - most likely, the content will not be ready soon.

Little about vectorization

Before I decided to vectorize the content, it seemed to me that the vector was for icons only, and high-quality vector graphics somewhere in the distant future. It turned out that there are many programs for automatic vectorization. Thanks to algorithms, Vector Magic can adequately vectorize even a photo! It seemed to me magic, but almost did not let down. Programmatically vectorized pictures weighed just indecently and their display just hung up the smartphone. I almost gave up the vector, but I was smart enough to try using hand-made graphics.

VectorMagic	Manual vectorization	Original ( lossy compressed )
> 1.4mb	75kb	74.1kb

Comments are superfluous.

Interesting note

If an illustrator who took to vectorize your simple picture sends you a SVG of several megabytes, you should check for the presence of embedded files in the SVG png (image tag) or suspect it of automatic vectorization.

To my regret, to completely get away from the raster graphics did not work. It had to be used to create a blur effect. (svg allows you to integrate png) However, I managed to win a lot of weight applications

Android + PNG ( lossy compressed )	PhoneGap + SVG (manual vectorization)
~ 24mb	~ 7mb

This is due to the large number of black and white graphics, consisting of geometric shapes. Although, of course, some graphic effects had to be completely abandoned due to labor costs for their implementation in the vector.

Actually a bug

After the work of the illustrator, I was in the hands of several multi-layer AI files. Each layer was a modified previous layer. ( something like that )
The application involves a lot of SVG, where each SVG is a separate layer from the AI. I got an interesting situation:

• If I displayed the SVG of any top layer, everything was displayed adequately.
  
• If I displayed the SVG of another layer, nothing stably appeared on PhoneGap on WP 8.1. (in fact, from time to time a bug manifested itself in Android PhoneGap with the old WebView)

First of all, I tried to save the “problem” layers in different configurations. But this did not help: the images were still not displayed. Then I decided to delve into the textual representation of SVG files and change them manually, trying to find patterns.

Obvious note

Editing optimized SVG files as text is a bad idea.

And that's what I found:

• If you add the styles of the TOP layer to the non-top layer, the picture will start to be displayed.

It looked like this:
Top layer as SVG file (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> ... 

Not top layer as SVG file (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> ... 

Not top layer as SVG file + style from top layer (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> ... 

Considering that the SVG optimizer removes some styles in the lower layers, I began to look for the missing styles in the “problem” files. They were not there; In addition, I was confused by the file that did not display any of the layers, but then I attributed this to compatibility errors.

I had to ask the illustrator to make a set of probes with different options for exporting. After a dozen other combinations, I tried to open the images through the built-in browser, not the PhoneGap application: they opened perfectly. Then I decided to expand the test file selection. This gave me new food for thought:

• Added ai file that did not display any of the layers
• Added ai file whose layers were displayed starting from 5 (out of 7)

Having remembered all my knowledge from the Software Testing and Jenga game pairs, I began to remove styles one by one, trying to find a buried dog. After the cls-7 style was annihilated, the picture ceased to be displayed in the application. Of course, I returned cls-7 and deleted cls-6 : the picture was gone. I tried to replace cls-7 with a copy of cls-6 : the picture was displayed. Replaced all styles except cls-1 and cls-2 with many dummies cls-0 {fill: #fff;} : the image was displayed.

It took me a week. The PhoneGap application for Windows Phone 8.10.14234.375 (Lumia 435 DS) does not display SVG images with less than seven styles. As a result, either the illustrator has to add invisible multi-colored dots, or I have to write a script that will analyze the file and add “empty” styles to it if necessary. The end.

PS For complete confidence, I asked the illustrator to draw astrakhan (2 styles) .
It is not displayed. Probably too boring ...

Interesting note

If the illustrator re-saves the same file day after day, this is a good illustrator. Thank you for your understanding, Vasilisa.