Developers Club geek daily blog

2 years, 9 months ago
Vectorization, small bug and seven-stylish crutchJust I found a solution of a strange bug which pursued me the whole week. This small epic made such impression on me that I decided to share it with community. The error which I found, perhaps is present only at my firmware and most likely will never affect you. Unless you decide to do to Cordova/PhoneGap/HTML5 the application with vector graphics for Windows Phone 8.1


Urged developers to do to Microsoft mobile a Windows application on HTML5 and PhoneGap nearly four years ago in particular.
When I needed to try something new to me this appeal was remembered …

In new so in new I solved and began to rewrite the old application on JS. As Cordova (so and PhoneGap) support iOS and Android where recently resolutions of screens stepped over a level in 4K, I decided to transfer all graphics from the application (and it is almost all content) to a vector. It is necessary to think of the future and after Microsoft Store to try to return to Google Play.

Interesting note

If the illustrator who undertook to vectorize your content writes to SVG that it can in a vector perhaps uses SAI and does not suit you.

There is no sense to write what to program and impose under IE. I will only notice that IE in WebView not always behaves as normal mobile IE, and that behaves not always as Stanalone IE 9 on which recommend to test content. Skilled developers will think that I faced very interesting behavior of the browser because of the starting XML tag or I want to complain of lack of native support of svg in WP, but it not so; you can take away cursors from the button reducing my karma so far.

Interesting note

If the illustrator who undertook to vectorize your content after an advance payment published in VK the photo with a hookah, most likely content will be ready not soon.

It is a little about vectorization

Before I decided to vectorize content, it seemed to me that a vector it only for icons and quality vector graphics somewhere in the far future. It turned out that there is a set of programs for automatic vectorization. Thanks to algorithms of Vector Magic can adequately vectorize even a photo! It seemed to me magic, but slightly and did not bring. Programmatically vektorizovanny pictures weighed just indecently much and their display just hung up the smartphone. I nearly refused a vector, but I had enough mind to try to use the graphics created manually.
Vectorization, small bug and seven-stylish crutch

VectorMagick Manual vectorization The original (it is compressed with losses)
> 1.4mb 75kb 74.1kb

Comments are excessive.

Interesting note

If the illustrator who undertook to vectorize your unpretentious picture sends you SVG to several megabyte, you should check existence of the files which are built in SVG png (image tag) or to suspect him of automatic vectorization.

To my regret completely to leave from bitmap graphics it did not turn out. It had to be used for creation of blurring effect. (svg allows to integrate into itself png) Nevertheless, I managed to win strongly application weight
Android + PNG (it is compressed with losses) PhoneGap + SVG (manual vectorization)
~ 24mb ~ 7mb

It is caused by a large number of the black-and-white graphics consisting of geometrical figures. Though of course it was necessary to refuse some graphic effects completely because of labor costs on their implementation in a vector.

Actually bug

After work of the illustrator I had on hands several multilayer AI files. Each layer represented the changed previous layer. (something like that)
The application means many SVG where each SVG is a separate layer from AI. At me the interesting situation turned out:
  • If I displayed SVG of any high layer, everything was displayed adequately.
  • If I displayed SVG of other layer, in PhoneGap on WP 8.1 steadily nothing was displayed. (actually periodically the bug was shown in Android PhoneGap with old WebView)

First of all, I tried to save "problem" layers in different configurations. But it did not help in any way: images all were also not displayed. Then I decided to rummage in text submission of SVG files and to change them manually, trying to find patterns.

Obvious note

To edit the optimized SVG files in text form — bad idea.

And here what I found:
  • If to add styles of the HIGH layer to the Neverkhny layer, then the picture will begin to be displayed.

It looked approximately so:
The high layer in the form of the SVG file (is displayed)
<svg id="lesson_2_7" data-name="lesson 2 7" xmlns="" xmlns: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 the high layer in the form of the SVG file (is not displayed)
<svg id="lesson_2_5" data-name="lesson 2 5" xmlns="" viewBox="0 0 686 526"><defs><style>.cls-1{fill:#fff;}.cls-2{fill:#fff7f7;}</style> ...

Not the high layer in the form of the SVG file + (is displayed) by style from a high layer
<svg id="lesson_2_5" data-name="lesson 2 5" xmlns="" 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> ...

Having considered that the optimizer of SVG deletes some styles in low layers, I began to look for the absent styles in "problem" files. They were not; besides, I was confused by the file at which any of layers was not displayed, but then I carried it to compatibility errors.

It was necessary to ask the illustrator to make a set of samplers with different options of settings of export. After ten another combinations, I tried to open images via the built-in browser, but not PhoneGap the application: they perfectly opened. Then I decided to expand test selection of files. It provided to me new food for thought:

  • ai the file at which any of layers was not displayed was added
  • ai the file at which layers were displayed since 5 was added (from 7)

Having remembered all the knowledge from couples of Software testing and game in Jenga, I began to delete by the piece styles, trying to find the buried dog. After cls-7 style annihilation the picture ceased to be displayed in the application. Of course, I returned cls-7 and deleted cls-6: the picture was gone. Tried to replace cls-7 with the copy of cls-6: the picture was displayed. Replaced all styles except cls-1 and cls-2 with a set of baby's dummies of cls-0 { fill:#fff; }: the picture was displayed.

It took me week. In PhoneGap a Windows application of Phone 8.10.14234.375 (Lumia 435 DS) image SVG which have less than seven styles are not displayed. As a result, or the illustrator has to add invisible multi-colored points, or I have to write a script which will analyze the file and to add to it "empty" styles if necessary. End.

P.S. For complete confidence I asked the illustrator to draw to astrakhan fur (2 styles).
It was not displayed. Probably, too boring …

Interesting note

If the illustrator peresokhranyat the same file day after day, this is the good illustrator. Thanks for understanding, Vasilis.

This article is a translation of the original post at
If you have any questions regarding the material covered in the article above, please, contact the original author of the post.
If you have any complaints about this article or you want this article to be deleted, please, drop an email here:

We believe that the knowledge, which is available at the most popular Russian IT blog, should be accessed by everyone, even though it is poorly translated.
Shared knowledge makes the world better.
Best wishes.

comments powered by Disqus