SVG to MSDF

Drop an SVGor click to choose

Try:

Paste SVG code

Type

Size Frame

Distance range 4 px How far the field reaches, in texture pixels: half inside the edge, half outside. 4 is a good start; more for outlines and glows. The shape itself looks the same.

More options

Shape size 100% Makes the shape smaller in the texture, for room around it: outlines, glows, shadows. Corner angle 172° Bends sharper than this count as corners and stay sharp. Error correction (removes stray dots) Overlap fix (no seams where shapes overlap)

Zoom

Drop an SVG to start

Or try one of the samples on the left.

Drawn the way a game draws it: from the small texture, scaled up. Zoom in: the edge stays sharp.

Texture

–

Shape

–

Made in

–

on your device

Using it in your engine

Import the PNG as linear data (sRGB off), no mipmaps and no compression that blurs it. In your shader or material:

Median  = max(min(R, G), min(max(R, G), B))
Opacity = saturate((Median - 0.5) * Sharpness + 0.5)

Sharpness is about the distance range times how many times bigger the shape is drawn than the texture (a 64 px texture drawn 512 px big with range 4: 4 × 8 = 32). For an outline, compare the median (or MTSDF's alpha) with a lower value than 0.5. SDF and PSDF have one channel: use R instead of the median.

Unreal / UEFN: Compression UserInterface2D (RGBA), sRGB off, Mip Gen NoMipmaps; the formula in a UI or masked material.
Unity: sRGB (Color Texture) off, Generate Mip Maps off, Compression None; the formula in Shader Graph.
Godot: mipmaps off, filter linear; the formula in a canvas_item or spatial shader.
Blender: an Image Texture node set to Non-Color, Separate Color, the formula with Math nodes into Alpha.