: Cannot Save Mesh Effect in SVG Format I designed a vector in Illustrator CC 2015, and some parts have mesh effect. When I tried to save the vector in SVG format, Illustrator exports parts

Posted in: #AdobeIllustrator #GradientMesh

I designed a vector in Illustrator CC 2015, and some parts have mesh effect. When I tried to save the vector in SVG format, Illustrator exports parts with mesh effect as PNG and the rest as vector. I tried fixing it many times and did lots of googling but I wasn't able to find an answer.

Here is the SVG code:

<?xml version="1.0" encoding="utf-8"?>

<svg version="1.1" id="Layer_Remake" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" viewBox="0 0 312 333.6" style="enable-background:new 0 0 312 333.6;" xml:space="preserve">
<style type="text/css">
.st0{fill:#0A2874;}
.st1{fill:#2B94E2;}
.st2{fill:none;}
.st3{fill:#13110B;}
</style>
<path class="st0" d="M9,224.9c0,0-3.7-10.9,2.8-22.7c49.2,12.1,93.3,31.4,137.8,64.5c0,0,0,0,0,0c13.3,10.6,2.3,2.6-17.7-7.9
c-11.2-5.9-23.6-9.6-40.7-16.2C63.2,231.9,9,224.9,9,224.9z"/>
<path class="st0" d="M303.4,224.9c0,0,3.7-10.9-2.8-22.7c-49.2,12.1-93.3,31.4-137.8,64.5c0,0,0,0,0,0c-13.3,10.6-2.3,2.6,17.7-7.9
c11.2-5.9,23.6-9.6,40.7-16.2C249.3,231.9,303.4,224.9,303.4,224.9z"/>
<path class="st1" d="M44.7,177.4l16.2-21.2c0,0,61.2,44.8,94.2,105.5c-11.3-16.3-26.7-37-49.2-57.2c-24.2-21.7-48-37-48-37
L44.7,177.4z"/>
<path class="st1" d="M29.6,203.9l11.5-24c0,0,69,31.5,113.6,84.2c-14.4-13.7-33.6-30.8-59.8-46c-28.1-16.3-54.5-26.5-54.5-26.5
L29.6,203.9z"/>
<path class="st1" d="M282.1,203.9l-11.5-24c0,0-69,31.5-113.6,84.2c14.4-13.7,33.6-30.8,59.8-46c28.1-16.3,54.5-26.5,54.5-26.5
L282.1,203.9z"/>
<path class="st1" d="M64.6,154l20.2-17.4c0,0,50.6,56.5,70.3,122.7c-7.7-18.3-18.4-41.7-36.3-66.1c-19.2-26.2-39.3-46.2-39.3-46.2
L64.6,154z"/>
<path class="st1" d="M246.7,154l-20.2-17.4c0,0-50.6,56.5-70.3,122.7c7.7-18.3,18.4-41.7,36.3-66.1c19.2-26.2,39.3-46.2,39.3-46.2
L246.7,154z"/>
<path class="st1" d="M267,177.4l-16.2-21.2c0,0-61.2,44.8-94.2,105.5c11.3-16.3,26.7-37,49.2-57.2c24.2-21.7,48-37,48-37L267,177.4z
"/>
<polygon class="st2" points="126.4,104.5 120.6,101.2 153.6,88.3 187.7,101.2 182.8,104.5 "/>
<path class="st3" d="M205.1,99l-0.4-0.2l-0.1-23.6l14.1-8.3L157.2,40L98.9,70.2l23.3,13l-1.7,18l5-3.1c17.9-12.6,41-11.7,58.3,1.2
c1.1,0.8,2.7,1,3.7,1.9l3.6-18.1l12.3-7.2l-0.6,0.3l0.1,22.5l-0.9,0.6c-1.3,0.8-1.5,2.7-0.4,3.7l0.6,0.6l-2.7,14.3l0.2,0.2
c2.2,2.3,5.9,2.3,8,0l0.1-0.1l-2.7-14.4C207.1,102.4,207,99.9,205.1,99z"/>
<image style="overflow:visible;" width="140" height="34" xlink:href="9802C82A516EC11A.png" transform="matrix(0.48 0 0 0.48 120.5422 88.3051)">
</image>
<image style="overflow:visible;" width="146" height="146" xlink:href="9802C82A516EC11E.png" transform="matrix(0.48 0 0 0.48 119.6667 90)">
</image>
</svg>

When I save this happens:

I have no idea how to fix this. Besides googling, I tried all the settings in save-panel to see if anything will make it work. Unfortunately nothing worked out.

Thank you.