SVG export transparent layers

[rnick]

I created a logo in AD that I'd like to export as an SVG so it can scale and remain pretty on my website. However, the exported version doesn't look the same as what's visible in the app. Here's a description of the design:

The logo consists of a filled, black, semi-opaque circle (layer 1) with a stylized letter M on top (layer 2). Both of these layers were dragged into a new layer (layer 3). The letter M (layer 2) has the erase blend mode applied so it knocks out a portion of layer 1 in the shape of the letter M. The background and the knocked out M are transparent.

When I export as SVG, the fill color of the letter M reappears, getting rid of the transparency. I've tried haphazardly turning off and on different export settings but haven't found a solution.

BTW, when I export as a PNG-24 it works as expected.

Any thoughts?

[Dan C]

Hi rnick,

Welcome to the forums  

Could you please post a copy of your .afdesign file so I can look into this for you? 

[dutchshader]

this could be because the erase blend mode was used, parts of the svg wil be rasterized and the svg is not scaleable.

it is better to select the ellips and the M and do a boolean subtract.

this will be the result:

m.svg

[rnick]

2 hours ago, dutchshader said:

this could be because the erase blend mode was used, parts of the svg wil be rasterized and the svg is not scaleable.

it is better to select the ellips and the M and do a boolean subtract.

this will be the result:

m.svg

Perfect solution! Thanks!