Figma Support Forum

Setting an explicit SVG viewbox

I’m developing an icon set, and attempting to export a set of uniformly sized SVG assets.

Each icon has a 20 x 20 frame, with the vector graphics nested inside. In some cases, the graphics have strokes that exceed the edges of the frame, even though the vector paths themselves are inside the frame.

In those cases, when exporting to SVG, the viewbox is greater than 20 x 20. How can I restrict the viewbox to a very specific size?

Seems like this post is related, but I’m having a hard time understanding the guidance: SVG exports at a different size to W & H values in editor - #3 by Corin

Thanks!

Assuming you’re exporting the frame (as opposed to only its child vector element), try checking ‘Clip content’ on the frame’s properties
image

Turning on “Clip Content” works to restrict the viewbox, but it clips the content… obviously.

This cuts off the strokes when I use the icons as components in Figma (which I do want to exceed the frame borders. It also adds clipPaths to the exported SVGs, which I do not want.

In raw SVG, it is totally possible to have a viewbox with contents that appears outside it.

Ah. I was wondering why you’d want to clip the content … now I understand.

I didn’t realize one could have contents extending beyond the confines of a viewbox! That’s very good to know, as I’ve wrestled with something similar in our design system.

In the design panel, you can change property of Stroke to be drawn on the inside of vector shape. This should help. Another option, if you’d like to keep the stroke centered to the vector, is to be aware of the width of the stroke and place the vector accordingly. For example a shape with centered stroke at 2 pixels width and 18 pixels wide, can start at X position 1, and end at X position 19. The stroke would then touch a frame with the width of 20.

Thanks. In other words, one way or another I need to make sure my graphics do not extend beyond the 20 x 20 frame.

My question really is how can I make the exported SVG conform its viewbox to the exported frame? In Figma’s design environment you can have a frame’s content extend outside of it, without effecting the bounding box.

I would assume that exported assets should follow the same logic. If I export a 20 x 20 frame, I expect a 20 x 20 asset.

I’m not sure how this behaves when you have an element that exceeds the frame. If you would use option Clip Content in the Frame options panel I expect that all SVGs would conform to the dimensions you’ve set on the frames. When the graphical elements are inside the frame the SVG exports will keep the dimensions of the frame. I would try to just keep elements inside the Figma frames and see if that covers your use :+1:

@Harald_Skogland I explained in my reply to @Rinker_Todd that using the “Clip Content” does conform the viewbox to the frame, but it also adds a “clipPath” element to the SVG, thus negating the thing I’m trying to do.

My goal is to have a constrained viewbox, but without clipping.

Then… place your graphical elements inside the frames and keep all frames the same size? Sorry, I’m at a loss why you’d want to have any graphical elements exceed the bounds of your frames. If you have icons of varying size you can have empty space between the graphical elements and the frames. Maybe someone with more specific knowledge on SVG and clip-paths could join in here, maybe I just don’t get your use case at all…? If placing the graphical elements within the bounds of fixed-size frames does not work for you, could you explain why?:v::slightly_smiling_face:

Sure! I have two use cases really.

In the case of these icons, it’s to allow them to maintain uniform visual weight, despite differences in shape. Their “footprint” size, the space they take up on a document, should always be 20x20 regardless of which icon it is. But the dimensions of the artwork may need to be bigger or smaller to make them all “feel” the same size. This article explains it better than I can: https://medium.muz.li/optical-effects-9fca82b4cd9a

The second use case is purely creative. Sometimes you want SVG artwork to spill beyond the confines of its bounding box… because it looks cool. Here’s a really quick and ugly example, but hopefully you see what I mean.

I’ve had this specific problem on a client project, and I had to turn to Illustrator just to solve it… blech!

Ok I see. In your first case, I’d use guides inside the frames. So say all your icon frames are 48px and this will be your maximum WxH. Make guides with the ruler that is say, 42px or whatever and then generally have your designs dip above and below that treshold in dimensions, but never exceed your 48px frame. This will ensure uniform balance for your icons but not mess around outside the frame bounds.
Your second case… I suppose, if you have graphical elements to liven up a webpage and you want to have them in a similar style and then exchange them, I could see you might want to do that. I think there’s a lot of different ways to do that depending on the site layout, where the elements are positioned and so on. You could just apply the ‘guiding frame’ workflow to the second case as well to keep things simple. Good luck!

Thanks for your thoughtful feedback and workaround suggestions.

Just to bring it back to the original question, which I gather is just not possible in Figma at the moment: how does one restrict the viewbox on an exported SVG without clipping. As I suggested, this is possible to do in other vector graphics software, such as Illustrator, and Affinity Designer.

I really love Figma and I don’t want to spend any time in other tools if I don’t have to. Lets consider this a Figma feature request!