Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
🐛 SVG <defs>, <symbol> and <use> are unsupported in parcel build
See original GitHub issue🐛 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 |
Issue Analytics
- State:
- Created 6 years ago
- Comments:15 (5 by maintainers)
Top Results From Across the Web
Top Related Medium Post
Top Related StackOverflow Question
Troubleshoot Live Code
Top Related Reddit Thread
Top Related Hackernoon Post
Top Related Tweet
Top Related Dev.to Post
Top Related Hashnode Post
@alyssaq after a quick research at the specs it looks like both attributes are required
xmlnsandxmlns:xlinkat thesvgelement.Now my IDE (IntelliJ) shows no more warnings.
Ha, its my fault. I ran each snippet of the svg in
svgoand got this error:{ error: 'Error in parsing SVG: Unbound namespace prefix: "xlink"\nLine: 0\nColumn: 98\nChar: >' }I added the
xlinkprefix to thesvgtag:parcel build index.htmlcorrectly outputted the svg!Learnt something new about svg.
Thanks for responding so quickly. 😄