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

Use URI-encoding for SVG images coming from at-example blocks #1537

Closed
jkrumbiegel opened this issue Feb 24, 2021 · 2 comments · Fixed by #1538
Closed

Use URI-encoding for SVG images coming from at-example blocks #1537

jkrumbiegel opened this issue Feb 24, 2021 · 2 comments · Fixed by #1538
Labels
Format: HTML Related to the default HTML output help wanted Type: Enhancement

Comments

@jkrumbiegel
Copy link
Contributor

jkrumbiegel commented Feb 24, 2021

If a bitmap plot is returned, it's wrapped in an image tag. If an svg plot is returned, it's not wrapped, which means the svg often will just spill over the column layout, because svg just enforces its own dimensions ruthlessly. I recently made a PR in VSCode about the same issue, which we could use in Documenter as well https://github.com/julia-vscode/julia-vscode/blob/953304c5d00ae68eb33e337110509ca6d63c1152/src/interactive/plots.ts#L139-L162

It involves URI encoding the svg string and then using it as the src for an img tag. This could also fix issues such as Cairo-produced svg's invalidating each other such as described here https://discourse.julialang.org/t/cairomakie-and-fontconfig/55931/13?u=jules

@mortenpi mortenpi added Format: HTML Related to the default HTML output help wanted Type: Enhancement labels Feb 25, 2021
@mortenpi
Copy link
Member

mortenpi commented Feb 25, 2021

Hmm. In principle, for the layout part, it should be sufficient to make sure that we apply the same CSS to the <svg> as we do to the <img> one. But I agree that the interaction between images could still be an issue, so URI-encoding is better. We already do it for the binary images anyway:

elseif haskey(d, MIME"image/svg+xml"())
out = Documents.RawHTML(d[MIME"image/svg+xml"()])
elseif haskey(d, MIME"image/png"())
out = Documents.RawHTML(string("<img src=\"data:image/png;base64,", d[MIME"image/png"()], "\" />"))
elseif haskey(d, MIME"image/webp"())
out = Documents.RawHTML(string("<img src=\"data:image/webp;base64,", d[MIME"image/webp"()], "\" />"))
elseif haskey(d, MIME"image/gif"())
out = Documents.RawHTML(string("<img src=\"data:image/gif;base64,", d[MIME"image/gif"()], "\" />"))
elseif haskey(d, MIME"image/jpeg"())
out = Documents.RawHTML(string("<img src=\"data:image/jpeg;base64,", d[MIME"image/jpeg"()], "\" />"))

@mortenpi mortenpi changed the title Handling svg images resulting from @example blocks better Use URI-encoding for SVG images coming from at-example blocks Feb 25, 2021
@jkrumbiegel
Copy link
Contributor Author

jkrumbiegel commented Feb 26, 2021

In principle, for the layout part, it should be sufficient to make sure that we apply the same CSS to the <svg> as we do to the <img> one

That sadly doesn't help, because svgs don't respect css width/height settings if they have a viewBox attribute. https://css-tricks.com/scale-svg/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Format: HTML Related to the default HTML output help wanted Type: Enhancement
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants