Advertisement



Question

I'm an ebook publisher trying to include 10 color illustrations inside an ebook. It's not a fixed layout ebook but a reflowable ebook (i.e., an epub).

Graphic example here: http://www.flickr.com/photos/rjnagle/sets/72157641718117054/ (Sort of low resolution -- but this should give you an idea about what they look like -- the text refers to the story title).

I'm working with a talented artist who is good at drawing but doesn't really know much or anything about graphic formats. She has limited experience using graphics software. Ironically although I have absolutely no artistic talent, I'm more comfortable than she is about using graphics software -- especially to do a specific task. I'm pretty good at using gimp.

She has given me some images in high quality jpg formats. Possibly she could rescan the images -- although I already have 300 dpi of everything. Ideally I'd like these interior images to scale on the fly and to separate the text information from the graphic itself. The software on the major tablets are starting to support svg images, and one of the problems with these 10 images is that they incorporate text and images together (They are chapter headings). I need an image which will adjust well to low resolution and high resolution devices.

I see that inkscape has tools for turning raster images into vectors (using trace bitmap for example). My aim is to create faithful images (perhaps cropping out the text and overlaying text in Inkscape). My questions:

  1. Can Inkscape do this adequately well?
  2. How complex a task would this be for someone who is good at software but not necessarily an artist?
  3. Do you have any general suggestions about doing this or have any URL's to recommend. (My main goal is fidelity to the original image).

Some more characteristics of the original artwork:

Lots of whitespace. The image rectangle will occupy about a third of the tablet page. About 2/3 of the drawing is curvy line drawings using a black pen. However, in the center there's a half-circle containing a color sketch with a filled color background that sometimes is fairly intricate and has impressionistic brush strokes. This color sketch is trying to depict a scene from the book.

I'm trying to figure out whether it's worth the effort to convert the image to vector, or whether I should just leave it as a jpg and remove the text from it (which is fairly easy to do because it's underneath the image itself and completely separate from it). Leaving them as JPGs is easier and the ebook software all supports that, but it doesn't future-proof or scale images well --you usually have to specify a specific image dimension.

2014/03/01
1
3
3/1/2014 9:37:00 PM

Accepted Answer

Using inkscape to convert scanned color drawings to svg — recommended or no?

I would say, generally tracing photos or detailed, photo-like images is very very difficult to do well, so not really. But of course, there are ways...

Based on the image you provided, here is what I would attempt:

The black and white line-drawings should be simple enough to trace. I would ask to get scans of the coloured parts in as high a resolution as possible.

I would trace the black and white and the coloured parts separately. To do them together would bring too many elements and compromises.

Please note that these examples are Illustrator, and I am no expert in Inkscape. However; Inkscape should have about the same abilites.

Here is part of the image you provided:

enter image description here

First, I would take the whole thing into photoshop/gimp and go mad on contrast. The aim here is the black and white, ignore the colour for now. Alternatively, you could get her to scan the whole thing as high contrast black and white.

So they are pretty equal. To be clear: untraced on the left, traced on the right: enter image description here

The colours are all over the place and not like the original. I would then trace the same image again, from the original, but this time only considering the coloured parts.

In the end you should have two layers, where one is optimised the black-white, and one with the optimised coloured part.

I would remove the text from the drawing, add that in Inkscape in a third layer as text.

The exact steps in Inkscape, alas, I cannot tell you; but the trace function should have alternatives for high fidelity. You will probably have to fiddle around with it, but it get much easier when you only have to focus on one element at a time (i.e. coloured vs. black-and-white).

2014/03/01
1
3/1/2014 9:42:00 PM

Your best approach for filesize, image quality, and flexibility will probably be a SVG with an embedded image (or two). If you size and position everything (text, image, vector graphical elements) with the SVG and then put an appropriate "viewBox" parameter on it, the SVG format will handle scaling down the images to size.

If you are able to successfully (from a graphical and file-size) convert the line-drawing border to an SVG path using @boblet's technique that might be worthwhile, but I suspect you'll find that @Takkat assessment of filesize versus quality will hold true for the coloured images.

Also, the border drawings for the two images are almost the same. If you and the artist are okay making them exactly the same, then you could re-use that content in each SVG, regardless of whether you decide to go with a vector or raster format for it. And even if you do go with a raster format, it doesn't have to be the same format as for the coloured sections -- you could use full-colour JPEG for the insets and monochrome PNG with transparent background for the border.

Your svg code would look something like this:

<svg id="ch1-title-image" viewBox="0 0 1000 500" preserveAspectRatio="xMidYMin meet">
   <defs>
      <desc>
          Chapter 1
          <!-- add some extra info for screen readers, since they won't
               know that the <text> below is styled like an <h2> heading -->
      </desc>
      <clipPath id="inset-ch1">
          <path d="<!-- define border of coloured area here -->"/> 
      </clipPath>
   <defs>

   <image xlink:href="images/Ch1.jpeg" 
          x="350" y="100" width="300" height="200"
          clip-path = "url(#inset-ch1)" />
   <!-- position and size the coloured image within the SVG,
        and crop it to shape, the image file will be scaled to fit
        this rectangle -->

   <image xlink:href="images/ChapterBorder.png"
         x="0" y="0" width="1000" height="500" />
   <!-- an <image> element also works if the border is saved as an SVG, but
        you could also use a <use> element (which would allow you to set CSS styles
        on the main file and have it inherited by the embedded file) -->

   <text x="500" y="400" text-anchor="middle" font-size="60">
       The Lamp in the Window
   </text>
</svg>

For the other chapters you would change the url in the first <image>, the text content and the id values. Unfortunately you have to repeat the clipping path each time (unless you're sure that this is always going to be one long HTML file) because clip-path references always have to be to a fragment within the same file, although you could use a <use> element within to reference the path itself. It's probably not worth an extra file request on its own, but it would be optimal if you define the border as an SVG file, then you could have a path within it (even if invisible) that defines the border for the coloured area:

<svg id="ch1-title-image" viewBox="0 0 1000 500" preserveAspectRatio="xMidYMin meet">
   <defs>
      <desc>
          Chapter 1
      </desc>
      <clipPath id="inset-ch1">
          <use xlink:href="images/ChapterBorder.svg#inset-border"/> 
      </clipPath>
   <defs>

   <image xlink:href="images/Ch1.jpeg" 
          x="350" y="100" width="300" height="200"
          clip-path = "url(#inset-ch1)" />

   <use xlink:href="images/ChapterBorder.svg"
         x="0" y="0" width="1000" height="500" />

   <text x="500" y="400" text-anchor="middle" font-size="60">
       The Lamp in the Window
   </text>
</svg>

"inset-border" would have to be the id of a <path> or <g> element within "ChapterBorder.svg".

Size the SVG using CSS, being sure to set height:auto;. The text and images will scale perfectly. See this StackOverflow Q&A for more on getting SVG images to size responsively.

2017/05/23