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?
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
@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?
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!
I have a similar problem. When exporting icons. My component icons are 24x24. I use them in design at 50x50. And they look and measure exactly 50x50. But when I export this 50x50 instance it adds 1px to some time to the width or height. Its very random. I am not able to get where this 1px adds to height while export
Sadly I found no fix, other than to do what you said: make sure all the vector graphics are fully contained within a frame that is the exact export size you want.
This does not solve the use case I mentioned, where graphics need to extend outside the viewbox. For that, the only “solution” it seems is to use Illustrator .
I understand your point perfectly Andrew, and I’d like to do the same. Restricting an objects viewbox would help a lot to fit that object within grids in design and code even though it’s “visual” exceeds the area it occupies. I’m very insterested in being able to do this in Figma.
Content extending beyond the bounds of the view box is totally valid. Icons are typography; this is roughly analogous to glyph kerning or optical corrections overlapping the baseline.
Additionally, effects like shadows cause the view-box to change unpredictably upon export. This is not great.
Definitely would be valuable to have an export option to “expand to include content”.
Did you ever find a solution to the viewbox issue? I’m trying to do something similar. As a dev, I sometimes like to animate elements of the svg using CSS transforms. It’s much easier to do so if the element is “centered” at the 0,0 point, which means that some of it will be outside of the viewbox.
Hey, this is a year old, I’m realising. As far as I know, it is not possible for SVG to show stuff that exceeds the viewbox. Also SVG doen’t support strokes that are set to “inside” or “outside”. So essentially this is a SVG restriction, not necessarily a Figma restriction.
If your frame is positioned at the X or Y axis with a decimal (like X:65.88 instead of 66), Figma will try to compensate with the extra pixel when it exports the SVG. It is the same behaviour I encountered in Adobe Illustrator. So just make sure all your frames are positioned properly on both X & Y axis
.