loading...
Cover image for In Illustrator-  Remove transformations from SVG while exporting

In Illustrator- Remove transformations from SVG while exporting

imtraptir profile image trapti rahangdale ใƒป4 min read

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>

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> 

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.

Discussion

pic
Editor guide