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.

  • Why are you using svg??? – Scott Oct 3 '13 at 14:59
5

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.

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

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

  • 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! – Nick Steele Jul 3 at 16:22

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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