Retain Blending Mode after saving to .svg? (Illustrator)

I’m a little new to illustrator.
I designed a little logo in illustrator that comprises of several layers.
Now because I have some of this layers interact with each other different using the blend mode, the image looks alright when I’m working on it in illustrator.

However saving it is a different story, my blending modes are lost and the image is altered.

If it helps I’m using the .SVG format

Much Appreciated.


These answers are not quite correct (at least not anymore). SVG actually does support some blending modes using the feBlend filter. You’ll probably have to edit the actual SVG code of the file though. What you need to do is add a <feBlend> filter.

See this article for more info:

SVG Blend Modes

As you might suspect, SVG does have its own mechanism for doing this.
One way to do it is to define it within the <svg> itself, and it’s
fairly complicated:

<filter id="f1" x="0" y="0" width="1" height="1">
  <feImage xlink:href="#p1" result="p1"/>
  <feImage xlink:href="#p2" result="p2"/>
  <feBlend mode="multiply" in="p1" in2="p2" />

<path id="p1" d='M100 100 L200 100 L200 200 L100 200 Z' fill='#00FFFF'/>
<path id="p2" d='M150 150 L250 150 L250 250 L150 250 Z' fill='#CC3300'/>
 <rect width="100%" height="100%" filter="url(#f1)"/>    </svg>

This method is supported in most browsers except for IE >9 and Android Browser >4.4.

Source : Link , Question Author : FrostLeopard , Answer Author : gburning

Leave a Comment