When designing UI icons, badges, or button frames in Figma or Adobe Illustrator, setting stroke alignment to Inside or Outside feels natural. Aligning a 2px stroke to the inside ensures the graphic fits perfectly within a 24x24 pixel artboard without bleeding outside the container bounds. Everything looks pristine on the design canvas.

However, the moment you export that graphic as an SVG and attempt to style or animate it in code, disaster strikes. You inspect the exported XML, only to discover that your single stroke path has vanished. In its place sits a massive, unreadable compound filled path with hundreds of coordinates, or an unnecessary <clipPath> mask wrapping your artwork.

When you attempt to adjust stroke-width or animate the border with CSS transitions, nothing happens: the vector is no longer a stroke. This widespread developer headache is known as the SVG stroke alignment trap.

According to technical specifications published by the W3C SVG Working Group, web browser rendering engines natively support only one type of stroke geometry: Center-aligned strokes. Understanding how design software compensates for this limitation is the secret to producing clean, editable vector code.

Why Does Figma Mutate Inside and Outside Strokes?

Because the SVG standard does not provide native stroke-alignment="inside" or stroke-alignment="outside" attributes, vector design applications are forced to simulate the effect upon export. Depending on the design tool and path configuration, Figma employs one of two destructive workarounds:

1. Path Outlining into Compound Fills

For open paths or complex geometric shapes, Figma automatically outlines the stroke. A 1-pixel border path with 4 anchor points is converted into a filled polygon with 8 or more anchor points, inner and outer boundaries, and a solid fill attribute:

<!-- Expected Clean Vector: Native 1px Center Stroke -->
<rect x="1" y="1" width="22" height="22" rx="4" stroke="#00E676" stroke-width="2" fill="none"/>

<!-- Figma Inside Stroke Export: Outlined Compound Polygon -->
<path fill-rule="evenodd" clip-rule="evenodd" d="M5 0C2.23858 0 0 2.23858 0 5V19C0 21.7614 2.23858 24 5 24H19C21.7614 24 24 21.7614 24 19V5C24 2.23858 21.7614 0 19 0H5ZM2 5C2 3.34315 3.34315 2 5 2H19C20.6569 2 22 3.34315 22 5V19C22 20.6569 20.6569 22 19 22H5C3.34315 22 2 20.6569 2 19V5Z" fill="#00E676"/>

Once a stroke is outlined into a filled path, all stroke editing capabilities disappear. You cannot change line caps, adjust border weights, or animate path lengths with CSS stroke-dasharray.

2. The Destructive Clipping Mask Workaround

For standard rectangles and circles, Figma sometimes preserves the center stroke but nests it inside a <clipPath> that cuts off the outer half of the stroke. As discussed in our analysis of the SVG masking trap, unneeded clip paths frequently vanish or cause rendering glitches on iOS Mobile Safari.

3 Rules for Clean, Production-Grade SVG Strokes

To ensure your exported vectors remain lightweight, semantic, and fully styleable with CSS, follow these three architectural design rules:

1. Always Design with Center Strokes

Make Center alignment the non-negotiable standard in your design system. Instead of setting an inside stroke on a 24x24 icon, inset the vector path by half the stroke width. For a 2px stroke on a 24px icon, draw the bounding rectangle at x="1" y="1" width="22" height="22". The 2px centered stroke expands 1px inward and 1px outward, fitting precisely within the 24px boundary without clipping.

2. Utilize vector-effect="non-scaling-stroke"

When scaling vector icons dynamically in responsive layouts, strokes can become unnaturally heavy or hairline thin. Adding vector-effect="non-scaling-stroke" instructs the browser engine to maintain a constant physical pixel thickness regardless of container transformations.

3. Sanitize and Optimize with CrushSVG

Before committing vector assets to a code repository, process them through the CrushSVG SVG Optimizer. CrushSVG automatically strips redundant clip wrappers, collapses unnecessary groups, and normalizes stroke properties across modern rendering engines.

From Web Applications to Corporate Email: The Stroke Breakdown

While frontend web developers can maintain clean strokes using coordinate insets and CSS variables, deploying stroked vector graphics into corporate email marketing campaigns is fraught with peril. Desktop Microsoft Outlook on Windows uses the Microsoft Word HTML engine, which does not interpret modern SVG stroke properties, line-caps, or vector scaling rules.

When an SVG with complex borders enters a corporate inbox, Outlook drops stroke definitions entirely or misinterprets vector coordinates, rendering buttons with missing borders or unstyled black boxes. To understand why email clients struggle with vectors, review our guides on the viewBox dilemma and why SVGs trigger antivirus and spam filters.

To eliminate stroke rendering errors in corporate communications, leading businesses rely on SigSignature. SigSignature transforms corporate vector marks and badges into Microsoft Word-compliant, 2x Retina PNG table architectures with hard-coded pixel borders. This ensures executive branding and badges display with razor-sharp fidelity across Outlook, Apple Mail, Gmail, and mobile apps without stroke clipping.

SVG Stroke Optimization Pre-Flight Checklist

Audit Stroke Alignment in Figma: Select all vector shapes and verify that Stroke Alignment is explicitly set to Center rather than Inside or Outside.
Inspect Raw Exported XML: Open the exported SVG file. If you see fill-rule="evenodd" on a simple border icon, Figma has outlined the stroke. Re-export with Center alignment.
Check for Redundant ClipPaths: Ensure no unneeded <clipPath> elements wrap simple stroke borders using the CrushSVG SVG Optimizer.
Test Dynamic CSS Restyling: Verify that changing stroke: #FF5C1C and stroke-width: 3px in your stylesheet modifies the border cleanly without double-outline distortion.

Frequently Asked Questions

Why does Figma outline inside strokes on export?

The SVG 1.1 and SVG 2 web standards only support center-aligned strokes. To maintain the visual appearance of an inside border in browsers, Figma must convert the stroke into an outlined compound polygon.

Can I animate an outlined stroke with stroke-dashoffset?

No. CSS stroke-dashoffset and line-drawing animations require genuine vector stroke paths. Outlined strokes are filled polygons with closed perimeter boundaries that cannot be animated along a single centerline.

How do I convert an SVG with complex strokes into a universal image?

You can upload your SVG file to the CrushSVG Vector Converter to rasterize the graphic into a clean, high-resolution 2x Retina PNG that renders identically across all browsers and email clients without stroke distortion.

Ecosystem Engineering Tools

CrushSVG: High-performance vector conversion and optimization platform. Clean stroke geometry, strip redundant clip masks, and convert SVGs to 2x Retina PNGs locally in your browser.
SigSignature: Autonomous enterprise email signature platform. Converts vector marks and executive signatures into universal, Retina-ready HTML email signatures tested across corporate clients.
The Nevon: Creative engineering studio building high-performance developer tools, deliverability software, and web optimization platforms.

The SVG Stroke Alignment Trap: Why Inside and Outside Borders Break on Export (And How to Fix It)