Forem: trapti rahangdale

In Illustrator- Remove transformations from SVG while exporting

trapti rahangdale — Sat, 08 Feb 2020 08:58:38 +0000

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.

Why SVG ?

trapti rahangdale — Sun, 17 Nov 2019 21:11:43 +0000

This is originally posted on iamtrapti.com

Scalable Vector Graphics (SVG) is an XML-based vector image format for two-dimensional graphics. There are various reasons why we should use this, some are listed below -

File size of well optimised SVG is less than any other image format(ex. png, jpg etc.).
Accessibility and SEO.
SVG's can be animated and interactive.
SVG's are resolution independent and responsive.
All Modern browser support SVG.
Various tools are available to create SVG's like Illustrator, Figma etc.
SVG's are easy to read and write. It has syntax like HTML.
Styling can be done on SVG's using id's and classes.
Practical use cases of SVG's are logo, icons, creative graphics, graphs, etc.

SVG is Awesome.

Share in comment if you wanna add more.

Bend It Like Trapti - a SVG logo

trapti rahangdale — Sun, 03 Nov 2019 19:49:20 +0000

This is originally posted on iamtrapti.com

Creating a wave shape logo using the SVG textOnAPath.

I was developing my portfolio website and I wanted a logo. Being a non designer it was difficult to come up with something in shorter period of time without doing much of research, thoughts and iterations. I wanted a simple logo with my name on it. SVG element textOnAPath is a good way to make the logo standout.

I am more comfortable handcrafting simple SVG. You may also use tools like Illustrator, Figma etc. to create SVG.

Following SVG elements were used to create this logo.

text: This element defines a graphics element consisting of text. Attribute x and y is used to position the text. And most presentation attributes like font-size, font-weight etc. can be used.

textPath: This element is used to layout text along a path, for instance in a curve path, zigzag path etc.

tspan: This element is used to add text or subtext inside the text element. It allows to style or position the text if required.

path: This element is used to draw the line, arc, curves etc. It is very powerful element in SVG because any graphic can be created with this.

While doing this, I learned all about text in SVG and created a
cheatsheet of this for the future reference. SVG text cheatsheet

First we will create the wave pattern for the logo, which can be created using any tool like Illustrator, figma or SVG path builder Codepen. Or if you are comfortable writing path coordinates in SVG, handcraft it like I did.

<svg xmlns="http://www.w3.org/2000/svg" width="500px" height="100px" viewBox="0 0 300 100"> <title>Trapti Rahangdale</title> <path id="curve-path" d="M 0 60 C 140 90 190 0 290 50 " stroke- width="3" stroke="#f5b326" fill="none"></path> </svg>

Add text element to show the name in SVG.

Now we are ready to bend it like Trapti 😃 To do that add a textPath element. Linking between path and text is done by xlink:href attribute with path id as a value.

Result of the above steps

Now I wanted Text below the path and only Capital letters to go above the path - I used tspan element with the dx and dy attributes. dy for moving the text in Y direction and dx to move it in X direction. Also increase the font-size, bigger font-size for capital letters and small for others. And I got the desired result below is the code.

<text font-size="30px" x="0" y="0" letter-spacing="1px"><textPath xlink:href="#curve-path"> <tspan font-size="70px" dy="25">T </tspan> <tspan dx="-28">rapti</tspan> <tspan font-size="70px" dx="10" dy="2"> R </tspan> <tspan dx="-17">ahangdale</tspan> </textPath> </text>

Accessibility

When tested in voice over text was not pronounced properly. It was sounding like this

Basically the problem was on writing letters separately on a tspan, I did this because I wanted it to style differently. Voice over was pronouncing "T" separately and "rapti" separately instead of "Trapti".

Then I made changes in my design and changed all letters to lowercase and showing them above the path. But to give a little more twist I added one more path with different color. Making it all lowercase was my choice, one can make it capitalize or uppercase using CSS or by just writing it that way.

In the code, I changed the SVG document and wrote entire text inside textPath element, and adjusted the position and font-size, to get the desired result.

Tip1: - Avoid using tspan to segregate letters for styling purposes.
Tip2: - textpath element works fine in HTML, but while writing in JSX use textPath otherwise it will not work.

Final result

Summary

Text based graphic can be created very easily by hand or using any tool(Illustrator, Figma etc.). What you get is Accessible, searchable, selectable text. Check for accessibility always Make sure it woks for everyone.