CSS clip-path: path() Guide (SVG → CSS)
This guide explains how to turn an image or SVG shape into a usable CSS clip-path: path().
Hi! I’m Rae, and I make CSS for JAI ! This guide walks through my process for turning SVGs/images into usable CSS clip paths.
If something here breaks, feels unclear, or you find a better method, feel free to reach out — I’m always tweaking things.
You can find me here:
@Mantarae on JanitorAI and @Mantarae33 on Ko-fi
Important reminder:
Please make sure you’re following JanitorAI’s CSS policy when customizing profiles. This guide is meant for learning and decoration — not for bypassing restrictions or breaking site behavior.
Part 1: Getting the SVG Path
1. Find a good source image
- Use a solid, high-contrast SVG or PNG
- Avoid gradients, outlines, or thin lines — bold silhouettes work best
Upload it to:
https://picsvg.com/
Important:
Do not download the SVG !!!!
In the top right corner you'll see a few symbols. Click on “Code” and copy everything into a notes app
2. Strip the SVG down to just the path
You’ll see something like this:
Delete everything except what’s inside the d="...".
You want only this part:
That’s the actual shape.
Part 2: Scaling & Editing the Path
3. Paste the path into an SVG path editor
Go to:
https://yqnn.github.io/svg-path-editor/
Paste your path into the editor.
4. Scale it down
Scale both X (width) and Y (height) to 0.1
0.1 ≈ ~100px range (rough estimate)
Zoom in until you can clearly see coordinate numbers
Tips:
- Always move the shape close to the top-left corner
- This prevents weird offset issues in CSS
- Expect to adjust this multiple times
Disclaimer:
Getting it right on the first try is rare. Trial and error is normal. Don't give up! <3
Part 3: Using It in CSS
5. Apply the clip-path to a pseudo-element
Do not apply clip-path: path() directly to an <img> — browser support can be inconsistent.
Instead, use a pseudo-element on a container.
Positioning & Adjustments
You can move or tweak it with:
/ and /
If it’s slightly off and you don’t want to reopen the editor:
(Yes, this is the lazy-but-valid approach.)
Common Problems & Fixes
- Shape is invisible
- Width/height missing
- Path scaled too small
- Background color missing
- Shape is cut off
- Path not near top-left in editor
- Container too small
- Looks warped
- X and Y scaled unevenly
- SVG had transforms you didn’t fully neutralize