curl --request POST \
  --url https://api.iotools.cloud/v1/tool/svg-to-css-shape-converter \
  --header 'Authorization: Bearer <token>' \
  --header 'Content-Type: application/json' \
  --data '
{
  "svgInput": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path d=\"M12 2L22 20H2Z\"/></svg>",
  "fillColor": "#6366f1",
  "showOutline": "true"
}
'

{
  "tool": "svg-to-css-shape-converter",
  "tool_version": "1.0.2",
  "outputs": {
    "cssCode": "/* clip-path: path() reads these coordinates as raw units from the element's own\n   top-left corner, not percentages — give this element the SAME width/height as\n   the source SVG's viewBox (or set width and let aspect-ratio derive the height\n   at that same scale) so the shape lines up. Need it bigger? Wrap it and use\n   `transform: scale()` rather than changing width/height. */\n.shape {\n  width: 24px;\n  height: 24px;\n  clip-path: path('M12 2L22 20H2Z');\n  -webkit-clip-path: path('M12 2L22 20H2Z');\n}",
    "previewHtml": "<div style=\"position:relative;width:240px;height:240px;\"><div style=\"position:absolute;inset:0;border:1px dashed rgba(100,116,139,.6);box-sizing:border-box;\"></div><div style=\"position:absolute;top:0;left:0;width:24px;height:24px;transform:scale(10);transform-origin:top left;background:#6366f1;clip-path:path('M12 2L22 20H2Z');-webkit-clip-path:path('M12 2L22 20H2Z');\"></div></div>"
  },
  "credits_used": 5,
  "credits_remaining": null
}