Plus UI Design · Practical guides

Keep a squircle sharp after export

Preserve the SVG geometry and check the surrounding layout when the exported shape appears distorted.

The shape is stretched

Keep the exported viewBox and use matching width and height when the intended result is square. Check parent CSS that may stretch an image to fill an unrelated rectangle. Do not edit path coordinates just to compensate for a layout rule.

The stroke is clipped

Inspect the exported bounds and how the destination handles strokes at the edge. Compare a version without a stroke to isolate the issue. If you add a stroke later in another tool, allow room for it rather than assuming the original viewBox includes the new outline.

The color changes in a page

For inline SVG, inspect rules overriding fill, stroke or color. For an image element, compare the original file in a separate tab. Keep a copy of the exported SVG so you can distinguish an asset change from inherited page styling.