SVG not displaying properly on Android 4.x native browser

Question

This what SVGs should look like

And this is what SVGs look like on Android 4 native browser on a Samsum Galaxy S3

This is how they are embedded in the page

.petal  {

  -webkit-mask-image:url(../images/petal.svg);
  -webkit-mask-size: 100%;
  background-color:#fff;

  -webkit-transform-origin:50% 130%;
  -webkit-animation:petal-pulse .95s infinite linear;

}

Any idea how it could be fixed ?

Update: SVG

<svg xmlns="http://www.w3.org/2000/svg" width="116.448" height="200"><style type="text/css"><![CDATA[path{fill:none}.outline{stroke:#00568F;stroke-width:3.5;stroke-miterlimit:10}.fat{stroke-width:7}]]></style><path d="M43.25 18.923c4.441-6.302 9.258-9.885 14.321-9.885 5.025-.004 9.816 3.534 14.229 9.76 3.45-3.915 6.936-6.533 10.395-7.61-7.285-4.019-15.658-6.319-24.575-6.319-8.965 0-17.388 2.335-24.708 6.4 3.443 1.123 6.908 3.736 10.338 7.654z"/><path class="outline" d="M71.799 18.798c-4.413-6.226-9.204-9.765-14.229-9.76-5.062 0-9.879 3.583-14.321 9.885 4.909 5.612 9.712 13.898 14.23 24.331 4.538-10.516 9.377-18.844 14.32-24.456z"/><path class="outline" d="M71.799 18.798c4.335 6.104 8.281 14.895 11.704 25.829 4.728-8.408 9.503-15.25 14.182-20.234-4.219-5.369-9.469-9.882-15.491-13.205-3.459 1.078-6.944 3.696-10.395 7.61z"/><path class="outline" d="M68.816 76.342c4.705-12.085 9.654-22.765 14.688-31.714-3.423-10.934-7.369-19.726-11.704-25.829-4.943 5.612-9.782 13.939-14.32 24.456 4.085 9.422 7.905 20.569 11.336 33.087z"/><path class="outline" d="M43.25 18.923c-3.429-3.918-6.894-6.532-10.339-7.654-6.044 3.356-11.308 7.922-15.525 13.35 4.678 5.006 9.447 11.859 14.18 20.267 3.415-10.973 7.355-19.817 11.684-25.963z"/><path class="outline" d="M46.179 76.376c3.416-12.531 7.229-23.689 11.301-33.123-4.518-10.433-9.321-18.719-14.23-24.331-4.329 6.146-8.268 14.99-11.685 25.962 4.999 8.901 9.928 19.505 14.614 31.492z"/><path class="outline" d="M31.565 44.886c-4.733-8.407-9.502-15.26-14.18-20.267-5.626 7.237-9.37 16.007-10.423 25.603 5.606 8.07 11.294 17.646 16.892 28.49 2.071-12.692 4.678-24.083 7.711-33.826z"/><path class="outline" d="M19.783 113.863c.921-12.49 2.294-24.276 4.071-35.151-5.598-10.844-11.286-20.419-16.892-28.49-.202 1.852-.327 3.727-.327 5.63 0 15.453 2.105 30.24 5.347 44.071"/><path class="outline" d="M46.179 76.376c-4.686-11.988-9.614-22.592-14.614-31.491-3.033 9.743-5.64 21.134-7.71 33.826 5.027 9.726 9.949 20.43 14.662 31.938 2.203-12.229 4.782-23.717 7.662-34.273z"/><path class="outline" d="M33.888 142.3c1.247-10.959 2.802-21.542 4.629-31.65-4.713-11.508-9.635-22.212-14.662-31.938-1.777 10.875-3.15 22.661-4.071 35.151"/><path class="outline" d="M68.816 76.342c-3.431-12.518-7.251-23.665-11.336-33.088-4.072 9.433-7.885 20.592-11.301 33.123 4.008 10.269 7.821 21.514 11.335 33.547 3.5-12.044 7.298-23.303 11.302-33.582z"/><path class="outline" d="M49.664 140.655c2.37-10.674 5.006-20.943 7.85-30.731-3.514-12.033-7.327-23.278-11.335-33.548-2.879 10.555-5.459 22.044-7.662 34.273 3.897 9.51 7.633 19.548 11.147 30.006z"/><path class="outline" d="M44.505 167.272c1.2-7.216 2.531-14.535 4.113-22.01.329-1.561.705-3.06 1.046-4.607-3.514-10.458-7.25-20.496-11.147-30.006-1.827 10.108-3.382 20.691-4.629 31.65"/><path class="outline" d="M11.982 99.923c1.994 8.53 4.42 16.659 7.132 24.321.181-3.515.412-6.958.669-10.381"/><path class="outline" d="M19.783 113.863c-.257 3.423-.488 6.866-.669 10.381 4.127 11.685 8.812 22.211 13.441 31.315.244-2.836.467-5.653.768-8.532.167-1.598.384-3.137.565-4.728"/><path class="outline" d="M33.888 142.3c-.181 1.591-.398 3.13-.565 4.728-.3 2.879-.523 5.696-.768 8.532 3.765 7.405 7.467 13.944 10.73 19.242.369-2.48.794-5.005 1.22-7.529"/><path class="outline" d="M91.305 78.702c5.619-10.897 11.329-20.515 16.955-28.608-1.088-9.641-4.873-18.455-10.575-25.701-4.679 4.985-9.454 11.827-14.182 20.234 3.069 9.795 5.704 21.278 7.802 34.075z"/><path class="outline" d="M76.568 110.871c4.732-11.593 9.684-22.377 14.737-32.169-2.099-12.797-4.733-24.28-7.802-34.075-5.033 8.949-9.982 19.629-14.688 31.714 2.914 10.629 5.52 22.205 7.753 34.53z"/><path class="outline" d="M100.829 103.752c4.665-15.272 7.78-31.505 7.78-47.9 0-1.949-.133-3.866-.349-5.758-5.626 8.094-11.336 17.711-16.955 28.608 1.77 10.802 3.145 22.507 4.072 34.903"/><path class="outline" d="M95.377 113.605c-.928-12.396-2.303-24.101-4.072-34.903-5.054 9.792-10.005 20.576-14.737 32.169 1.812 10.04 3.374 20.54 4.622 31.408"/><path class="outline" d="M95.377 113.605c.124 1.673.25 3.331.362 5.026 1.848-4.825 3.54-9.802 5.089-14.88"/><path class="outline" d="M81.19 142.279c.181 1.583.397 3.116.563 4.713l.168 1.792c4.825-9.085 9.628-19.256 13.818-30.152-.112-1.695-.238-3.354-.362-5.026"/><path class="outline" d="M68.816 76.342c-4.004 10.279-7.802 21.539-11.302 33.582 2.879 9.858 5.542 20.204 7.934 30.961 3.499-10.465 7.23-20.49 11.12-30.014-2.233-12.325-4.839-23.901-7.752-34.529z"/><path class="outline" d="M81.19 142.279c-1.248-10.868-2.811-21.368-4.622-31.408-3.89 9.523-7.621 19.549-11.12 30.014.328 1.472.689 2.9 1.004 4.386 1.595 7.474 2.935 14.794 4.147 22.002"/><path class="outline" d="M49.664 140.655c.502 1.506 1.032 2.956 1.527 4.476 2.363 7.265 4.455 14.41 6.414 21.466 1.944-7.056 4.043-14.201 6.401-21.466.467-1.437.968-2.816 1.442-4.246-2.392-10.757-5.055-21.103-7.934-30.961-2.844 9.788-5.48 20.057-7.85 30.731z"/><path class="outline" d="M52.167 188.104c1.583-6.994 3.41-14.182 5.438-21.508-1.959-7.056-4.05-14.201-6.414-21.466-.495-1.52-1.025-2.97-1.527-4.476-.341 1.548-.718 3.047-1.046 4.607-1.582 7.475-2.913 14.794-4.113 22.01"/><path class="outline" d="M66.452 145.271c-.314-1.485-.676-2.914-1.004-4.386-.475 1.43-.976 2.81-1.442 4.246-2.357 7.265-4.457 14.41-6.401 21.466 1.429 5.172 2.762 10.276 3.975 15.288 2.285-3.235 4.976-7.222 7.946-11.893.348-.899.718-1.812 1.073-2.72-1.213-7.208-2.553-14.528-4.147-22.001z"/><path class="outline fat" d="M57.619 4.869c-28.158 0-50.983 22.832-50.983 50.983 0 74.868 47.895 135.542 47.895 135.542s54.079-66.634 54.079-135.542c-.001-28.151-22.833-50.983-50.991-50.983z"/></svg>

Answer 1

Although android supports svg from version 3.0+ (http://caniuse.com/svg), it supports a

subset of the SVG Basic 1.1

according to SVG parsing and rendering for Android tutorial, (which actually talks about the android SVG library).

If you jump to the How to prepare your vector images section, you'll see a list of the features of SVG Basic that are not supported, e.g. animation, and advice for saving to the SVG Basic 1.1 profile.

The SVG profile, or possible use of unsupported features, could be the cause of your problem.

Answer 2

In the event you're still fighting this a year and a half later (or if somebody else chasing a similar bug comes here):

I recently had an issue where the native browser on the Samsung Galaxy S3 was unable to properly handle a .svg image. (In my case, it was refusing to resize a background image which; the background image in question was a sprite sheet, so that was a problem.) My solution was to convert the .svg to a .png and use that instead. I'd definitely advise anybody chasing similar issues on the S3 to not use .svg images if possible.

Answer 3

I would suggest trying a couple of things:

Try simplifying the CSS.

• remove the CDATA tags
• add some space or newlines between the rules

Some SVG parsers have trouble with dense path defs. So try simplifying them a bit also:

• Spaces before negative coords: "c4.441-6.302" -> "c4.441 -6.302"
• Zeros before fractions: "19.242.369-2.48.794-5.005" -> "19.242 0.369 -2.48 0.794 -5.005"