Mobile app version of vmapp.org
Login or Join
Lee3735518

: Linear gradient not exported as SVG correctly in Sketch So I am exporting my design as SVG but a few linear gradients show up funny, as shown in the picture below. I tried changing the gradients

@Lee3735518

Posted in: #SketchApp #Svg

So I am exporting my design as SVG but a few linear gradients show up funny, as shown in the picture below. I tried changing the gradients opacity, as well as flattening the shapes without any luck.



Here is the exported SVG code

<svg width="249px" height="146px" viewBox="0 0 249 146" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 43.2 (39069) - www.bohemiancoding.com/sketch -->
<desc>Created with Sketch.</desc>
<defs>
<linearGradient x1="0%" y1="14.1002468%" x2="100%" y2="64.4481533%" id="linearGradient-1">
<stop stop-color="#819383" offset="0%"></stop>
<stop stop-color="#829185" stop-opacity="0.489555027" offset="38.0680677%"></stop>
<stop stop-color="#9BA09B" stop-opacity="0" offset="100%"></stop>
</linearGradient>
<linearGradient x1="54.8516393%" y1="0%" x2="54.8516393%" y2="100%" id="linearGradient-2">
<stop stop-color="#AABDAA" offset="0%"></stop>
<stop stop-color="#A9B6A5" stop-opacity="0.50634058" offset="27.0793972%"></stop>
<stop stop-color="#AEB9A8" stop-opacity="0" offset="100%"></stop>
</linearGradient>
<linearGradient x1="6.38175446%" y1="50%" x2="92.3484853%" y2="50%" id="linearGradient-3">
<stop stop-color="#D9E3B8" offset="0%"></stop>
<stop stop-color="#BFE1B7" offset="100%"></stop>
</linearGradient>
</defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="ambience" transform="translate(-69.000000, -21.000000)">
<g id="wizard-steps" transform="translate(51.000000, 21.000000)">
<g id="Shadow-Copy" opacity="0.613451087" transform="translate(0.000000, 16.000000)">
<polygon id="path-shade1-copy-5" fill="url(#linearGradient-1)" points="265.974457 112.780333 219 140.972586 219 47.2408342 265.974457 8.4778002"></polygon>
<polygon id="Rectangle" fill="url(#linearGradient-2)" transform="translate(118.860592, 65.697298) rotate(13.000000) translate(-118.860592, -65.697298) " points="6.68338785 25.0352533 212.33822 25.3625773 231.037797 106.359343 25.4038208 106.122357"></polygon>
</g>
<polygon id="path1" fill="url(#linearGradient-3)" points="52.1039436 0.624792979 252.824177 46.9647102 218.720233 63.7680586 18 17.4281414"></polygon>
<g id="stair1" transform="translate(221.000000, 17.000000)">
<polygon id="Rectangle-2-Copy-3" fill="#C7DCBC" points="6.06452847 17.0075938 35.0880855 23.8745496 30.1005884 26.3212155 1.07703134 19.4542597"></polygon>
<polygon id="Rectangle-2-Copy-3" fill="#C7DCBC" points="10.9437275 10.817524 39.8942772 17.6104689 34.9067801 20.0571348 5.95623035 13.2641899"></polygon>
<polygon id="Rectangle-2-Copy-3" fill="#C7DCBC" points="16.0108389 4.91245887 44.9247595 11.7390223 39.9372624 14.1856881 11.0233418 7.35912473"></polygon>
<polygon id="Rectangle-2-Copy-4" fill="#B5C1AD" points="0.942314826 19 30.3128851 25.7807304 30.3162227 30.0806654 0.945652422 23.299935"></polygon>
<polygon id="Rectangle-2-Copy-4" fill="#B5C1AD" points="5.94231483 13 35.3128851 19.7807304 35.3162227 24.0806654 5.94565242 17.299935"></polygon>
<polygon id="Rectangle-2-Copy-4" fill="#B5C1AD" points="10.9423148 7 40.3128851 13.7807304 40.3162227 18.0806654 10.9456524 11.299935"></polygon>
<polygon id="Rectangle-2-Copy-4" fill="#B5C1AD" points="15.3587798 0.633098329 45.1749031 7.48026925 45.1032291 12.0776881 15.3587798 5.23051718"></polygon>
</g>
</g>
</g>
</g>
</svg>


I have sent a bug report to Sketch but haven't heard back from them yet. Any idea how to fix this?

10% popularity Vote Up Vote Down


Login to follow query

More posts by @Lee3735518

0 Comments

Sorted by latest first Latest Oldest Best

Back to top | Use Dark Theme