SVG paint-order Property
paint-order controls the sequence in which fill, stroke, and markers are drawn, letting a stroke render behind its fill instead of on top.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
Default Paint Order and Why It Sometimes Needs Changing
By default, SVG paints fill first, then stroke on top of it, then markers, which means a thick stroke on text or a thin shape can visually eat into the fill area from both sides — setting paint-order="stroke fill" reverses that order, painting the stroke behind the fill so the full fill color remains visible without the stroke overlapping and shrinking it.
- Default order paints fill, then stroke on top, then markers last
- A thick stroke by default can visually eat into the fill area from both sides
- paint-order="stroke fill" reverses this, keeping full fill color visible
Common Use Case: Outlined Text Without Fill Shrinkage
paint-order is especially useful for text with a bold outline stroke, since without adjusting paint order, a thick stroke visually thins the letterforms by overlapping the fill from both edges — reordering to stroke-then-fill keeps the letterforms at their full intended weight while still showing a crisp outline effect.
- Bold text outlines commonly cause visual thinning of letterforms by default
- Reordering to stroke-then-fill keeps letterforms at their full intended weight
- Still produces a crisp visible outline effect around the correctly sized text
Frequently Asked Questions
Does paint-order affect performance or only visual layering order?
It only affects the visual drawing order of fill, stroke, and markers — there's no meaningful performance difference between different paint-order values.
Is paint-order supported across all modern browsers?
Yes, paint-order has solid support across current major browsers, making it a reliable technique for outlined text and shape effects in modern SVG work.
Related guides
Ready to Convert Your Image to SVG?
Free online converter — no sign-up, no watermarks, results in under 3 seconds.
Try It Free — Convert Image to SVG