How to Create SVG Text Outline — Stroke Text Effects
SVG text outline effects use stroke and paint-order to add visible borders around text glyphs — from simple outlines to neon glow styles.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
SVG Text Outline with stroke and paint-order
Add `stroke='black' stroke-width='4'` to a `<text>` element for an outline effect. By default, stroke draws over the fill — use `paint-order='stroke fill'` to draw the stroke behind the fill so the fill remains visible inside the outline.
- <text stroke='black' stroke-width='4' paint-order='stroke fill'>Text</text>
- paint-order='stroke fill': stroke renders behind fill
- Increase stroke-width for thicker outline; match fill with background for knockout
Neon Glow Text Outline with SVG Filter
Combine white or colored stroke with a `filter: drop-shadow()` or `feGaussianBlur` for a neon glow text effect. Stack multiple text layers with different blur amounts for a multi-level glow.
- White stroke + blue feGaussianBlur blur = neon blue glow
- Layer: blur copy behind + sharp original on top
- Animate blur stdDeviation for pulsing neon effect
Frequently Asked Questions
How do I add a white outline to black SVG text?
Set stroke='white' stroke-width='6' paint-order='stroke fill' fill='black' on the text element. The white stroke appears as an outline behind the black fill.
Can I have multiple outlines on SVG text?
Use multiple <text> elements stacked — each with a different stroke-width. Render from largest stroke-width (back) to smallest (front) to create concentric multi-outline text effects.
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