Differing behaviour in html5 output for an svg image with align specified

[jtanx]

Describe the bug

When an image is specified, similar to:

.. image:: the-image.svg
   :align: right
   :scale: 200px

This code:

sphinx/sphinx/writers/html5.py

Lines 552 to 554 in d4aeae4

	self.body.append('<div align="%s" class="align-%s">' %
	(node['align'], node['align']))
	self.context.append('</div>\n')

Sticks the svg (for unknown reasons) in a div and somehow also makes it clickable (so adds an internal reference, even though no target has been specified).

The clickable reference is added by this code:

sphinx/sphinx/builders/html.py

Lines 808 to 825 in d4aeae4

	if self.config.html_scaled_image_link and self.html_scaled_image_link:
	for node in doctree.traverse(nodes.image):
	scale_keys = ('scale', 'width', 'height')
	if not any((key in node) for key in scale_keys) or \
	isinstance(node.parent, nodes.reference):
	# docutils does unfortunately not preserve the
	# ``target`` attribute on images, so we need to check
	# the parent node here.
	continue
	uri = node['uri']
	reference = nodes.reference('', '', internal=True)
	if uri in self.images:
	reference['refuri'] = posixpath.join(self.imgpath,
	self.images[uri])
	else:
	reference['refuri'] = uri
	node.replace_self(reference)
	reference.append(node)

Apparently the clickable thing is a feature(?).

As it's specified in a div, this displayed in block style, which means content does not flow around it, but is displayed below the image. This is different to how alignment works on images.

e.g.:

To Reproduce

Try rendering an svg to html5

.. image:: the-image.svg
   :align: right
   :scale: 200px

Expected behavior

The svg should behave no different to any other image - it should be styled inline and there should be no reference generated when no target is specified, e.g.:

Your project
N/A

Screenshots
If applicable, add screenshots to help explain your problem.

Environment info

• OS: Windows
• Python version: ] 3.7.2
• Sphinx version: 2.3.1
• Sphinx extensions: sphinx.ext.mathjax
• Extra tools: Firefox

Additional context
N/A

[tk0miya]

Thank you for reporting. I posted #7114 to fix this.

Note: Sphinx does not apply any hyperlinks to SVG images because it can have its own hyperlinks. This is difference between other images formats.

[jtanx]

Awesome, thanks! Would you know the reason why SVGs need to be wrapped in divs, instead of just being treated like other images?

[tk0miya]

Good point. Originally, HTML builder uses <object> tag to embed SVG tag. That is why we use <div> tag for alignment. Now, we use <img> tag for embedding. So <div> tag is no longer needed... It's time for refactoring!

[tk0miya]

I updated my PR not to use <div> tag for alignment.
It will be released as 2.4.0 (maybe released in this weekend).
Thanks,