How to svg to css clip-path polygon generator online
- Step 1Get the shape into a single SVG path — The generator reads the first
d="..."attribute it finds. In your vector editor, flatten the shape to one outline path (Object → Path → Object to Path in Inkscape, or Flatten in Figma) and make sure it is first in the document. Circles, rects, and<polygon>primitives have nodattribute and are ignored — convert them to a path first. - Step 2Set a clean viewBox — Coordinates are divided by the viewBox width and height to make percentages. A
viewBox="0 0 100 100"makes the math trivial (a point at x=50 becomes 50%). If the SVG has noviewBox, the tool assumes100 x 100, so any coordinate above 100 will produce a percentage over 100% and clip outside the box. - Step 3Paste or upload the SVG — Drop the
.svgfile onto the upload area or paste the SVG source into the textarea. The tool is Pro-tier; free accounts see an upgrade prompt. Per-file limit is 5 MB on free, 50 MB on Pro. - Step 4Process and read the output — Click Process SVG. The result panel prints the CSS rule. The class is derived from the file stem — an uploaded
hero.svgyields.hero-clip; pasted source uses the defaultinput.svg, giving.input-clip. There are no settings to adjust between runs. - Step 5Copy and apply the polygon — Use Copy to clipboard or Download CSS. Paste the
clip-path: polygon(...)declaration onto your target element. Because the coordinates are percentages, the same value works whether the element is 200px or 1200px wide. - Step 6Verify the corners, especially on curved shapes — For straight-edged shapes, compare the rendered clip to your SVG — they should match exactly. For shapes with curves, expect the rounded parts to render as straight chords between endpoints. If that is not acceptable, keep the shape as an SVG
<clipPath>instead of converting topolygon()(see the cookbook).
How each SVG path command is converted
The generator walks the path and records endpoint coordinates only. Straight-line commands are lossless; curve and arc commands lose their control points and midpoints, so the shape is approximated by chords between segment endpoints.
| Path command | What it draws | Vertices contributed | Fidelity |
|---|---|---|---|
M / m | Move (subpath start) | The start point; trailing coordinate pairs are treated as implicit L line-tos | Exact |
L / l | Line to | The endpoint | Exact |
H / h, V / v | Horizontal / vertical line | The new endpoint (x or y changes) | Exact |
C/S/Q/T | Bezier curves | Endpoint only — control points are read and discarded | Approximate (chord, not curve) |
A / a | Elliptical arc | Endpoint only — radii, rotation, and sweep flags are discarded | Poor (arc collapses to a chord) |
Z / z | Close path | No vertex; resets the pen to the subpath start | Exact |
Real conversions produced by the tool
Verified against the in-browser sampler (max 20 vertices, percentages to one decimal). Note how the circle degenerates: its two arcs contribute only three endpoints.
| Input shape (viewBox) | Path d | Output polygon() | Outcome |
|---|---|---|---|
| Triangle (0 0 100 100) | M50 0 L100 100 L0 100 Z | 50.0% 0.0%, 100.0% 100.0%, 0.0% 100.0% | Exact 3-point clip |
| 5-point star (no viewBox → 100x100) | M50 5 L61 38 ... Z (10 points) | All 10 vertices preserved | Exact star |
| Rounded rect (0 0 100 100) | M10 0 H90 Q100 0 100 10 ... | 10.0% 0.0%, 90.0% 0.0%, 100.0% 10.0%, ... (9 pts) | Corners are straight chords, not rounded |
| Circle as two arcs (0 0 24 24) | M12 2 A10 10 0 1 0 12 22 A10 10 0 1 0 12 2 Z | 50.0% 8.3%, 50.0% 91.7%, 50.0% 8.3% | Degenerate sliver — unusable |
Cookbook
Concrete before/after conversions. Outputs are the exact strings the browser tool produces — straight-line shapes are faithful, curves are not.
Triangle — a clean, exact conversion
Straight-line shapes are the sweet spot. A three-point triangle in a 100x100 viewBox converts vertex-for-vertex with no loss.
Input SVG:
<svg viewBox="0 0 100 100"><path d="M50 0 L100 100 L0 100 Z"/></svg>
Output CSS:
.input-clip {
clip-path: polygon(50.0% 0.0%, 100.0% 100.0%, 0.0% 100.0%);
}5-point star — all vertices kept
A ten-vertex star (outer + inner points) is well under the 20-vertex cap, so every point survives. With no viewBox, the tool assumes 100x100, so the coordinates map straight to percentages.
Input path (no viewBox):
<path d="M50 5 L61 38 L98 38 L68 59 L79 95 L50 72 L21 95 L32 59 L2 38 L39 38 Z"/>
Output CSS:
.input-clip {
clip-path: polygon(50.0% 5.0%, 61.0% 38.0%, 98.0% 38.0%, 68.0% 59.0%, 79.0% 95.0%, 50.0% 72.0%, 21.0% 95.0%, 32.0% 59.0%, 2.0% 38.0%, 39.0% 38.0%);
}Rounded rectangle — corners flatten
The Q curves at each corner contribute only their endpoint. The result is an octagon-like polygon: the rounded corners become straight 45-degree chamfers. If you need true rounded corners, use border-radius on the element instead — clip-path: polygon() cannot round corners.
Input SVG (0 0 100 100):
<path d="M10 0 H90 Q100 0 100 10 V90 Q100 100 90 100 H10 Q0 100 0 90 V10 Q0 0 10 0 Z"/>
Output CSS:
.input-clip {
clip-path: polygon(10.0% 0.0%, 90.0% 0.0%, 100.0% 10.0%, 100.0% 90.0%, 90.0% 100.0%, 10.0% 100.0%, 0.0% 90.0%, 0.0% 10.0%, 10.0% 0.0%);
}Circle drawn with arcs — degenerate output
A circle built from two A (arc) commands has only three endpoints. The generator emits three vertices, two of which are identical, producing a zero-area sliver. Do not convert circles this way — use clip-path: circle(50%) directly, no tool needed.
Input SVG (0 0 24 24):
<path d="M12 2 A10 10 0 1 0 12 22 A10 10 0 1 0 12 2 Z"/>
Output CSS (broken):
.input-clip {
clip-path: polygon(50.0% 8.3%, 50.0% 91.7%, 50.0% 8.3%);
}
Fix — skip the tool entirely:
.avatar { clip-path: circle(50%); }Applying the result to an element
The output is a normal CSS rule. Rename the class to match your component and apply it to any element. The percentage coordinates mean one value fits every breakpoint.
/* generated */
.hero-clip {
clip-path: polygon(50.0% 0.0%, 100.0% 100.0%, 0.0% 100.0%);
}
<!-- usage -->
<div class="hero-clip" style="background:url(photo.jpg)"></div>
/* the same value clips a 320px card and a 1440px hero identically */Edge cases and what actually happens
SVG has no path element
No path — invalid outputThe tool matches the first d="..." attribute. An SVG built only from <circle>, <rect>, <polygon>, or <ellipse> primitives has no d attribute, so the output is the comment /* No path found in SVG */ and there is no usable clip-path. Convert the primitive to a path in your editor first, or use the native CSS shape function (circle(), inset()) directly.
Shape uses curves or arcs
ApproximatedCurve commands (C, S, Q, T) and arcs (A) contribute only their endpoint — control points and arc geometry are discarded. A smoothly curved silhouette becomes a chord polygon between segment ends. For shapes that depend on their curves, keep them as an inline SVG <clipPath> referenced with clip-path: url(#id) instead of converting to polygon().
Path has more than 20 points
DownsampledThe browser tool keeps at most 20 vertices. A detailed silhouette with 200 line segments is reduced by taking evenly-indexed points, which can drop the very vertices that define the silhouette's character. This keeps the polygon() hand-editable but is lossy on complex outlines.
SVG has no viewBox
Assumes 100x100Percentages are computed by dividing each coordinate by the viewBox width and height. With no viewBox the tool assumes 100 x 100. If the path uses pixel coordinates like x=512, the result is 512.0%, which clips far outside the element. Add an accurate viewBox before converting.
Multiple subpaths (compound path)
FlattenedThe walker reads the whole d string, so a compound path with several M subpaths produces one continuous vertex list connecting all of them. polygon() is a single ring, so disjoint shapes (e.g. a donut, or two separate islands) cannot be represented faithfully and will join with stray edges.
Only the first path is read
By designIf your SVG contains several <path> elements, only the first one is converted. To convert a different path, reorder the document so it is first, or delete the others. There is no UI to pick which path.
Self-intersecting outline
Even-odd fill quirkclip-path: polygon() uses the nonzero/even-odd fill behaviour of the browser. A path whose points cross over themselves can leave holes or unexpected cut-outs in the clip even though the vertices are correct. Simplify the outline so it does not self-intersect.
Path coordinates use scientific notation or exponents
SupportedThe tokenizer accepts exponent syntax (e.g. 1.2e3). Values are parsed as floats. Non-finite results (NaN/Infinity) are skipped rather than emitted, so a malformed coordinate is dropped from the vertex list rather than producing an invalid polygon().
Pasted source vs uploaded file class name
ExpectedThe CSS class is the file stem plus -clip. Pasted SVG source is wrapped as input.svg, so you get .input-clip; an uploaded logo.svg gives .logo-clip. The public API/runner path uses a fixed .icon-clip class. Rename the class to fit your stylesheet.
Free-tier account
Upgrade requiredThe Clip-Path Generator is a Pro-tier tool. On a free plan the page shows an upgrade overlay instead of the converter. Processing still happens entirely in your browser once you are on Pro.
Frequently asked questions
Does the tool output circle(), ellipse(), or inset() shapes?
No. It only ever emits clip-path: polygon(...). If you want a circular or elliptical clip, write clip-path: circle(50%) or clip-path: ellipse(40% 30%) by hand — those are far better than approximating a circle as a polygon, which this tool does poorly (a circle drawn with arcs collapses to a sliver).
Is there a simplification slider or a way to set the point count?
No. The tool has zero options. The browser version always caps output at 20 vertices and the conversion is otherwise automatic. If you need fewer or more controllable vertices, simplify the source path first with the Path Simplifier (a real Ramer-Douglas-Peucker implementation), then convert.
Why did my rounded shape come out with hard corners?
Curve commands contribute only their endpoint, so the rounded part between two endpoints renders as a straight chord. clip-path: polygon() has no curve support at all in any browser. For rounded element corners use border-radius; for genuinely curved clips keep the shape as an inline SVG <clipPath>.
Why is my circle conversion broken?
A circle is usually drawn with one or two arc (A) commands. Each arc contributes only its endpoint, so a two-arc circle yields three vertices — two of them identical — which is a degenerate, zero-area polygon. Use clip-path: circle(50%) directly; no conversion is needed for circles.
Does it read shape primitives like <circle> or <rect>?
No. It looks for the first d="..." attribute, which only <path> elements have. Primitives are skipped and you get a /* No path found in SVG */ comment. Convert primitives to paths in your editor (Object to Path) before uploading.
Why are my percentages over 100%?
Percentages are coordinate divided by viewBox dimension. If the SVG has no viewBox, the tool assumes 100x100, so a coordinate of 480 becomes 480%. Add a correct viewBox (for example viewBox="0 0 480 320") so the math normalises to 0-100%.
Can I apply the clip-path to an image or video?
Yes. clip-path: polygon(...) works on any HTML element — div, img, video, canvas, picture. The element is rendered, then clipped to the shape. Because the coordinates are percentages, the clip tracks the element's box at any size.
What class name does the output use, and can I change it?
The class is the file stem plus -clip (uploaded hero.svg gives .hero-clip; pasted source gives .input-clip). Just rename it after copying. The class name has no effect on the polygon itself.
Does it also output shape-outside for text wrapping?
No. The tool emits only the clip-path declaration. You can reuse the same polygon(...) value for shape-outside manually — copy the polygon string into a shape-outside: polygon(...) rule on a floated element.
Will the converted clip scale across breakpoints?
Yes — that is the main benefit of percentage coordinates. The same polygon() value clips a 320px card and a 1440px hero to the same proportional shape, so you do not need media-query variants.
Is my SVG uploaded to a server?
No. The web tool processes everything in your browser; the result panel shows a '0 bytes uploaded' badge. The public API does not accept uploads either — it runs through your locally-paired @jadapps/runner.
What is the file size limit?
SVG inputs are capped at 5 MB on the free tier and 50 MB on Pro (this tool itself requires Pro). Clip-path source files are tiny, so you will essentially never hit the limit — the cap exists across all SVG tools.
Privacy first
Every JAD SVG tool runs entirely in your browser using the DOM API and Canvas. Your SVG files never leave your device — verified by zero outbound network requests during processing.