In the middle of making a new website using Gridsome and we have encountered some errors with SVG's and chrome, works fine on Firefox.
Basically looks like the <svg> has a width and height of 0px, 0px; However if i add a width of 100% it shows up in Chrome
HTML:
<div class="hero__brands__grid__logos__logo automotive hero__brands__grid__logos__logo--six">
<div id="bmw" class="imgPuller">
<div class="img">
<svg></svg>
</div>
</div>
</div>
SVG Code:
<svg id="BMW" data-name="BMW" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 53 53">
<g id="BMW-logo-grey-fallback-53px">
<g id="BMW-logo">
<g id="BMW-logo-fallback">
<g id="BMW_Grey-Colour_RGB-2" data-name="BMW Grey-Colour RGB-2">
<g id="BMW_Grey-Colour_RGB" data-name="BMW Grey-Colour RGB">
<path id="Shape" d="M26.5,0A26.5,26.5,0,1,0,53,26.5,26.49,26.49,0,0,0,26.5,0ZM51.28,26.5A24.78,24.78,0,1,1,26.5,1.72,24.79,24.79,0,0,1,51.28,26.5Z" style="fill: rgb(111, 111, 111);"></path>
<path id="Shape-2" data-name="Shape" d="M26.5,10.8v.86h0A14.85,14.85,0,0,1,41.34,26.5h.86A15.7,15.7,0,0,0,26.5,10.8h0m0,30.54A14.85,14.85,0,0,1,11.66,26.5H10.8A15.7,15.7,0,0,0,26.5,42.2" style="fill: rgb(111, 111, 111);"></path>
<g id="Group">
<path id="W" d="M39.19,15.32c.36.38.88,1,1.17,1.37l5.36-3.37c-.27-.35-.7-.88-1-1.25l-3.4,2.23-.23.19.17-.25,1.5-3-1.06-1-3,1.49-.26.17.2-.23,2.25-3.37c-.39-.34-.77-.64-1.26-1l-3.4,5.32c.43.33,1,.81,1.36,1.14l3.2-1.65.21-.15-.15.2Z" style="fill: rgb(111, 111, 111);"></path>
<path id="M" d="M27,8.58l1.47-3.26L28.58,5l0,.3.16,4.35c.51.05,1,.12,1.57.21L30,3.44c-.73-.08-1.46-.14-2.19-.17L26.41,6.83l-.05.26-.06-.26L24.86,3.27c-.73,0-1.45.09-2.19.17l-.23,6.45c.52-.09,1-.16,1.56-.21l.16-4.35,0-.3.09.29,1.47,3.26Z" style="fill: rgb(111, 111, 111);"></path>
<path id="B_22d" d="M15.18,13.72c.84-.89,1.32-1.91.47-2.89a1.65,1.65,0,0,0-1.87-.39l-.06,0,0-.06A1.55,1.55,0,0,0,12,8.48c-.8.08-1.41.62-3.08,2.46-.5.56-1.23,1.43-1.67,2l4.58,4.31C13.36,15.59,14,15,15.18,13.72Zm-6-1.06a30,30,0,0,1,2.34-2.54,1.26,1.26,0,0,1,.48-.3.57.57,0,0,1,.68.44,1,1,0,0,1-.34.84c-.49.54-2.28,2.4-2.28,2.4ZM11,14.35s1.74-1.83,2.31-2.41a2.28,2.28,0,0,1,.52-.45.6.6,0,0,1,.62,0,.54.54,0,0,1,.23.57,1.69,1.69,0,0,1-.45.7l-2.3,2.45Z" style="fill: rgb(111, 111, 111);"></path>
</g>
<path id="Path" d="M26.5,10.8V26.5H10.8A15.69,15.69,0,0,1,26.5,10.8Z" style="fill: rgb(0, 102, 177);"></path>
<path id="Path-2" data-name="Path" d="M42.2,26.5A15.69,15.69,0,0,1,26.5,42.2V26.5Z" style="fill: rgb(0, 102, 177);"></path>
</g>
</g>
</g>
</g>
</g>
</svg>
Since I encountered a similar Chrome-specific issue, and this is came up high on search results, I figured I would post my findings.
When using an
<img>tag, it displayed correctly, but I wanted to experiment with tweaking colors without using crazy filter hacks, so I tried to display it inline, which did not display. After some poking, I tried on Safari, which displayed as expected.Using the style property viewer in Chrome, it appeared to be applying a
* { revert: all }rule present in our CSS, which resulted in the reversion of the<path>element'sdattribute.Fix for this test case was
:not(path) { revert: all }. I would imagine other SVG tags are likely affected, so something like:not(svg *) { revert: all }is probably better (but I haven't tested it thoroughly).The following HTML can be loaded in Chrome, Firefox, and Safari to show only Chrome is affected: