Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Inline <svg> #408

Open
per42 opened this issue Aug 30, 2021 · 0 comments
Open

Inline <svg> #408

per42 opened this issue Aug 30, 2021 · 0 comments
Labels
compliance enhancement

Comments

@per42
Copy link

per42 commented Aug 30, 2021

The inline option for an svg image:

image::drawing.svg[opts=inline]

was added for HTML5 in asciidoctor/asciidoctor#1404.

It does not work for EPUB3. It ignores the inline option. Perhaps this is a limitation of EPUB 3.2? I read it accepts HTML5, but I am no expert.

The reason I would like this feature is that my plantuml diagram svg:s don't embed its used fonts.

Testing the snippet above:

asciidoctor-epub3 -a ebook-extract test.adoc

test.xhtml:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops"
  xmlns:mml="http://www.w3.org/1998/Math/MathML" xml:lang="en" lang="en">

<head>
  <meta charset="UTF-8" />
  <title>Untitled</title>
  <link rel="stylesheet" type="text/css" href="styles/epub3.css" />
  <link rel="stylesheet" type="text/css" href="styles/epub3-css3-only.css" media="(min-device-width: 0px)" />
  <script type="text/javascript">< ![CDATA[
      document.addEventListener('DOMContentLoaded', function (event, reader) {
        if (!(reader = navigator.epubReadingSystem)) {
          if (navigator.userAgent.indexOf(' calibre/') >= 0) reader = { name: 'calibre-desktop' };
          else if (window.parent == window || !(reader = window.parent.navigator.epubReadingSystem)) return;
        }
        document.body.setAttribute('class', reader.name.toLowerCase().replace(/ /g, '-'));
      });
    ]]></script>
</head>

<body>
  <section class="chapter" title="Untitled" id="test">

    <figure class="image">
      <div class="content">
        <img src="drawing.svg" alt="drawing" />
      </div>
    </figure>
  </section>
</body>

</html>

drawing.svg:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg" width="90.496254mm" height="86.669838mm" viewBox="0 0 90.496254 86.669838"
   version="1.1" id="svg638">
   <defs id="defs632" />
   <metadata id="metadata635">
      <rdf:RDF>
         <cc:Work rdf:about="">
            <dc:format>image/svg+xml</dc:format>
            <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
            <dc:title></dc:title>
         </cc:Work>
      </rdf:RDF>
   </metadata>
   <g id="layer1" transform="translate(-26.250443,-20.459018)">
      <path style="fill:#ff0000;stroke:#000000;stroke-width:0.1" id="path640"
         d="M 100.54166,105.83333 72.327022,91.767585 44.744686,107.03605 49.4032,75.855775 26.358619,54.341629 57.452381,49.136905 70.792382,20.571969 85.35087,48.535546 116.64003,52.39559 94.543904,74.882755 Z" />
   </g>
</svg>

But the HTML output works:

asciidoctor test.adoc

test.html:

...
<body class="article">
   <div id="header">
   </div>
   <div id="content">
      <div class="imageblock">
         <div class="content">
            <svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#"
               xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg"
               xmlns="http://www.w3.org/2000/svg" width="90.496254mm" height="86.669838mm"
               viewBox="0 0 90.496254 86.669838" version="1.1" id="svg638">
               <defs id="defs632" />
               <metadata id="metadata635">
                  <rdf:RDF>
                     <cc:Work rdf:about="">
                        <dc:format>image/svg+xml</dc:format>
                        <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
                        <dc:title></dc:title>
                     </cc:Work>
                  </rdf:RDF>
               </metadata>
               <g id="layer1" transform="translate(-26.250443,-20.459018)">
                  <path style="fill:#ff0000;stroke:#000000;stroke-width:0.1" id="path640"
                     d="M 100.54166,105.83333 72.327022,91.767585 44.744686,107.03605 49.4032,75.855775 26.358619,54.341629 57.452381,49.136905 70.792382,20.571969 85.35087,48.535546 116.64003,52.39559 94.543904,74.882755 Z" />
               </g>
            </svg>
         </div>
      </div>
   </div>
   <div id="footer">
      <div id="footer-text">
         Last updated 2021-08-30 21:18:59 +0200
      </div>
   </div>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
compliance enhancement
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@slonopotamus @per42