Finally found a bug that was hiding from me for some months now 🔍 Perhaps related to #1460.
I have some SVG components like this, really just a pug SVG:
<template lang="pug">
svg.a(class='car', xmlns='http://www.w3.org/2000/svg', width='440', height='440', viewbox='0 0 440 440')
style.
.a{stroke:null;vector-effect:non-scaling-stroke;}.b{stroke:null;}.c{fill:#8e8e8e;stroke:null;}
metadata.b image/svg+xml
defs.b
clippath.a(clippathunits='userSpaceOnUse')
path.a(d='m0 2400 2400 0 0-2400-2400 0 0 2400z')
g.b
title.b background
rect(height='442', width='442', y='-1', x='-1', style='fill:none;stroke:null')
g.b
title.b Layer 1
g.b
path.c(d='m72.2 72.9c-13.6 13.6-13.5 35.5 0 49.1 13.6 13.6 35.5 13.6 49.1 0 13.6-13.6 13.6-35.5 0-49.1-13.6-13.6-35.5-13.6-49.1 0m80.1-28.8 30.1 30.1c2.2 2.2 2.2 5.9 0 8.1-27.5 27.5 5.9 71.1 26.1 91.3l73.7 73.7c9.8 9.8 9.8 25.8 0 35.6-9.8 9.8-25.8 9.8-35.6 0l-73.7-73.7c-20.2-20.2-63.7-53.6-91.3-26.1-2.2 2.2-5.9 2.2-8.1 0l-30.1-30.1 5.6-5.6-2-2-5.6 5.6-29.8-29.8c-2.2-2.2-2.2-5.9 0-8.1l12-12c-2.3-20.2 4.3-41.3 19.9-56.8 15.5-15.5 36.6-22.1 56.8-19.9l12-12c2.2-2.2 5.9-2.2 8.1 0l29.8 29.8-5.6 5.6 2 2 5.6-5.6z')
g.b
path(d='m396.1 275.6-120.6 120.6c-1.5 1.5-4.1 1.5-5.6 0l-5.6-5.6c-1.5-1.5-1.5-4.1 0-5.6l120.6-120.6c1.5-1.5 4.1-1.5 5.6 0l5.6 5.6c1.5 1.5 1.5 4.1 0 5.6m-16.8-16.8-120.6 120.6c-1.5 1.5-4.1 1.5-5.6 0l-78.5-78.5c-1.5-1.5-1.5-4.1 0-5.6l120.6-120.6c1.5-1.5 4.1-1.5 5.6 0l78.5 78.5c1.5 1.5 1.5 4.1 0 5.6m39.3 39.3-120.6 120.6c-1.5 1.5-4.1 1.5-5.6 0l-11.2-11.2c-1.5-1.5-1.5-4.1 0-5.6l120.6-120.6c1.5-1.5 4.1-1.5 5.6 0l11.2 11.2c1.5 1.5 1.5 4.1 0 5.6', style='fill:#ff3232;stroke:null')
g.b
path.c(d='m281 248.6c-9.1-9.1-23.8-9.1-32.9 0-9.1 9.1-9.1 23.8 0 32.9 9.1 9.1 23.8 9.1 32.9 0 9.1-9.1 9.1-23.8 0-32.9')
</template>
<style lang="scss" scoped>
svg.car {
transform: rotate(-90deg) !important;
margin-top: 2px !important;
}
</style>
The problem occurs when the component gets inserted into the html. Some "optimization engine" changes the viewBox
attribute of the SVG element to lowercase. The result: The viewBox
attribute is ignored by the browser.
This issue sometimes disappears only to reappear again the next time I run yarn dev
.