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

html-minifier produces invalid inline SVG #45

Closed
alefteris opened this issue Apr 11, 2013 · 5 comments
Closed

html-minifier produces invalid inline SVG #45

alefteris opened this issue Apr 11, 2013 · 5 comments
Labels
possible-feature

Comments

@alefteris
Copy link

This is the original SVG in my HTML:

<body>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20">
    <rect width="20" height="3" y="2" fill="#fff"/>
    <rect width="20" height="3" y="8.5" fill="#fff"/>
    <rect width="20" height="3" y="15" fill="#fff"/>
</svg>
</body>

And here is the result after html-minifier:

<body>
<svg xmlns="http://www.w3.org/2000/svg" width=20 height=20>
    <rect width=20 height=3 y=2 fill="#fff">
    <rect width=20 height=3 y=8.5 fill="#fff">
    <rect width=20 height=3 y=15 fill="#fff">
</svg>

The SVG will not display properly any more (only the first rect is displayed). If I add ending slashes in the rect elements, it will display property, but it's still not valid SVG.

So maybe html-minifier shouldn't touch SVGs?

I originally reported it against gruntjs/grunt-contrib-htmlmin#19, that uses html-minifier.
@alefteris alefteris mentioned this issue Apr 11, 2013
Closed
@matt-bailey
Copy link

I'm not sure if this is a related issue, but using object tags seems to create a similar problem (I'm also using grunt-htmlmin, which uses html-minifier). However, I'm a complete Grunt noob, so it may well be something I'm doing wrong...

This is my source html:

<object type="image/svg+xml" data="image.svg">
    <div>[fallback image]</div>
</object>

This is the output html:

<object type="image/svg+xml" data="image.svg">
    </object><div>[fallback image]</div>

As you can see, the inner div is somehow magically moved outside of the object.

All the html-minifier options are set to whatever the defaults are.

@matt-bailey matt-bailey mentioned this issue Apr 18, 2013
Closed
@kangax
Copy link
Owner

kangax commented Jun 19, 2013

This could possibly be integrated with https://github.com/svg/svgo

@onearmfrog
Copy link

Bug still persists, tags inside svg are broken. I could not find any option to disable html-min for specific tags to solve this.

@xdhmoore
Copy link

xdhmoore commented Dec 6, 2013

I am having the same issue with inline svg in my html. I have a couple tags whose contents are populated with d3.js:

<svg>
  <g class="stuff"/>
  <g class="otherstuff"/>
</svg

htmlmin produces the following:

<svg>
  <g class="stuff">
  <g class="otherstuff">
</svg>

Which causes the browser to interpret it as:

<svg>
  <g class="stuff">
    <g class="otherstuff"></g>
  </g>
</svg>

@xdhmoore xdhmoore mentioned this issue Dec 13, 2013
Closed
@kangax
Copy link
Owner

kangax commented Feb 3, 2014

Duplicate of #76

@kangax kangax closed this as completed Feb 3, 2014
@edmorley edmorley mentioned this issue Sep 14, 2018
Closed
@alexander-akait alexander-akait mentioned this issue May 16, 2022
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
possible-feature
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@kangax @alefteris @matt-bailey @onearmfrog @xdhmoore