SVG to CSS Shape Converter
Convert an SVG <path> into a CSS clip-path: path('...') declaration you can drop straight onto a div, image, or button — plus a live preview and the sizing notes needed to make the shape line up.
Input
Paste a full <svg>...</svg> snippet or just a <path d="..."> tag — the first <path>'s d attribute is used, along with the <svg>'s viewBox if present.
Cosmetic — only affects the preview box below, not the generated CSS.
A dashed outline around the un-clipped box, so you can see how much of it the shape actually covers.
Output
Paste an SVG path above to see the clipped shape.
Inline-styled markup matching the preview above — paste anywhere.
More ways to use this tool
REST API
curl -X POST https://api.iotools.cloud/v1/tool/svg-to-css-shape-converter \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"svgInput": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=…",
"fillColor": "#6366f1",
"showOutline": "true"
}'Swap in your own key from your account. The tool's fields are the body — no wrapper.
Ask an AI agent
Use the IOTools `svg-to-css-shape-converter` tool (SVG to CSS Shape Converter) on this input:
YOUR_INPUT_HEREPaste this at any agent connected to the IOTools MCP server, then add your input.
Embed widget
<iframe
src="https://iotools.cloud/embed/svg-to-css-shape-converter/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="SVG to CSS Shape Converter — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>Drop this into your own page — free, no key required, just a link back.
| Cost per API/MCP call | From 5 credits |
|---|
Also available with
Guides
What this tool does
Paste an SVG <path> and get back a single CSS declaration — clip-path: path('...') — that clips a plain <div>, <img>, or button into that exact shape. No <svg> markup, no image mask file, no extra DOM: the shape lives entirely in your stylesheet.
This works because CSS's path() function accepts SVG path syntax almost verbatim — the same M/L/C/A/Z command letters and coordinate pairs a d attribute already uses.
How to use it
- Paste a
<path d="...">tag, a full<svg viewBox="..."><path d="..."/></svg>snippet, or just raw path data (M10 10 L90 90 Z) into the input box. The tool extracts the first<path>'sdvalue, and the<svg>'sviewBoxif one is present. - Copy the generated CSS and apply it to any element.
- Check the Preview — the dashed outline shows the element's full box, so you can see how much of it the shape actually fills.
Why the element needs an explicit size
clip-path: path() coordinates are raw units measured from the element's own top-left corner — not percentages, and not automatically scaled to the element's size the way clip-path: polygon(20% 20%, ...) is. That means the element's width/height has to match the source SVG's viewBox (in the same units, typically read as px) for the path to land where it's supposed to:
.icon {
width: 24px; /* matches viewBox="0 0 24 24" */
height: 24px;
clip-path: path('M12 2L22 20H2Z');
}Setting only width and deriving height from aspect-ratio works too, as long as the resulting box is still sized at that same scale — an aspect-ratio alone, at an arbitrary absolute size, does not make the path rescale with it.
Need the shape bigger on screen? Wrap the element and apply transform: scale(...) to the wrapper, rather than changing width/height directly — a bigger box just reveals more empty (clipped-away) space around the same unscaled path.
Browser support, and the shape() alternative
clip-path: path() is supported in every current browser (Chrome, Firefox, Safari, Edge) and has been for years — it's the safe default this tool generates.
A newer CSS-native alternative, clip-path: shape(from ..., ...), is emerging in the CSS Shapes spec. It expresses the same kind of geometry with keyword-named commands (line to, curve to, arc to...) instead of SVG's single-letter syntax, and only accepts absolute coordinates — so converting an arbitrary SVG path (a mix of relative and absolute commands, with implicit repeated commands) into it is a real re-authoring job, not a drop-in swap. It's worth knowing about for browsers that support it, but path() remains the broadly-compatible choice and is what this tool outputs.
FAQ
My preview shows a tiny sliver in the corner, not the whole shape.
That almost always means the input had no <svg viewBox="..."> — the tool defaulted to a 100 x 100 box, but the path's coordinates were actually authored for a different size (e.g. a 24 x 24 icon). Paste the full <svg> tag (with its viewBox) instead of just the <path> on its own, so the tool can size the box correctly.
Can I animate between two shapes?
Yes — clip-path is animatable, and two path() values with the same number and type of commands interpolate smoothly with a plain CSS transition. Paths with a different command structure won't interpolate cleanly.
Does this affect click targets?
No — clicking outside the visible clipped area still hits the element's original (unclipped) box in most browsers, unless you also constrain it with pointer-events or by reworking the layout.
I need a basic shape (circle, polygon, hexagon...), not an arbitrary SVG path. Use the CSS Clip-Path Generator instead — circle, ellipse, inset, and a library of common polygon presets, all with percentage-based coordinates that scale with the element automatically.
I want to inspect or edit the path's individual commands first.
The SVG Path Visualizer breaks a d attribute down command by command (move, line, curve, arc) with a labelled preview, and can convert between absolute and relative coordinates — useful for cleaning up a path before converting it here.
Privacy
Everything happens in your browser. Your SVG markup never leaves your machine — the CSS and preview are parsed and generated locally.