Vue inline svg & path may get minified in a wrong way

🐛 bug report

I started my project with this example.
And inserted several inline svgs in a Vue component like so

  <svg width="80" height="80">
    <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
  export default {}

And when I run parcel build index.html such inline svgs inside Vue component get minified into something like this

{attrs:{d:"M0 0l115 115h15l12 27 108 108V0z"}}

which I am not sure if the minifier tries to give a more compressed interpolation of the original d attribute inside path tag, but the result that shows on the final html website seems indeed wrong. And I tried to run parcel build index.html with flag --no-minify, which does work in an expected way.

🎛 Configuration (.babelrc, package.json, cli command)

here is my package.json

"devDependencies": {
    "@vue/component-compiler-utils": "^2.2.0",
    "node-sass": "^4.9.3",
    "parcel-bundler": "^1.9.7",
    "vue-template-compiler": "^2.5.17"
  "dependencies": {
    "vue": "^2.5.17",
    "vue-hot-reload-api": "^2.3.0"

here is my babel config

  "presets": [

🤔 Expected Behavior

the d attribute in path tag should be minified and showed as unminified

😯 Current Behavior

the d attribute is not interpolated correctly after minification

💁 Possible Solution

no ideas yet

🔦 Context

I am trying to insert svg into a vue component and use parcel to build and minify the whole thing.

💻 Code Sample

Basically start with the this example and throw few svg path tags with d attribute. Run parcel build index.html after that.

🌍 Your Environment

Software Version(s)
Parcel 1.9.7
Node 8.9.3
npm/Yarn 5.5.1
Operating System macos sierra 10.12.6

1 possible answer(s) on “Vue inline svg & path may get minified in a wrong way