0

I have an svg which uses mix-blend-mode: multiply. This svg is generated programmatically in the browser using JS.

   <svg ref="svgElement" version="1.1" xmlns="http://www.w3.org/2000/svg" width="500" height="500">
      <circle cx="50" cy="50" r="40" stroke-width="4" fill="green" style="mix-blend-mode: multiply;" />
      <circle cx="75" cy="75" r="40" stroke-width="4" fill="red" style="mix-blend-mode: multiply;" />
      <circle cx="100" cy="50" r="40" stroke-width="4" fill="blue" style="mix-blend-mode: multiply;" />
    </svg>

I can download this svg in the browser and would like to send that svg file to the printer (a professional printing company) but when they open the file in Illustrator or Photoshop etc. the multiply effect is not preserved.

Is there are way to overcome this in the client. I thought perhaps the svg could be flattened. Could this work?

Any help would be greatly appreciated.

Thanks,

Shane G
  • 3,129
  • 10
  • 43
  • 85

1 Answers1

1

You could try recasting this to only use SVG 1.1 capabilties - mix-blend-mode is new and I'm guessing that the Adobe tools don't render this properly yet.

So something like:

   <svg ref="svgElement" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="500" height="500">
   <defs>
      <circle id="circ1"cx="50" cy="50" r="40" stroke-width="4" fill="green"/>
      <circle id="circ2" cx="75" cy="75" r="40" stroke-width="4" fill="red"/>
      
   <filter id="circle-blend" filterUnits="userSpaceOnUse" x="0" y="0" width="500" height="500" color-interpolation-filters="sRGB">
      <feImage xlink:href="#circ1" result="circleInOne"/>
      <feImage xlink:href="#circ2"/>
      <feBlend mode="multiply" in2="circleInOne"/>
      <feBlend mode="multiply" in2="SourceGraphic"/>
   
   </filter>
   </defs>
      
      <circle filter="url(#circle-blend)" cx="100" cy="50" r="40" stroke-width="4" fill="blue"/>
    </svg>
Michael Mullany
  • 30,283
  • 6
  • 81
  • 105
  • Hi thank you for looking at this. Using your svg code I can display and download the file successfully. But when I open it in the browser I get this.... This page contains the following errors: error on line 1 at column 562: Namespace prefix xlink for href on feImage is not defined Below is a rendering of the page up to the first error. Is there any way around this? Thanks – Shane G Jun 13 '19 at 20:22
  • 1
    Ah forgot you were using standalone SVG - you need to declare the xlink namespace - added it to the example – Michael Mullany Jun 13 '19 at 23:33
  • Michael thanks - using this the downloaded svg can be opened in Photoshop (rastor) successfully where the multiply effect displays correctly, but in Illustrator (vector) it doesn't. Next i will convert the svg to a pdf in the client and see if that pdf preserves the multiply mode. Thanks – Shane G Jun 16 '19 at 11:10