SVG Outline Text — Outlined Text Effects
Create crisp outlined text effects in SVG using stroke, fill, and paint-order properties for clean typographic styling.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
Creating Basic Outlined Text
Outlined text in SVG is created by setting fill to none (or a contrasting color) and giving the text element a stroke color and stroke-width. This produces a hollow or double-toned letterform effect directly in markup without needing image editing software.
- Set fill='none' and stroke='color' for a pure outline effect
- stroke-width controls the thickness of the outline
- paint-order='stroke fill' controls layering when both are visible
Controlling Stroke and Fill Layering
By default, fill paints over stroke, which can make outlines look thinner than expected on the inner edge. The paint-order property lets you control whether stroke or fill renders first, giving more predictable, consistent outline thickness.
- paint-order='stroke' paints the stroke beneath the fill
- Useful for thick outlines where inner thickness should be visible
- Combine with text-shadow-like duplicate text layers for depth effects
Frequently Asked Questions
Why does my outlined SVG text look thinner on the inside edge?
By default fill paints on top of stroke, covering half the stroke width on the inner edge. Use paint-order: stroke fill to render the stroke beneath, preserving full outline thickness.
Can outlined text be animated in SVG?
Yes — animate stroke-dashoffset for a hand-drawn outline reveal effect, or transition stroke-width and fill-opacity for a build-up animation from outline to solid fill.
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