asciidoctor-epub3
asciidoctor-epub3 copied to clipboard
Published
20 hours ago •
asciidoctor
asciidoctor
Inline <svg>
The inline option for an svg image:
image::drawing.svg[opts=inline]
was added for HTML5 in https://github.com/asciidoctor/asciidoctor/pull/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>
