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
2) Go to file and choose "Export as" option to export the SVG. And you will see below dialogue box
3) In the above dialogue box tick mark Use Artboards option. And then click on Export. You will see the bellow setting.
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.
Top comments (0)