Answers.Body: <p>Here are several avenues that may offer a solution.</p>
  <p>#1 Amazon KDP help mentions this:</p>
  <blockquote>
  <p>&quot;...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.&quot;</p>
  </blockquote>
  <p>Seems as if Amazon's own words implying &quot;can lead to errors&quot; similar to what you are now encountering, where the SVG works on one device but not on another.</p>
  <p>#2 suggestion:
  Does your OPF file have an SVG line in there?</p>
  <pre><code>&lt;manifest&gt;
  ....
  &lt;item id=&quot;a1&quot; href=&quot;img/a1.svg&quot; media-type=&quot;image/svg+xml&quot; /&gt;
  &lt;/manifest&gt;
  </code></pre>
  <p>#3 suggestion:
  Perhaps incorporate a fallback image inside the SVG.</p>
  <pre><code>&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; xmlns:xlink=&quot;http://www.w3.org/1999/xlink&quot; &gt;
    &lt;image height=&quot;100&quot; width=&quot;100&quot; xlink:href=&quot;xxxx.svg&quot; /&gt;
  &lt;/svg&gt;
  </code></pre>
  <p>#4 suggestion:
  Review the Amazon KDP Supported Attributes to see if any apply to your situation:</p>
  <ul>
  <li><p>Use <code>&lt;svg&gt;</code> without namespaces. For example this has a namespace:</p>
    
  </li>
  <li><p><code>&lt;svg&gt;</code> with only one <code>&lt;image&gt;</code> tag as child is supported.</p>
  </li>
  <li><p><code>&lt;img&gt;</code> with .svg in href attribute is supported.</p>
  </li>
  </ul>
  <p>Finally, review the Unsupported Attributes as well.</p>
  <p>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.</p>
  <p>Read how they setup epub SVG examples:
  <a href="https://idpf.github.io/epub3-samples/30/samples.html" rel="nofollow noreferrer">https://idpf.github.io/epub3-samples/30/samples.html</a></p>
  <p>Read other SVG pointers:<br />
  <a href="https://vecta.io/blog/best-way-to-embed-svg" rel="nofollow noreferrer">https://vecta.io/blog/best-way-to-embed-svg</a></p>
  <p><a href="https://stackoverflow.com/questions/4476526/do-i-use-img-object-or-embed-for-svg-files">https://stackoverflow.com/questions/4476526/do-i-use-img-object-or-embed-for-svg-files</a></p>
  <p><a href="https://css-tricks.com/a-complete-guide-to-svg-fallbacks/" rel="nofollow noreferrer">https://css-tricks.com/a-complete-guide-to-svg-fallbacks/</a></p>
  <p><a href="https://css-tricks.com/svg-fallbacks/" rel="nofollow noreferrer">https://css-tricks.com/svg-fallbacks/</a></p>
  <p>Hopefully one of the above will provide a breakthrough solution.</p>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2023-06-02T06:27:19.347Z
Answers.LastActivityDate: 2023-06-09T16:44:35.060Z
Answers.LastEditDate: 2023-06-09T16:44:35.060Z
Answers.UserDisplayName: granite
Body: <p>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.</p>
  <p>This is my OPF:</p>
  <pre><code>&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;                                              
                                                                                      
  &lt;package unique-identifier=&quot;UUID&quot; version=&quot;2.0&quot; xmlns=&quot;http://www.idpf.org/2007/opf&quot;&gt;
    &lt;metadata xmlns:dc=&quot;http://purl.org/dc/elements/1.1/&quot; xmlns:opf=&quot;http://www.idpf.org/2007/opf&quot; xmlns:xsi=&quot;http://www.w3.org/2001/XMLSchema-instance&quot;&gt;
      &lt;dc:identifier id=&quot;UUID&quot; opf:scheme=&quot;UUID&quot;&gt;6027d3fb-7896-4e90-8fdf-35c65cb94957&lt;/dc:identifier&gt;
      &lt;dc:title&gt;10 Songs, Vol 1&lt;/dc:title&gt;                                            
      &lt;dc:creator opf:role=&quot;aut&quot;&gt;PK&lt;/dc:creator&gt;                                      
      &lt;dc:language&gt;en&lt;/dc:language&gt;                                                   
      &lt;meta property=&quot;dcterms:modified&quot;&gt;2023-06-01T18:45:35&lt;/meta&gt;                    
    &lt;/metadata&gt;                                                                       
    &lt;manifest&gt;                                                                        
      &lt;item href=&quot;toc.ncx&quot; id=&quot;ncx&quot; media-type=&quot;application/x-dtbncx+xml&quot;/&gt;           
      &lt;item href=&quot;har-ghadi-badal-rahi-hai-concert.html&quot; id=&quot;har-ghadi-concert&quot; media-type=&quot;text/html&quot;/&gt;
    &lt;/manifest&gt;                                                                       
    &lt;spine toc=&quot;ncx&quot;&gt;                                                                 
      &lt;itemref idref=&quot;har-ghadi-concert&quot;/&gt;                                            
    &lt;/spine&gt;                                                                          
    &lt;guide/&gt;                                                                          
  &lt;/package&gt; 
  </code></pre>
  <p>The html file has following structure:</p>
  <pre><code>&lt;!DOCTYPE html&gt;                                                                                                          
  &lt;html&gt;                                                                                                                   
      &lt;body&gt; 
      &lt;svg&gt; .. &lt;/svg&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>How do I fix this?</p>
  <p>Update: The book looks fine on Windows Kindle app too. Something to do with Apple ecosystem then?</p>
  
Tags: <kindle><epub>
Title: Epub with SVG does not work on Kindle app
UserDisplayName: kargirwar
ThreadText: # Epub with SVG does not work on Kindle app
  
  (Asked by: username_0 on 2023-06-02)
  
  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:
                                                
                                                                                      
  
    
      6027d3fb-7896-4e90-8fdf-35c65cb94957
      10 Songs, Vol 1                                            
      PK                                      
      en                                                   
      2023-06-01T18:45:35                    
                                                                           
                                                                            
                 
      
                                                                           
                                                                     
                                                  
                                                                              
                                                                              
   
  
  The html file has following structure:
                                                                                                            
                                                                                                                     
       
       .. 
      
  
  
  How do I fix this?
  Update: The book looks fine on Windows Kindle app too. Something to do with Apple ecosystem then?
  
  **Tags:** kindle, epub
  
  
  ---
  
  ## 1 answers
  
  ### Answer by username_1 on 2023-06-02. Score: 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?
  
  ....
  
  
  
  #3 suggestion:
  Perhaps incorporate a fallback image inside the SVG.
  
    
  
  
  #4 suggestion:
  Review the Amazon KDP Supported Attributes to see if any apply to your situation:
  
  Use  without namespaces. For example this has a namespace:
  
   with only one  tag as child is supported.
  
   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.
  
  
  ---
  
  