DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 963,274 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for In Illustrator- Remove transformations from SVG while exporting
trapti rahangdale
trapti rahangdale

Posted on

In Illustrator- Remove transformations from SVG while exporting

While exporting SVG from Illustrator,SVG code comes with transform value. Sometimes we don't want it, I came across this when I was creating motionPath animation using Greensock.

Below is the code with transform at the end of the path element.

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 555.31 427.92"><defs><style>.cls-1{fill:none;stroke:#ff2ab4;stroke-miterlimit:10;stroke-width:5px;}</style></defs>
<path class="cls-1" d="M84.53,19.26c-13.45,8.23-3.06,37.29,5.07,114.87,4.32,41.18,2.21,40.83,8.45,103.06,5.93,59.14,9.46,75.69,16.89,94.6,6.79,17.26,15.84,39.61,37.17,60.82,27.29,27.14,58.26,36.1,74.33,40.54,22.84,6.31,41.13,6.46,77.71,6.76,21.44.17,34.46.2,52.37-3.38a203.57,203.57,0,0,0,55.75-20.27,178.61,178.61,0,0,0,40.54-28.72c7.22-6.86,16.74-15.92,25.34-30.41,4.67-7.86,19.07-32.13,20.28-64.2.4-10.69-.9-16.11,3.38-20.27,7.83-7.63,20.38,2.58,42.23,0,20.39-2.4,34.92-14.28,42.23-20.27,10.33-8.45,15.86-16.53,25.34-30.41,8.47-12.39,12.76-18.78,15.21-28.72s1.62-17.49,0-32.1A148.71,148.71,0,0,0,618.37,124c-2.3-6.18-6.64-17.82-13.51-27-16.15-21.63-35-10.54-60.82-28.72-3.77-2.65-14.52-10.7-24.87-7.59a10.68,10.68,0,0,0-2.16.83c-11.49,6.08-13.23,39.08,0,49,10.33,7.74,21.12-5.1,38.85,1.69s25.12,26.83,27,32.1c9.05,24.89-1.4,46.75-3.37,50.68-10.21,20.35-27.94,28.69-35.48,32.1-10.53,4.76-25,11.32-33.79,6.76C475.44,215.67,547.9,30.15,520.39,17.57c-5-2.28-8.74,3.18-28.72,11.82-22.52,9.74-39.93,12.4-70.95,16.9C409,48,391.05,50.24,321,53.05c-47.61,1.9-71.75,2.83-87.84,1.68-29.25-2.08-56.32-4-89.54-15.2C104.78,26.44,94.54,13.14,84.53,19.26Z"
 transform="translate(-75.55 -14.55)"/>
</svg>

Enter fullscreen mode Exit fullscreen mode

This is the way, I removed transformations from SVG:-

1) Set Art board's X and Y coordinates to 0

Alt Text

2) Go to file and choose "Export as" option to export the SVG. And you will see below dialogue box

Alt Text

3) In the above dialogue box tick mark Use Artboards option. And then click on Export. You will see the bellow setting.

Alt Text

From here click on ok and You will get SVG without transformations. Below is the final result.

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 730.23 459.51"><defs><style>.cls-1{fill:none;stroke:#ff2ab4;stroke-miterlimit:10;stroke-width:5px;}</style></defs>

<path class="cls-1" d="M80.53,15.26c-13.45,8.23-3.06,37.29,5.07,114.87,4.32,41.18,2.21,40.83,8.45,103.06,5.93,59.14,9.46,75.69,16.89,94.6,6.79,17.26,15.84,39.61,37.17,60.82,27.29,27.14,58.26,36.1,74.33,40.54,22.84,6.31,41.13,6.46,77.71,6.76,21.44.17,34.46.2,52.37-3.38a203.57,203.57,0,0,0,55.75-20.27,178.61,178.61,0,0,0,40.54-28.72c7.22-6.86,16.74-15.92,25.34-30.41,4.67-7.86,19.07-32.13,20.28-64.2.4-10.69-.9-16.11,3.38-20.27,7.83-7.63,20.38,2.58,42.23,0,20.39-2.4,34.92-14.28,42.23-20.27,10.33-8.45,15.86-16.53,25.34-30.41,8.47-12.39,12.76-18.78,15.21-28.72s1.62-17.49,0-32.1A148.71,148.71,0,0,0,614.37,120c-2.3-6.18-6.64-17.82-13.51-27-16.15-21.63-35-10.54-60.82-28.72-3.77-2.65-14.52-10.7-24.87-7.59a10.68,10.68,0,0,0-2.16.83c-11.49,6.08-13.23,39.08,0,49,10.33,7.74,21.12-5.1,38.85,1.69s25.12,26.83,27,32.1c9.05,24.89-1.4,46.75-3.37,50.68-10.21,20.35-27.94,28.69-35.48,32.1-10.53,4.76-25,11.32-33.79,6.76C471.44,211.67,543.9,26.15,516.39,13.57c-5-2.28-8.74,3.18-28.72,11.82-22.52,9.74-39.93,12.4-70.95,16.9C405,44,387.05,46.24,317,49.05c-47.61,1.9-71.75,2.83-87.84,1.68-29.25-2.08-56.32-4-89.54-15.2C100.78,22.44,90.54,9.14,80.53,15.26Z"/>
</svg> 
Enter fullscreen mode Exit fullscreen mode

Note: Show code option will be disabled. In this method.

I will keep updating this blog as and when I came across different variations in SVG. In this particular case SVG was built using path element.

Top comments (0)

Take a look at this:

Settings

Go to your customization settings to nudge your home feed to show content more relevant to your developer experience level. πŸ›