SVG icons aspect ratio issue

Firstly, thanks for GenerateBlocks Pro and GeneratePress Pro - both super helpful for me!

When adding SVG icons (provided by a client), I found that they looked OK in the Asset Library, but they became stretched when I used them in GB headlines. My SVGs are not all perfectly square. In the code they had a viewport set but not separate width and height attributes.

I fixed it by setting the viewport width and height (in the SVG code) to be the equal to largest dimension. Then I needed to set either the viewport x or y attribute to be a negative value equal to half the height-width difference.

(I also made other improvements to the opening SVG tag)

For example, this:

became:

I didn’t see a note in the documentation about ensuring SVG icons have same height and width, but I think GB’s css output assumes this.

1 Like

As of right now the SVG icons for Headlines/Buttons do assume that the icon is square. In most cases this is ok, but I agree it would be nice to be able to upload different shapes as well.

We’ll talk about the best way to achieve this/build it into the UI.

Thanks!

2 Likes