Is there anything that can read, import or convert CMYK SVG?

Question

Short question: I have SVG files with CMYK colours, specified as according to the SVG specs. I want to get this into a design program - any design program - to finalise the design and prepare it to print. However, I can't find anything that actually pays attention to the CMYK colours in the SVG (not Illustrator or Inkscape, anyway).

The colours are complicated and not easy to just convert: imagine hundreds of shades dynamically generated, as tints and blends of brand-guidelines-specified CMYK that has to be just right.

---

Background: Something that's becoming more common is designing data-driven graphics that are generated from data using javascript and SVG, then, publishing one variant for the web using javascript and SVG, for example via D3 (or via Raphael / D34Raphael for IE support), then using the same code to produce a variant for print, which is finished in Illustrator (or Inkscape) and sent to the printers or layout people as a PDF.

Here's an example from the New York Times graphics blog talking through this workflow. The below graphic was coded for the web, then the SVG was copied from the browser into Illustrator then finalised as a print graphic (for them, the colours are simple so they don't have my problem, they can just convert from the RGB):

SVG can specify CMYK colours (for any SVG coders out there, the syntax looks like this: <circle fill="#CD853F device-cmyk(0.11, 0.48, 0.83, 0.00)"/>). But most design software ignores this. I've seen talk in the Inkscape community of thinking about supporting CMYK SVG, and something complicated involving Scribus ("the open-source InDesign"), but I've not managed to get either to work (I might have misunderstood the Scribus one - edit: this article suggests that Scribus can import CMYK SVG if it defines it as an ICC colour profile... not quite mades sense of it yet but it looks promising).

---

So, I can create code that generates RGB SVG visualisations in 'web mode' and CMYK SVG in 'print mode', dynamically generating colours that are just right. The problem is, I can't do anything with these CMYK SVG files - Illustrator and Inkscape just treat them as black.

Is there any graphics program, plugin or method that can take an SVG image with CMYK shapes and convert it to any vector format (ai,pdf,eps...) where design software will listen to the CMYK colours?

---

Here's a simple SVG file with some text with colours specified in CMYK. Just copy and paste and save as an .svg file.

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" 
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="176.18px"
     height="111.59px" viewBox="0 0 176.18 111.59" enable-background="new 0 0 176.18 111.59" xml:space="preserve">
<switch>
    <g>
        <text transform="matrix(1 0 0 1 31.5986 34.522)" fill="#dddddd device-cmyk(0.00, 0.00, 0.00, 0.60)" font-family="'MyriadPro-Regular'" font-size="12">TEST FILE...</text>
        <text transform="matrix(1 0 0 1 31.5986 59.3633)" fill="#dddddd device-cmyk(0.00, 0.85, 0.65, 0.00)" font-family="'MyriadPro-Regular'" font-size="12">This should be red</text>
        <text transform="matrix(1 0 0 1 31.5986 84.2041)" fill="#dddddd device-cmyk(0.90, 0.55, 0.00, 0.00)" font-family="'MyriadPro-Regular'" font-size="12">This should be blue</text>
    </g>
</switch>
</svg>

Answer 1

This seems to work:

• Install the open source indesign alternative Scribus, Mac and Windows (there's also an official portable version for Windows on sourceforge that doesn't require installation). WARNING: its interface is very confusing... But, it's free and does this particular job, there's only one simple thing we need to use it for.
• Open it up, go to File > Document Setup then Colour Management and set everything CMYK related to Generic CMYK profile - should be three places: colours, solid shapes and print.

• Make sure the SVG files specify their CMYK colours like this: fill="#ffffff icc-color(Generic-CMYK-profile, 1.00, 0.50, 0.00, 0.25)" (where 1.00 = 100%)

  • If the SVG is generated in a browser, browsers don't like setting style data like this. Try first setting the fill attribute directly, and if that doesn't work, try using a custom SVG attribute like data-fill="#223fa3 icc-color..." then find-replace it away in the text file.
  • Don't worry if everything shows up as black in the browser, that's a sign the fill data is there but the browser doesn't understand it - normal. Check with inspect element to be sure.
  • If the SVG is generated by Raphael, set it like element.node.setAttribute( 'fill', '#223fa3 icc-color...' ); - Raphael's .attr('fill','') doesn't seem to apply to the actual element. Also update .attr('fill') if code needs to read that later. Same goes for stroke. Will only work in SVG mode, naturally...
• Import the SVG file into Scribus using File > Import > Get vector
• Export as a PDF (exporting as EPS didn't work for me, it bodged all the colours). Make sure that in the export options it's set to 'CMYK' or 'For printing' or however they phrase it at the moment under the colour management tab - the default seems to be RGB ("For web/screens").
• Open that PDF in Illustrator - it should open as a CMYK document with the same CMYK colours as specified in the original SVG.

Result: CMYK graphics in Illustrator, matching the SVG, with CMYK colours as specified in the SVG.

---

Warning: Scribus's SVG support is very ropey. In particular:

• There's basically no SVG text support, and they got no further towards supporting SVG text than an argument about whose fault this is. Expect it to outline all text too far up in the wrong font with awful kerning.
• It seems to get confused by gradients and transparency - though sometimes it displays things properly, despite complaining along the way.
• Everything in the PDF will be wrapped in a heap of clipping masks.
• Scribus's own interface is really confusing (as of summer 2013) - I recommend doing the absolute minimum tinkering in Scribus itself.

Sometimes you might need to mix elements from the original SVG (e.g. text) with the Scribus-borked version. If anyone knows a better way than Scribus, please share!

---

If you need specific colour profiles, you can install more colour profiles in Scribus and specify them in your SVG, but I'm not sure of the details. This previously-linked article might be a good place to start.