4

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.

1
  • Why are you using svg???
    – Scott
    Oct 3, 2013 at 14:59

4 Answers 4

6

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" />
</filter>

<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'/>
   </defs>
 <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.

3
  • For every overlaying svgs item do you have to specify a feBlend element in filter? Also +1 for better browser compatibility
    – akst
    Jun 9, 2015 at 16:17
  • I had a look at the spec and looks like the answer to my question is yes.
    – akst
    Jun 9, 2015 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: codepen.io/chriscoyier/pen/tCykv
    – gburning
    Jun 9, 2015 at 16:33
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.

1
  • 2
    SVG actually does support blending modes in the file itself these days. See my answer.
    – gburning
    Jun 9, 2015 at 15:24
2

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;
}

Caveats

  • 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)
2
  • SVG actually does support blending modes in the file itself. See my answer.
    – gburning
    Jun 9, 2015 at 15:24
  • Well you can list it in the file itself as an inline style, will comment on your answer
    – akst
    Jun 9, 2015 at 16:08
2

I got different results when trying to save my SVG using "File > Save As" then when I used "File > Export > Export As...".

No matter which settings I chose in the SVG Save dialog when using "File > Save As", the blend mode wouldn't persist in the saved file (yes, albeit using CSS to set this).

But, when using the "File > Export > Export As...", the save dialog box is different for SVGs, and the exported file contained the correct CSS to show the blend mode, transparency, etc (when using a browser that supports the css blend mode attribute).

Note: Using Illustrator CC 2017

SVG Save Dialog

1
  • THIS is the correct answer. This is a bug in Adobe Illustrator. Adobe Y U NO FIX FOR YEARS?(!), SVG is starting to get popular in web design and if we're expected to pay $600/yr to use this, they should fix such a big issue like this. There is NEVER a case where a designer would want the blend-mode omitted! Jul 3, 2019 at 16:22

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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