logo favicon
New Tooll

Convert svg to clip path in css with responsive

svg-to-css-clip-path

Try to do following steps:

Step 1
step 0 picture

Select or drop your svg file from your local system and click "Convert" after file selected.

Step 2
step 1 picture

Once you submitted a file you will get this page. Here you can set the flexiable area using these points by individual select. A selected point background is changed to red color. In right x-axis and y-axis values are shown equal to the selected point. x-axis and y-axis each select box has three values. These are following as,

X-Axis

  • Left - Fixed value. It means a point select x-axis by "left" then that area not flexible when expanding shape or Area. Choose this value best for left hand points.
  • Horizontal center - Dynamic value. It means a point select x-axis by "Horizontal center" then that area is flexible when expanding shape or Area based on horizontally center of the shape. Choose this value best for center or near to center points.
  • Right - Dynamic value. It means a point select x-axis by "Right" then that area is flexible when expanding shape or Area based on horizontally edge/end of the shape. Choose this value best for right hand or edge of the shape points.

Y-Axis

  • top - Fixed value. It means a point select y-axis by "top" then that area not flexible when expanding shape or Area. Choose this value best for top of the points.
  • Vertical center - Dynamic value. It means a point select y-axis by "Vertical center" then that area is flexible when expanding shape or Area based on vertically center of the shape. Choose this value best for center or near to center points.
  • bottom - Dynamic value. It means a point select y-axis by "bottom" then that area is flexible when expanding shape or Area based on vertically edge/end of the shape. Choose this value best for end or edge of the shape points.

Above picture shows you a "point 0" is selected. I want this point realted areas are flexible area both horizontally and vertically so, x-axis value is change to "Right" and y-axis value is change to "vertical center".

Step 3
step 2 picture

Do same action of above step. So, changed the values are x-axis to "Right" and y-axis to "Vertical center".

Step 4
step 3 picture

Do same action of above two steps. Because that three points are grouped to make half circle. So, changed the values are x-axis to "Right" and y-axis to "Vertical center".

Step 5
step 4 picture

In this point need flexible only on horizantally not vertically. That the reason if a shape expanding only its affect bottom areas not top areas.

So, select x-axis to "Right" and y-axis to "top".

Step 6
step 5 picture

Same as step 5 action.

Step 7
step 6 picture

In this point need flexible both horizantally and vertically. That the reason if a shape expanding its affect vertically bottom areas and horizontally right areas.

So, select x-axis to "Right" and y-axis to "bottom".

Step 8
step 7 picture

Same as step 7 action.

Step 9

Select x-axis and y-axis values are remaining points by whether the point is flexible or not. Finally click the "Get Code" button after all points related x-axis and y-axis values are set or changed. You will get "CSS clip path" values.