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.

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

Embedding SVG images in HTML changes the height #9893

Closed
snhansen opened this issue Jun 19, 2024 · 4 comments
Closed

Embedding SVG images in HTML changes the height #9893

snhansen opened this issue Jun 19, 2024 · 4 comments
Labels

Comments

@snhansen
Copy link

Explain the problem.
When rendering a HTML document from a Markdown with an SVG image, the height of the image will differ depending on whether you're using --embed-resources or not.

Simple .md document:

::: {.cell layout-align="center"}
::: {.cell-output-display}
![](fig.svg){fig-align='center' width=672}
:::
:::

Using pandoc test.md -o test.html yields a width of 672 and no height tag.

<div class="cell" data-layout-align="center">
<div class="cell-output-display">
<p><img src="fig.svg" data-fig-align="center" width="672" /></p>
</div>
</div>

Using pandoc test.md -o test.html --embed-resources yields a width of 672 and height of 57.0899pt.

<div class="cell" data-layout-align="center">
<div class="cell-output-display">
<p><svg id="svg_92282ddc95ff99426f05" role="img" data-fig-align="center" width="672" height="57.0899pt" viewBox="-72.00005 -72.00005 57.0899 57.0899">
<defs>

Would be nice if they would produce the same result.

Pandoc version?
pandoc 3.2 on Windows 11

@snhansen snhansen added the bug label Jun 19, 2024
@jgm
Copy link
Owner

jgm commented Jun 19, 2024

Can you upload fig.svg so I can test? I suspect this is fixed by a recent commit.

@snhansen
Copy link
Author

Can you upload fig.svg so I can test? I suspect this is fixed by a recent commit.

Of course. Should be available here although you need to rename it: fig.svg

@jgm
Copy link
Owner

jgm commented Jun 19, 2024

The version in master gives you this:

<img role="img" src="data:image/svg+xml;base64,PD94...9zdmc+" data-fig-align="center" width="672" />

and without --embed-resources, similarly but without the data uri.

If you add the .inline-svg class to the attributes, then you get the output you saw above, with an inline svg and calculated height attribute. Why do we add the calculated height for an inline svg? I can't remember, but I think there's a reason. You can look at #8965, #8969 for background.

Anyway I think the new behavior should suit you, so perhaps this can be closed?

@snhansen
Copy link
Author

Anyway I think the new behavior should suit you, so perhaps this can be closed?

I just checked with the Github version and it does indeed seem to be resolved there. So I'll go ahead and close it. Sorry for opening an issue that was already resolved.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants