parcel: 🐛 SVG , and are unsupported in parcel build

🐛 bug report support SVG <defs>, <symbol> and <use> in HTML

🤔 Expected Behavior

SVG <defs>, <symbol> and <use> tags to be present in the output minified html file.

😯 Current Behavior

Ive been able to consistently reproduce the problem in one index.html file:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <svg xmlns="http://www.w3.org/2000/svg">
      <defs>
        <g id="circle">
          <circle cx="100" cy="100" r="100"/>
        </g>
      </defs>
    </svg>
    <div id="app">
      <svg style="display:block;margin:0 auto;" height="250px">
        <use xlink:href='#circle' href='#circle'/>
      </svg>
    </div>
  </body>
</html>

run: parcel build index.html

output:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> </head> <body> <svg xmlns="http://www.w3.org/2000/svg"/> <div id="app"> undefined </div> </body> </html>

The <defs> tag disappears and <use> tag is replaced with undefined. Note that I use xlink:href as href is not supported in Safari 11

💁 Possible Solution

Using <svg> works and is transpiled correctly. I could omit the use of <defs> and move the entire <svg> content to all the places I have the <use> tag. Sadly, as you’ll notice, that’ll mean having repeated svgs which <defs> were created to solve.

🔦 Context

I define my re-usable svgs in <defs> or <symbol> in index.html and use them throughout my application.

🌍 Your Environment

Software	Version(s)
Parcel	1.5.1
Node	9.4.0
npm	5.6.0
Operating System	macOS High Sierra
Browsers	Safari 11.0.1, Chrome 63.0.3239.132

About this issue

Original URL
State: closed
Created 6 years ago
Comments: 15 (5 by maintainers)

Commits related to this issue

fix parsing of SVG (see https://github.com/parcel-bundler/parcel/issues/703) — committed to siamkreative/alex-portfolio by siamkreative 6 years ago

Most upvoted comments

@alyssaq after a quick research at the specs it looks like both attributes are required xmlns and xmlns:xlink at the svg element.

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
>
    <use xlink:href="assets/sprite.svg#icon"></use>
</svg>

Now my IDE (IntelliJ) shows no more warnings.

+13

davidenke on May 8, 2018

Ha, its my fault. I ran each snippet of the svg in svgo and got this error: { error: 'Error in parsing SVG: Unbound namespace prefix: "xlink"\nLine: 0\nColumn: 98\nChar: >' }

I added the xlink prefix to the svg tag:

<svg xmlns:xlink="http://www.w3.org/1999/xlink" style="display:block;margin:0 auto;" >
     <use xlink:href='#circle' href='#circle'/>
</svg>

parcel build index.html correctly outputted the svg!

Learnt something new about svg.
Thanks for responding so quickly. 😄

alyssaq on Jan 30, 2018

Please re-open

speigg on Mar 9, 2019

Please file an issue with htmlnano.

devongovett on Aug 29, 2019

This behaviour occurs anytime Parcel take a URL and resolves to another file.

And in that other issue, another build step outside of Parcel was added that uses data-anchor to re-add that hash: https://github.com/parcel-bundler/parcel/issues/6048#issuecomment-808597733

mischnic on Apr 4, 2021

@speigg A quick work around: pass --no-minify to parcel build, or move your inline svg standalone.

This is designed behavior of posthtml, which calls htmlnano as minifier, which calls svgo to minify your inline svg.

yw662 on Jul 3, 2019