Template Menu
How to use an SVG vertically centered with a header
SVG copied from Matthias's project
Display = inline
Display = inline-block
SVG created from scratch using Logoist
Display = inline
Display = inline-block
SVG file created using Logoist and then dropped into https://svgsprit.es to create the sprite. The sprite has a class of 'icon' which I am then targetting to control the width at different screen sizes.
Display = inline-block
Design Notes
Experimenting with how to get an SVG to be vertically centered with a header.
The Display swatch is applied both to the SVG and the header. Setting Display to 'inline' gets me almost there but Display = 'inline-block' appears to work better at different header sizes.
Notes:
- The two cols stack has Vertical Align set to 'middle'. The SVG is sized at 25 pixels and the left column is set to 'shrink to content'. The right column is set to 'Auto'.
- The Header has a left margin of 4 to seperate the header slightly from the SVG.
- In both examples the Display swatch is applied to both the SVG stack and to the Header stack.
It might be wise to reduce the size of the SVG for mobile.
Updated 15th April 2025 Following a question from Dominik about how to get an SVG to behave responsively, Steven Jones suggested looking at SVG sprites which I'd never heard of before.
The last example shows an SVG Sprite created initially in Logoist and the SVG file dropped into https://svgsprit.es. The output is two parts and I have loaded both bits of code into the SVG stack.
There is a default class called "icon" which is part of this SVG code. I have then targetted the icon class with three different values for width depending on small/medium/large. I had to use 'force' to get this to work.
I'm still not clear about the difference between this sprite and a normal piece of SVG code! More research needed!
