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.

Sign up for GitHub

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

Jump to bottom

Empty attributes in inline SVG get stripped #576

Closed
andreashaerter opened this issue May 3, 2023 · 4 comments
Closed

Empty attributes in inline SVG get stripped #576

andreashaerter opened this issue May 3, 2023 · 4 comments

Comments

@andreashaerter
Copy link

andreashaerter commented May 3, 2023 •
edited
Loading

Hello,

empty attributes in inline SVG images are getting stripped (unexpected) while being kept (as expected) in other HTML tags. Example code:

<!DOCTYPE html>
<html lang="en"
      dir="ltr"
      class="no-js">
<head>
  <title>foo</title>
<body x-cloak x-ignore>
  <svg x-ignore x-cloak>foo</a>
  <svg x-ignore x-cloak x-foo="">bar</svg>
  <svg x-ignore x-cloak x-foo="x-foo">barbar</svg>
  <strong x-ignore x-cloak x-foo="">baz</strong>
</body>
</html>

results in (line breaks added for better readability)

<!doctype html>
<html lang=en
      dir=ltr
      class=no-js>
<title>foo</title>
<body x-cloak
      x-ignore>
<a x-ignore
   x-cloak>foo</a>
<svg>bar</svg>
<svg x-foo="x-foo">barbar</svg>
<strong x-ignore
        x-cloak
        x-foo>baz</strong>

As one can see, empty attributes like x-ignore x-cloak x-foo="" are getting stripped from the inline <svg> image. I guess this happens as they are handled by the SVG minifier instead of the HTML one (which makes sense but an option to keep empty attributes on SVG would be nice).

I got this problem while using Minify as included in the static site generator Hugo, the issue is reproducible with the minify online demo running v2.12.5.

If somebody else ran into this problem: A workaround is to use the name of the attribute itself as value for boolean attributes

If the attribute is present, its value must either be the empty string or [...] the attribute's canonical name, with no leading or trailing whitespace.

So e.g. x-ignore="x-ignore" in my example code. The attributes will be preserved then. I ran into this problem as I use Apline.js's x-ignore directive for the SVG tags to optimize Alpine.js-performance.
@tdewolff
Copy link
Owner

tdewolff commented May 3, 2023

Fixed! Are you sure about the empty attribute syntax? I think it says that you should just write the name (without the = and the value), and not that the value should be the name.

@andreashaerter
Copy link
Author

andreashaerter commented May 3, 2023 •
edited
Loading

@tdewolff oh wow, that was fast. Thank you very much.

Yes, I am sure. My brain mixed up old HTML information with the formerly linked empty-attribute-syntax. However, the information is still valid for current HTML versions, I edited my original posting.

TL;DR: boolean attributes may legally take a single value: the name of the attribute itself (e.g., selected="selected").

@vilunov
Copy link

vilunov commented Aug 25, 2023

@tdewolff just writing the name is still the wrong way it seems. Firefox for example does not render SVGs with style attribute, which is the minified version of style="".

tdewolff added a commit that referenced this issue Aug 26, 2023
@tdewolff
SVG: keep attribute value when empty, see #576
8c966ad
@tdewolff
Copy link
Owner

Thanks, should be fixed now. XML and thus SVG must explicitly have an empty value.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@andreashaerter @tdewolff @vilunov