When "just" developing locally my SVG looks perfect. When I build the code the SVG gets all strange. It turns out that during build the property "viewbox" is removed from the
I use pretty plain parceljs so no babelrc.
.posthtmlrc looks like
{
"plugins": {
"posthtml-md": {
"root": "src"
}
}
}
In parcel we have `"main": "dist/index.html",``
The command is parcel build src/index.html --no-source-maps
When having
<svg
style="position: relative; top: 2px;"
xmlns="http://www.w3.org/2000/svg"
width="14"
height="14"
viewBox="0 0 24 24"
>
<path
fill="#af7d5c"
d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zm0-2c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm6 13h-5v5h-2v-5h-5v-2h5v-5h2v5h5v2z"
></path>
</svg>
in a file I expect the viewBox="0 0 24 24" to be part of the builded file.
The builded file does not contain viewBox="0 0 24 24" (prettified the minified output to make it easy to see)
<svg
style="position: relative; top: 2px;"
xmlns="http://www.w3.org/2000/svg"
width="14"
height="14"
>
<path
fill="#af7d5c"
d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10S2 17.514 2 12 6.486 2 12 2zm0-2C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm6 13h-5v5h-2v-5H6v-2h5V6h2v5h5v2z"
/>
</svg>
Not sure
I cant use SVGs in my design
| Software | Version(s) |
| ---------------- | ---------- |
| Parcel | 2.0.0-alpha.3.2
| Node | v12.14.0
| npm/Yarn | yarn 1.22.4
| Operating System | macOS Mojave
svgo should only do this when the viewbox attribute isn't needed, but this should disable it nevertheless:
.htmlnanorc with
{ "minifySvg": { "plugins": [{ "removeViewBox": false }] } }
Neat! thank you!
Most helpful comment
svgo should only do this when the viewbox attribute isn't needed, but this should disable it nevertheless:
.htmlnanorc with