In Illustrator- Remove transformations from SVG while exporting
Published: 2020-02-08 08:58:38

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. 

```XML
<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>

```

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

1) Set Art board's X and Y coordinates to 0
 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/93vbbbxf3f76iyzm6t4k.png)


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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/bm9gk3iimflgjnamy2nq.png)

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/h90zduosvzp7o3pwk608.png)

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

```XML
<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> 
```

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.