2

I am trying to create an epub book. The book includes svg. I have previewed the book in kindle preview and it displays correctly. But when I open it in kindle app on Mac and iPad the display is all garbled. The book opens fine with Books on Mac and on iPad.

This is my OPF:

<?xml version="1.0" encoding="utf-8"?>                                              
                                                                                    
<package unique-identifier="UUID" version="2.0" xmlns="http://www.idpf.org/2007/opf">
  <metadata xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:opf="http://www.idpf.org/2007/opf" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
    <dc:identifier id="UUID" opf:scheme="UUID">6027d3fb-7896-4e90-8fdf-35c65cb94957</dc:identifier>
    <dc:title>10 Songs, Vol 1</dc:title>                                            
    <dc:creator opf:role="aut">PK</dc:creator>                                      
    <dc:language>en</dc:language>                                                   
    <meta property="dcterms:modified">2023-06-01T18:45:35</meta>                    
  </metadata>                                                                       
  <manifest>                                                                        
    <item href="toc.ncx" id="ncx" media-type="application/x-dtbncx+xml"/>           
    <item href="har-ghadi-badal-rahi-hai-concert.html" id="har-ghadi-concert" media-type="text/html"/>
  </manifest>                                                                       
  <spine toc="ncx">                                                                 
    <itemref idref="har-ghadi-concert"/>                                            
  </spine>                                                                          
  <guide/>                                                                          
</package>

The html file has following structure:

<!DOCTYPE html>                                                                                                          
<html>                                                                                                                   
    <body> 
    <svg> .. </svg>
    </body>
</html>

How do I fix this?

Update: The book looks fine on Windows Kindle app too. Something to do with Apple ecosystem then?

Improve this question

1 Answer 1

Reset to default
1

Here are several avenues that may offer a solution.

#1 Amazon KDP help mentions this:

"...Computer-generated visuals are best represented as Scalable Vector Graphics (SVG) however, SVG tags can lead to errors...recommend removing SVG tags and using the image tag in HTML for images."

Seems as if Amazon's own words implying "can lead to errors" similar to what you are now encountering, where the SVG works on one device but not on another.

#2 suggestion: Does your OPF file have an SVG line in there?

<manifest>
....
<item id="a1" href="img/a1.svg" media-type="image/svg+xml" />
</manifest>

#3 suggestion: Perhaps incorporate a fallback image inside the SVG.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >
  <image height="100" width="100" xlink:href="xxxx.svg" />
</svg>

#4 suggestion: Review the Amazon KDP Supported Attributes to see if any apply to your situation:

  • Use <svg> without namespaces. For example this has a namespace:

  • <svg> with only one <image> tag as child is supported.

  • <img> with .svg in href attribute is supported.

Finally, review the Unsupported Attributes as well.

Other points: In 2019 Kindle for iOS didn't support SVG (though now it is, perhaps its still buggy on certain platforms). SVG's are supported on macOS 10.15 or later, iOS 13 or later, and iPadOS or later.

Read how they setup epub SVG examples: https://idpf.github.io/epub3-samples/30/samples.html

Read other SVG pointers:
https://vecta.io/blog/best-way-to-embed-svg

https://stackoverflow.com/questions/4476526/do-i-use-img-object-or-embed-for-svg-files

https://css-tricks.com/a-complete-guide-to-svg-fallbacks/

https://css-tricks.com/svg-fallbacks/

Hopefully one of the above will provide a breakthrough solution.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.