Support inline option on SVG images

[mariotoffia]

When rendering asciidoc to plain html I can do e.g. image::my-image.svg[opts=inline] and it would inline the image into the resulting html.

Is is possible to do so with asciidoctor-reveal.js.

Cheers,
Mario :)

[rezib]

I guess it misses conditions in this template to support this feature:

asciidoctor-reveal.js/templates/image.html.slim

Lines 15 to 19 in acb2247

	- if attr? :link
	a.image href=(attr :link) target=(attr :window) data-preview-link=(bool_data_attr :link_preview)
	img src=image_uri(attr :target) alt=(attr :alt) width=(width) height=(height) style=((attr? :background) ? "background: #{attr :background}" : nil)
	- else
	img src=image_uri(attr :target) alt=(attr :alt) width=(width) height=(height) style=((attr? :background) ? "background: #{attr :background}" : nil)

For the sake of justifying the need behind this issue, with inline SVG it is possible to interact with the content of the SVG (eg. links, animation, scripting, etc). It is actually well explained in asciidoctor documentation.

This feature would open new possibilities for even better presentations with asciidoctor-reveal.js 😀

[kxygk]

Thanks for the issue. I was very confused I'd done something wrong.
If this could further be defined globally for a document - that'd be quite handy

[mariotoffia]

@rezib

This feature would open new possibilities for even better presentations with asciidoctor-reveal.js

I totally agree, I think this is the mosst hurdle since I often mail my presentations - now I need to publish them all the time.

Cheers,
Mario :)

[Riduidel]

If someone stil encounters the issue, there is a possible hack done the following way

1. Add the role=svg to each generated svg diagram. This will add the svg html class to the image container div (well, provided you use a block image, but I guess you did)
2. Create a footer docinfo file
3. In that footer docinfo file, add the following javascript

<script>
function replaceSVGImagesTags() {
	// We add the svg role in asciidoc document to SVG images.
	// This is in fact added to container div.
	// So we locate those container div contained images to replace them
	// Hopefully modern JS has a pseudo-CSS syntax for that
	const svgImages = document.querySelectorAll("div.svg img")
	// Now let's browse those images and change their content
	svgImages.forEach(img => {
		const src = img.getAttribute("src")
		console.info("replacing image having source ", src)
		const parent = img.parentElement
		parent.removeChild(img)
		// Now create an object which data is the given src
		fetch(src)
	        .then(response => response.text())
	        .then(responseText => new window.DOMParser().parseFromString(responseText, "text/xml"))
	        .then(responseXML => parent.appendChild(responseXML.rootElement));
	})
}

replaceSVGImagesTags()
</script>

4. In your presentation stylesheet, don't forget to add div.svg { font-size: initial } otherwise your font will render weirdly.

With these modifications, your image diagrams will all be inlined as direct SVG tags. This allow more interactivity, and ability to select individual SVG elements

[ggrossetie]

The relevant code in the built-in HTML5 converter: https://github.com/asciidoctor/asciidoctor/blob/a040b60300efaa0d75cc6a3b031241dbe7b5a864/lib/asciidoctor/converter/html5.rb#L1214-L1220

It seems that we can reuse read_svg_contents .

[mojavelinux]

Let's do it. If you need me to lend a hand, just call on me.

[barthel]

@obilodeau @ggrossetie ping. Please merge the PR if u agree.