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.

The setup

Let's imagine we're working on a profile selection screen for a streaming video platform. After logging in, a user sees a screen similar to the one below, where they're asked to select from a list of viewer profiles for that account. Here, we're displaying three profile links that contain abstract, cartoon avatars:

An interface mockup with a heading, "Who is watching?", above a row containing three links. Each link contains a text name and an avatar of a cartoon face.

Though we're only displaying three, there could be many more profiles here, and each profile user can select an avatar from a collection of dozens or even hundreds of images. The design team has provided us an Illustrator file containing the avatar library:

Three 128 x 128px artboards in Adobe Illustrator displaying avatar illustrations. The first is a bearded face with raised eyebrows, the second is a smiling face with large glasses, and the third is a smirking face with a ponytail.

All are straightforward illustrations that live within 128 x 128px artboards. Using Illustrator's "Export for Screens..." feature (File > Export > Export for Screens...), we export them as SVGs and then paste their content inline into our page's HTML, which looks like this:

                        <h2>Who is watching?</h2>

<div class="profiles">

	<!-- Avatar #1 link -->
	<a href="#">
		<span class="name">Robin</span>
		<svg viewBox="0 0 128 128" width="128" height="128">
			...
		</svg>
	</a>

	<!-- Avatar #2 link -->
	<a href="#">
		<span class="name">Patty</span>
		<svg viewBox="0 0 128 128" width="128" height="128">
			...
		</svg>
	</a>

	<!-- Avatar #3 link -->
	<a href="#">
		<span class="name">Devin</span>
		<svg viewBox="0 0 128 128" width="128" height="128">
			...
		</svg>
	</a>

</div>
                    

The key thing to note here is that the three svg elements have viewBox attributes that reflect their 128 x 128px Illustrator artboards. In case you're a little fuzzy, an SVG viewBox acts more or less the same as an artboard in Illustrator in that they both specify the boundaries of a graphic's visual "canvas".

And even though we also have a width and height set on the elements themselves as a fallback, we size both of these properties in CSS to 8em, the relative unit equivalent of 128px. This ensures that all avatars will be the correct size in our layout:

                        .profiles a svg {
	display: block;
	height: 8em;
	width: 8em;
}
                    

This gives us our expected result:

See the Pen Original Avatars by Darin (@dsenneff) on CodePen.

Note:

These examples are simplified for the purposes of this article. They are not production-ready and are missing key functionality like visual interaction states, accessible labels, and other details.

The problem

Oh no! Sometime after we implemented our profile selection page, the design team notified us that they made some changes to the avatars:

Modified avatars with two guide lines illustrating how the core of the illustrations continue to line up vertically along the top and bottom, while secondary icon elements extend beyond them.

Specifically, the first avatar has had its eyebrows moved up and its beard extended down so that both elements stretch beyond the original height. The second avatar's glasses now are no longer clipped off on the left and right and extend past the original width, and the third avatar's ponytail breaks out of the original box both to the right and bottom.

The design team is aiming for a visual aesthetic where each avatar has elements that "break out" or extend beyond their backgrounds, while continuing to line up with one another’s visual core. They're going to use this style on many new avatars moving forward.

This poses a problem to our original framework, in which each avatar was sized exactly 128 x 128px and made it easy to swap out any avatar for another. The new avatar style means the illustrations will have no consistent size or dimensions, making managing them difficult.

Looking at these updated avatars in Illustrator, we see that this now drastically changes the artboard sizing. The first is now 128 x 164px, the second is 160 x 128px, and the third is 146 x 154px.

Illustrator artboards with their new measurements overlaid on top. Now, the first avatar is 128 x 164px, the second is 160 x 128px, and the third is 146 x 154px.

As a test, let's export these avatars using the new artboard sizes and replace our old ones. Note the new, irregular viewBox sizes here on the svg elements:

                        <h2>Who is watching?</h2>

<div class="profiles">

	<!-- Avatar #1 link -->
	<a href="#">
		<span class="name">Robin</span>
		<svg viewBox="0 0 128 164" width="128" height="164">
			...
		</svg>
	</a>

	<!-- Avatar #2 link -->
	<a href="#">
		<span class="name">Patty</span>
		<svg viewBox="0 0 160 128" width="160" height="128">
			...
		</svg>
	</a>

	<!-- Avatar #3 link -->
	<a href="#">
		<span class="name">Devin</span>
		<svg viewBox="0 0 146 154" width="146" height="154">
			...
		</svg>
	</a>

</div>
                    

Which gives us this result:

We can clearly see that the irregularly-sized avatars are each scaled in some way to fit into the original layout we created. This kills the visual alignment that the design team was trying to achieve. Below, you'll notice that tops and bottoms of each avatar background do not line up:

Detailed screenshot of the three modified avatars placed on the page. Lines are overlaid which show the misalignment of the icons' background squares.

If you recall, our layout uses some minimal CSS to size the avatars:

                        .profiles a svg {
	display: block;
	height: 8em;
	width: 8em;
}
                    

