“svg” Articles

Using overflow to align oddly-sized SVGs (like avatars and icons)

A row of three avatar images featuring cartoon faces looking at each other.

When building interfaces, it's common to have a series of SVG (Scalable Vector Graphics) images that need to be aligned in some way, but the composition of the assets doesn't easily allow for it. Sometimes, you know this from the start and can plan accordingly. But other times you have to accommodate graphical changes mid-project that can be a mess to deal with.

In this article I'm going to dive into this issue and show an interesting way we can solve it by laying out our graphics a certain way in Adobe Illustrator and then displaying them on our page by modifying the CSS overflow property.

Read Article