Inline SVG with Flex Layout

Published | Go Back

Be care­ful in set­ting the width or height to auto” when us­ing in­line SVG in HTML.

I was us­ing an in­line SVG for the logo. I set the height to be a fixed value, and the width to be auto” hop­ing that it would scale prop­erly. I was also us­ing the flex lay­out with justify-content” set to space-between”. My in­ten­tion was to put the logo at the left-most po­si­tion within the header and the nav­i­ga­tion bar at right-most. However, dif­fer­ent browsers ren­der this dif­fer­ently. If I’m re­mem­ber­ing it cor­rectly, Chrome and Firefox be­haved cor­rectly while Safari and IE had some is­sues. In Safari and IE, the width of the logo was much larger. It looked like the logo was tak­ing up the space that was orig­i­nally the sep­a­ra­tor since the width was set to auto”.

It’s sim­ple to solve this is­sue. Just don’t use auto” and man­u­ally set the cor­rect width.

As al­ways, I’m new to web de­sign and I prob­a­bly saw this is­sue due to some bad de­sign prac­tice.