3

I have created 20 webpages full of charts for a client. They want to print them as part of a publication so I am needing to turn SVG into EPS.

I've imported a large d3-generated SVG into Illustrator. The CSS is inline so most of the formatting has come through (thanks to this answer: Can I turn SVG and external CSS into EPS?). However there are two problems. One is that three out of four x-axes are replaced by a thick black line. The other is that some of the data (three lines on the bottom right chart) are completely missing. Does anyone have any clues as to what is wrong?

I have looked through the CSS in the hope of finding something that favours one particular axis or tick but can't see anything. I can't share the SVG or page because it's driven by client data, which is confidential.

Grateful for any help Emma

Original SVG: SVG / webpage showing nice formatting

New Illustrator EPS: Red circles show Illustrator import with ugly axes and missing data

Community
  • 1
  • 1
emma
  • 784
  • 2
  • 9
  • 23

3 Answers3

3

In case anyone else has the same problem, I thought I'd post how I worked this out. The problem was CSS-related. Illustrator renders CSS differently, and applies slightly different rules to my text editor. In particular:

  1. class names containing underscores are ignored;

  2. font-size using vw are ignored;

  3. where two opposing CSS rules apply, it seems the first rule is taken (haven't tested this properly)

  4. CDATA declarations have to be within the svg tags

  5. Sometimes the path to the element has to be spelled out far more clearly than a browser would require

emma
  • 784
  • 2
  • 9
  • 23
  • Interesting. Did you discover this by trial and error or did you find any resources on this? – Ideogram Nov 26 '18 at 15:56
  • One more thing I discovered is that ".link" is not a good class name to use. Styles based on this class name did not get applied. Renaming it to ".edge" solved the problem. – Ideogram Nov 27 '18 at 06:54
1

A bit late to the party but I noticed such artifacts as well with Illustrator. If you open the SVG in any other browser it works fine. My solution was to use InkScape and then re-save the SVG files. After this Illustrator handles the SVG well.

Coola
  • 2,934
  • 2
  • 19
  • 43
0

This isn't exactly an answer to your question, but if you're only looking for an image that's of a high enough resolution to print, and don't necessarily care about it being vector vs. raster graphics, you can always use a high-resolution screen (if you have a 4K/5K screen laying around, use that, but an iPad may do the trick too), zoom in so that each SVG chart takes up as much of the screen as possible, then take a screenshot. If you're doing an extremely large high-quality print of just the chart, it may not work, but as long as it's a smaller piece of a larger document, you'll likely get a large enough image that it being raster graphics won't affect the quality of the printing.

This approach certainly has its disadvantages, but it's relatively quick, simple, and gets the job done.

EDIT: It looks like printing to a PDF will also preserve SVG graphics, and (at least on my computer) there doesn't appear to be any differences between the two images. Once it's in PDF, you'll be able to import into Illustrator pretty easily, and extract the actual SVG graphics from there.

Mike Lewis
  • 348
  • 4
  • 14
  • This is really interesting - thanks for your answer. Unfortunately the production team need vector graphics to resize without loss of resolution. Thanks anyway though - have noted your answer for the future! – emma Jan 27 '16 at 09:16