Before, we could add as many profile links to our page as we liked and it would just work. Now with avatars of varying dimensions, the layout visually breaks. By changing the avatars to use viewBox values that were no longer 8 x 8em (128 x 128px); the browser was still expecting them at that size, scaling them to fit and throwing off our visual alignment.

At this point there's a few potential solutions that might pop into our heads:

  1. Resize all of the artboards in Illustrator to one consistent large dimension with extra space that can accommodate any elements that "break out" of those arbitrary visual borders (ex: 160 x 160px). Then, generate new SVGs and swap them in. The problem with this is that while it's not a ton of work to do this to three avatars, the actual project has dozens (and potentially hundreds) of avatars for users to choose from. Which would make resizing all of them and updating the project a huge undertaking.
  2. Add CSS rules for each avatar to size and position it correctly. Even with three avatars, this is kind of a pain to do, let alone doing it to a huge number of them. We certainly don't want to be creating CSS classes for every avatar in our library. And depending on how we've built things, we might also need to add styles to adjust other aspects of the links themselves so that nothing else gets out of whack.
  3. Use larger artboards from the start with built-in extra space. This may seem like the most obvious solution, but oftentimes teams can't or don't plan that far ahead. Here, the design changes are being applied to a project that had already been developed with different visual requirements.

Each of those are fine solutions, but they also have disadvantages as I mentioned. However, there's another solution that, while unconventional, can work great in situations like this.

The solution

Our issue essentially boils down to us building a layout that expects avatars in one size, then "breaks" when it gets them in another. So what if we could make those changes to the avatars, keep the alignment and visual aesthetic, all while retaining the original sizing? Let's look at a solution that does just that.

Jumping back over to Illustrator, let's size the artboards back to their original dimensions while lining up the avatars visually the way they need to be:

Illustrator artboards with their measurements overlaid on top, showing a consistent 128 x 128px.

You can see that the artboards now use a consistent 128 x 128px sizing, and their backgrounds are aligned as designed. However, some of the secondary elements now fall outside of their artboards. Let's export these new artboards and see how that affects things.

Initiate the "Export for Screens..." function yet again to export a new set of SVGs. It's important that you use this method to export the SVGs from Illustrator. When you use "Export for Screens...", Illustrator honors the specified artboard size and uses that for the viewBox value, regardless of how large or small that artboard's contents are. It will then use relative coordinates for all elements that belong to that artboard. So if something is positioned beyond the artboard bounds, that element's coordinates will reflect that.

Note:

Alternatively, Illustrator's "Export As..." export feature will re-crop artboards to the size of their contents, so we'd end up with irregular viewBox values again. The "Save As..." method is not recommended either, as that ignores artboards completely and creates one giant, unoptimized svg combining the contents of the entire document.

So, we export the new SVG images and update our page with their contents:

                        <h2>Who is watching?</h2>

<div class="profiles">

	<!-- Avatar #1 link -->
	<a href="#">
		<span class="name">Robin</span>
		<svg viewBox="0 0 128 128" width="128" height="128">
			...
		</svg>
	</a>

	<!-- Avatar #2 link -->
	<a href="#">
		<span class="name">Patty</span>
		<svg viewBox="0 0 128 128" width="128" height="128">
			...
		</svg>
	</a>

	<!-- Avatar #3 link -->
	<a href="#">
		<span class="name">Devin</span>
		<svg viewBox="0 0 128 128" width="128" height="128">
			..
		</svg>
	</a>

</div>
                    

Notice that the viewBox attributes of the svg elements are back to their original value of 0 0 128 128, matching our once-again 128px square artboards. Here's how that looks:

Looks good! The elements that we were intending to align are now aligned perfectly:

Detailed screenshot showing the avatars aligned correctly, but some avatar elements are clipped off.

However, the parts of the avatars that extend beyond the viewBox are not visible. This is because by default, the CSS overflow value of svg elements is set to hidden, meaning anything outside of the viewBox gets clipped off.

So to solve this, we can make a small change to the CSS styling our svg elements:

                        .profiles a svg {
	display: block;
	height: 8em;
	width: 8em;
	overflow: visible;
}
                    

When we add a declaration for the overflow property with a value of visible, we tell the browser to display any elements that extend beyond an svg's viewBox. For us, that means that we can now see those parts of the avatars that were outside of their Illustrator artboards:

That gives us the result we were looking for!

Conclusion

On the design side, maintaining and adding to the avatar library becomes super simple. We simply need to communicate to the design team to use a base 128 x 128px artboard and background. That means we can export any avatar, with or without overflowed elements, the same way and it will always work in our layout. The consistent artboards result in consistent svg viewBoxes.

That lets the development team avoid having to add complicated logic and style rules to account for a library of avatars in various sizes. Using the overflow property, we can display off-canvas elements while tricking our layout into thinking that all avatars takes up the same amount of physical space regardless if visually they do or not. This makes our layout framework much simpler and easy to maintain.

This is a handy tactic that can be useful in the right situation! Here we used profile avatars, but this could easily apply to icon systems, banner illustrations, and other situations that involve SVG assets.

Newer Article: Functional title elements, part 1