MobileRead Forums - ebook-convert cuts svg styles: what can I do?

MobileRead Forums (https://www.mobileread.com/forums/index.php)

- Conversion (https://www.mobileread.com/forums/forumdisplay.php?f=235)

- - ebook-convert cuts svg styles: what can I do? (https://www.mobileread.com/forums/showthread.php?t=254906)

iliakan

01-23-2015 04:17 PM

ebook-convert cuts svg styles: what can I do?

For example, the HTML:

Code:

<!doctype html>

<html>

<head>

  <meta charset="UTF-8">

  <style>



  .link {

    fill: none;

    stroke: #BEC3C7;

    stroke-width: 1px;

  }



  </style>

</head>

<body>

  

  See the bug:

  <svg height="350" width="690"><path d="M7,0L7,30L40,30" class="link"></path></svg>



</body></html>

After conversion to EPUB looses the .link style.

I mean, literally looses it, the converter cuts it out (not in stylesheet any more), so the SVG is not styled correctly.

What can I do with it?

iliakan

01-23-2015 04:20 PM

Oh, and the ebook-convert log, as required when asking a question (but everything's normal here)

Code:

iliakan>  /Applications/calibre.app/Contents/MacOS/ebook-convert book.html book.epub --embed-all-fonts --max-toc-links 0 --level1-toc '//h:h2' --level2-toc '//h:h3'

1% Converting input to HTML...

InputFormatPlugin: HTML Input running

on /Users/iliakan/epub/book.html

Language not specified

Creator not specified

Building file list...

Normalizing filename cases

Rewriting HTML links

34% Running transforms on ebook...

Merging user specified metadata...

Detecting structure...

Auto generated TOC with 0 entries.

Flattening CSS and remapping font sizes...

Source base font size is 12.00000pt

Removing fake margins...

Cleaning up manifest...

Trimming unused files from manifest...

Creating EPUB Output...

67% Running EPUB Output plugin

Splitting markup on page breaks and flow limits, if any...

        Looking for large trees in book.html...

        No large trees found

Generating default cover

This EPUB file has no Table of Contents. Creating a default TOC

EPUB output written to /Users/iliakan/epub/book.epub

Output saved to   /Users/iliakan/epub/book.epub

gbm	01-23-2015 04:38 PM

Quote:

Originally Posted by iliakan (Post 3031864)

For example, the HTML:

Code:

<!doctype html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <style>



.link {

  fill: none;

  stroke: #BEC3C7;

  stroke-width: 1px;

}



.domtree {

  border: 1px solid #f5f2f0;

  border-radius: 4px;

}

</style>

</head>

<body>  

  See the bug:

<div class="domtree"><svg height="350" width="690"><path d="M7,0L7,30L40.333333333333336,30" class="link"></path></svg></div>

</body></html>

After conversion to EPUB looses the .link style.

I mean, literally looses it, the converter cuts it out (not in stylesheet any more), so the SVG is not styled correctly.

What can I do with it?

From what I can find Epub does not support "stroke".

bernie.

iliakan

01-23-2015 04:53 PM

When I add the rule manually rezipping the epub, everything's fine (iBooks).

Check it out: http://ilyakantor.ru/b.epub.zip

The problem is that the rule is *removed* from CSS completely by ebook-convert. What da .... ?!? It's my styles man! I'm really struck by that.

gbm	01-23-2015 05:43 PM

1 Attachment(s)

Quote:

Originally Posted by iliakan (Post 3031892)

This is what I get when running Check Book in the editor.

Code:

WARNING: CSS: Property: Unknown Property name. [9:3: fill]****[stylesheet.css]

WARNING: CSS: Property: Unknown Property name. [10:3: stroke]****[stylesheet.css]

WARNING: CSS: Property: Unknown Property name. [11:3: stroke-width]****[stylesheet.css]

All that firefox shows when the epub is unzip is"

Spoiler:

bernie

iliakan

01-23-2015 05:57 PM

I added the "color" property to the style of the original HTML-document above:

Code:

.link {

    fill: none;

    stroke: #BEC3C7;

    stroke-width: 1px;

    color: red;

  }

Again, the conversion does not keep this .link rule. The "color" property really must be known.
So the "strange properties" is probably not the issue.

I opened the hand-fixed http://ilyakantor.ru/b.epub.zip in Calibre, iBooks, Sigil, all 3 programs programs show it well.

That's the screenshot from Sigil: http://ilyakantor.ru/screen/2015-01-24_0054.png (the path is styled correctly).

So "unsupported properties" is not an issue too here, just because all 3 readers are fine with it.

What remains is a converter issue.

Maybe that's because the converter adds svg: namespace to the svg tag and inside it, and things become messed up?

gbm	01-23-2015 06:15 PM

2 Attachment(s)

Quote:

Originally Posted by iliakan (Post 3031921)

I added the "color" property to the style of the original HTML-document above:

Code:

.link {

    fill: none;

    stroke: #BEC3C7;

    stroke-width: 1px;

    color: red;

  }

Running your css though the CSS Validation Service shows these errors:

Spoiler:

bernie

iliakan

01-23-2015 06:22 PM

If one removes the offending properties, the CSS becomes valid, but the conversion issue still exists as you can see looking into the epub source (the rule disappears).

kovidgoyal

01-23-2015 09:00 PM

Using css to style svg is not supported by the ebook-convert (and is not supported by most ebook reading software either). I think the only exceptions are iBooks and browser based ebook renderers like calibre itself, or Sigil (which all use versions of WebKit). I might look into adding support for it someday, but it isn't a priority, patches are welcome.

And note that since epub requires xhtml not html 5, adding the svg: prefix is a must.

iliakan

01-24-2015 03:27 AM

Maybe it could be a great move to enable svg rasterizer then?

I know it's done for some formats, but not for ebook. If I have a CSS-styled SVG, then must rasterize it to show up correctly everywhere, right?

kovidgoyal

01-24-2015 06:16 AM

Since the vast majority of svg images dont use css for styling, I'm not particularly interested in implementing rasterization, once again, patches are welcome.

All times are GMT -4. The time now is 10:39 PM.