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

iliakan · 01-23-2015, 03:17 PM

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, 03: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, 03:38 PM

Quote:

Originally Posted by iliakan

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, 03: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, 04:43 PM

Quote:

Originally Posted by iliakan

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.

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, 04: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, 05:15 PM

Quote:

Originally Posted by iliakan

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?

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

Spoiler:

bernie

iliakan · 01-23-2015, 05: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, 08: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, 02: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, 05: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.

01-23-2015, 03:17 PM	#1
iliakan Member Posts: 17 Karma: 10 Join Date: Jan 2015 Device: iphone 6	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? Last edited by iliakan; 01-23-2015 at 03:43 PM.

01-23-2015, 03:53 PM	#4
iliakan Member Posts: 17 Karma: 10 Join Date: Jan 2015 Device: iphone 6	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. Last edited by iliakan; 01-23-2015 at 04:27 PM.

01-23-2015, 04:57 PM	#6
iliakan Member Posts: 17 Karma: 10 Join Date: Jan 2015 Device: iphone 6	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?

01-23-2015, 08:00 PM	#9
kovidgoyal creator of calibre Posts: 45,168 Karma: 27110894 Join Date: Oct 2006 Location: Mumbai, India Device: Various	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. Last edited by kovidgoyal; 01-23-2015 at 08:04 PM.

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search

01-23-2015, 05:22 PM	#8
iliakan Member Posts: 17 Karma: 10 Join Date: Jan 2015 Device: iphone 6	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).

01-24-2015, 02:27 AM	#10
iliakan Member Posts: 17 Karma: 10 Join Date: Jan 2015 Device: iphone 6	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?

01-24-2015, 05:16 AM	#11
kovidgoyal creator of calibre Posts: 45,168 Karma: 27110894 Join Date: Oct 2006 Location: Mumbai, India Device: Various	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.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
[Tutorial] Convert TEXT to SVG IMAGE with Inkscape	GrannyGrump	Workshop	13	04-29-2024 07:17 AM
How can I convert topaz ebook from multiple xhtml's (SVG) to single pdf?	rglk	Workshop	3	11-28-2011 04:33 PM
How to batch-convert with ebook-convert?	cypresstwist	Conversion	8	02-22-2011 09:28 AM
Sony eBook Library cuts prices and adds titles	sirmaru	Sony Reader	33	02-24-2008 08:17 AM

Advert

Advert