<ShookBlog/>

<ShookBlog/>

How to Fix Stacking SVG Paths

How to Fix Stacking SVG Paths

I've been playing around with SVGs to make more in-depth text effects. I am in the process of figuring out how to do some fun entry transitions with the word "Hello!" using a cursive font called Clicker Script, and the first step was to separate the letters in groups. For my effects, I needed to separate the word (and exclamation point) into three groups - the "H", the "ello", and the "!". I was able to use Adobe Illustrator to group the letters into the three paths I needed and export the code easily enough, but when I pasted the paths into the HTML code, they did not sit side by side, but instead stacked on top of each other!

image.png

That was NOT the look I was going after. If you, too, are having this issue, there is a very easy fix. At the end of each path, right before the closing tag, there is a "transform" attribute:

image.png

The first number after translate (in my case "-150.15") is the positioning on the x-axis, and the second number is the positioning on the y-axis. To move the letters over to the right, simply increase the first number (to move them to the left, decrease). You'll probably have to take a few guesses to get the positioning the way you like it. I settled on "95" for the x-axis.

image.png

And here is the result:

image.png

Much better! I also decided to move the "ello" down a bit, so I changed the number from -42.27 to -12.27 (to move the SVG path down you increase the number, and to move it down you decrease it).

image.png

I then added in the "!" in and followed the same steps, adjusting the numbers on the x-axis and y-axis until they were to my liking. However, my SVG's view-box was not big enough to position the exclamation point as far right as I needed it to go, so half of it was getting cut off. To address this, I scrolled up to the very top of my tag and found the viewBox attribute. The viewBox is basically the canvas of your SVG - the SVG's paths must fall within the viewBox's parameters for the entire SVG to be seen.

The viewBox has 4 numbers in listed:

  • The first number pans the SVG horizontally within the view box - increase the number to move the object to the right; decrease it to move the object to the left.

  • The second number pans the SVG vertically - increase the number to move it down; decrease the number to move it up.

  • The third number defines the width of the viewBox. Increasing the number expands with width, decreasing the number makes the viewBox's width smaller.

  • And the fourth (and last) number defines the height of the viewBox. Increasing the number makes the viewBox taller, decreasing it makes it shorter.

I increased the 3rd number in the viewBox attribute so that it was wide enough for all of my SVG paths.

image.png

And here is the final result - looking good!

image.png

 
Share this