Removing transform translate from an svg code

Curriculum Help HTML-CSS
#1

How would this be done?
https://jsfiddle.net/ygkt9mh2/1/

<svg width="25" height="40" viewBox="0 0 20 34">
  <g transform="translate(-814.59595,-274.38623)">
    <path class="style" d="m 817.11249,282.97118 c -1.25816,1.34277 -2.04623,3.29881 -2.01563,5.13867 0.0639,3.84476 1.79693,5.3002 4.56836,10.59179 0.99832,2.32851 2.04027,4.79237 3.03125,8.87305 0.13772,0.60193 0.27203,1.16104 0.33416,1.20948 0.0621,0.0485 0.19644,-0.51262 0.33416,-1.11455 0.99098,-4.08068 2.03293,-6.54258 3.03125,-8.87109 2.77143,-5.29159 4.50444,-6.74704 4.56836,-10.5918 0.0306,-1.83986 -0.75942,-3.79785 -2.01758,-5.14062 -1.43724,-1.53389 -3.60504,-2.66908 -5.91619,-2.71655 -2.31115,-0.0475 -4.4809,1.08773 -5.91814,2.62162 z" />
  </g>
</svg>
#2

This is the key part in the path attribute:

m 817.11249,282.97118

Subtract the two translate values from them respectively, then delete the g element. All the other points are relative, so that should be the only amendment needed.

Ideally, in future, if you control this, make sure the initial x/y coordinates of the artboard in the drawing program itselfare zeroed. I know a few vector drawing programs produce output like yours, and it’s really annoying if you want clean SVG output (although it doesn’t actually make a lot of difference practically)

1 Like
#3

What exactly are you telling me to do?

817.11249 - 282.97118
814.59595 - 274.38623

= 2.51654,8.58495

Got it.

I found the code on the web, I didn’t make it myself.
https://jsfiddle.net/1504d7qc/2/

#4

817 - 814
282 - 274

So in this image:

Screenshot_20190819-035437
Screenshot_20190819-0354371195Ă—2048 159 KB

  1. Is the (0, 0) coordinates of the drawing area in the program the vector was drawn in.
  2. Is the overall drawing area
  3. Is the actual icon/illustration that’s been exported from the drawing program as an SVG

An SVG has to have coordinates 0,0 at the top left corner. But the coordinates in the drawing program are at the top left corner of the whole drawing area. So to get around this, when the SGV image/s are exported, the program wraps the paths in a group element that resets the coordinates to 0,0 by translating the image to the top left corner.

So the SVG path there starts at 817 units in from the left (x-axis) and 282 units down from the top (y-axis) in the overall drawing area. The translate is basically shifting the whole image up so the top left of it is at 0, 0 instead of 817, 282.

The X, y coordinates after m are like you’re taking a pen and putting the point down at those coordinates, then you draw from that point.

So to simplify this, just subtract the X and y of the translate from the X and y of the start position, hence

817 - 814
282 - 274

And then delete the g element with the translate

1 Like
#5

Forgot to add this info as well, just if you want to understand a bit more about what the path syntax means:

d="m 817.11249,282.97118 c -1.25816,1.34277 -2.04623,3.29881 -2.01563,5.13867 0.0639,3.84476 1.79693,5.3002 4.56836,10.59179 0.99832,2.32851 2.04027,4.79237 3.03125,8.87305 0.13772,0.60193 0.27203,1.16104 0.33416,1.20948 0.0621,0.0485 0.19644,-0.51262 0.33416,-1.11455 0.99098,-4.08068 2.03293,-6.54258 3.03125,-8.87109 2.77143,-5.29159 4.50444,-6.74704 4.56836,-10.5918 0.0306,-1.83986 -0.75942,-3.79785 -2.01758,-5.14062 -1.43724,-1.53389 -3.60504,-2.66908 -5.91619,-2.71655 -2.31115,-0.0475 -4.4809,1.08773 -5.91814,2.62162 z"

It starts with m x, y which say “move to these coordinates to start drawing”. Then a lowercase letter (in this case c for “curve”) afterwards tells the renderer what shape you’re going to draw, indicates the relative coordinates for the next point. So the first of those coordinates is 1.2 units to the left and 1.3 down from m x, y.

If it was an uppercase letter (C), it would be an absolute coordinate, so it would literally be 1.2 units to the left on the drawing area and 1.3 down.

And the z at the end means “join the last point to the start point”, ie close the path.

1 Like