Sign up ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

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.

share|improve this question
Why are you using svg??? – SOIA Oct 3 '13 at 14:59

3 Answers 3

.svg does not support everything that Illustrator has to offer, unfortunately. It might be wise to actually save your files in the native *.ai format to retain everything you did, and export them as *.svg only if you really need to. And yes, that may mean that you lose some effects in the *.svg.

If you want the *.svg to show identically to the *.ai, you should try to apply Object > Epand appearance..., Object > Expand and Object > Flatten transparency to just about everything.

share|improve this answer
SVG actually does support blending modes in the file itself these days. See my answer. – gburning Jun 9 at 15:24

As Vincent already said, illustrator doesn't persist this information when you use SVG as the file format. However you can still set a blend mode to individual SVG elements via the CSS attribute mix-blend-mode attribute, here's an example:

Protip: Illustrator will attach the id attribute to SVG elements with layer names.

#svgLabelName {
  mix-blend-mode: multiply;


  • Currently mix-blend-mode is still just a W3C Candidate Recommendation, so it's unstandardised at the moment, you can read here to find out more about the recommendation. This is likely the reason illustrator doesn't do this automatically.
  • Due to it being unstandardised, it's only supported in a few browser, being Chrome (41), Firefox (32), and Safari (8)
share|improve this answer
SVG actually does support blending modes in the file itself. See my answer. – gburning Jun 9 at 15:24
Well you can list it in the file itself as an inline style, will comment on your answer – ABot Jun 9 at 16:08

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.

share|improve this answer
For every overlaying svgs item do you have to specify a feBlend element in filter? Also +1 for better browser compatibility – ABot Jun 9 at 16:17
I had a look at the spec and looks like the answer to my question is yes. – ABot Jun 9 at 16:24
Well yes, but it's a bit more complicated than that to blend more than two elements. Basically, you have to define the "result" attribute of the previous blend and then use that for the first "in" attribute in your next one. Have a look at this beautiful example: – gburning Jun 9 at 16:33

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.