Polaris 6 and SVG, Chrome is not displaying images nicely

Solved
HunkyBill
Shopify Expert
4615 54 532

I have an SVG that looks very nice in Safari and Firefox, but Chrome 95 seems to be butchering the SVG. Viewing the image in a new tab shows it perfect, in Chrome, so it is only in the context of a Polaris layout that the evil takes form.

 

 

   <Layout.Section secondary>
            <div>
              <img src={imagePath('./logo.svg')}  />
            </div>

 

 

Why would Chrome be having problems with these images? It is like a huge chunk of the logo is cut off or hidden, and only part of the logo is visible.

Custom Shopify Apps built just for you! hunkybill@gmail.com http://www.resistorsoftware.com
Accepted Solution (1)

Accepted Solutions
HunkyBill
Shopify Expert
4615 54 532

This is an accepted solution.

Never mind. It seems Chrome chokes on using image elements for SVG, so I switched to using an object element and all three browsers render SVG fine.

Custom Shopify Apps built just for you! hunkybill@gmail.com http://www.resistorsoftware.com

View solution in original post

Reply 1 (1)
HunkyBill
Shopify Expert
4615 54 532

This is an accepted solution.

Never mind. It seems Chrome chokes on using image elements for SVG, so I switched to using an object element and all three browsers render SVG fine.

Custom Shopify Apps built just for you! hunkybill@gmail.com http://www.resistorsoftware.com

View solution in original post