Make SVG path proportionate
Hi guys, it's my first time posting or asking for help here, so I am sorry if I miss anything.
I am trying to edit this SVG path to make the "bottom" part (in red) proportionate to the "top" part (in green) using this website: https://yqnn.github.io/svg-path-editor/ but I just can't seem to make it perfect
```html
<path d="M191 0H226V270H191V0ZM191 270C191 284.355 184.5 300.351 171.039 311.78 154.612 325.726 135.183 332.816 112.75 333.059 94.0592 333.059 76.8376 327.905 61.0797 317.599 45.3343 307.29 35.178 294.987 30.6424 280.681H1C7.4218 301.778 18.928 318.633 38.7296 332.696 58.5311 346.759 81.502 354.36 109.376 355.247 139.876 356.216 167.5 347.723 190.657 330.881 212.49 315.001 226 293.401 226 271.765L226 270Z" fill="black" />
Any help would be much appreciated!
SvgPathEditor
Online editor to create and manipulate SVG paths
72 Replies
Here's the svg file
you're doing it wrong
you should re-design this, as the circle under is going to be hard to repair
M 415.74805 548.03125 L 415.74805 812.59766 A 75.590612 75.590612 0 0 1 377.95312 878.06055 A 75.590612 75.590612 0 0 1 302.36133 878.06055 A 75.590612 75.590612 0 0 1 264.56641 812.59766 L 226.77148 812.59766 A 113.38592 113.38592 0 0 0 283.46484 910.79102 A 113.38592 113.38592 0 0 0 396.84961 910.79102 A 113.38592 113.38592 0 0 0 453.54297 812.59766 L 453.54297 548.03125 L 415.74805 548.03125 z <-- try this path instead, and change it to your tastes
M415.748 548.0313 415.748 812.5977A75.5906 75.5906 0 01264.5664 812.5977L226.7715 812.5977A113.3859 113.3859 0 00453.543 812.5977L453.543 548.0313 415.748 548.0313z <-- optimized it a little bit by hand
if you have inkscape, you can do it like this:1- make a circle - and keep the circle tool selected:
make sure the
rx and ry are the sameput the mouse where the arrow is pointing
this lets you change the circle
on the top, make sure that the "end" is at 180
then, you change to the mouse tool, select the circle, copy-pasta
you have 2 circles
then go to "object" > "align and distribute":
center in the horizontal and vertical axis, on the right side:
select 1 of the circles and resize to be the difference of the width you want x2
for example, if you have an 80 width circle, and you want 10 of stroke, you resize the 2nd circle to 80 - (10x2) = 60
select this padlock at the top, and set the size - you want the padlock to be locked
now, center again, but only on the vertical axis
then go to path > difference, with both half-circles selected
you will get this shape
then, select the rectangle tool, on the left side
put the cursor on the corner
just make a rectangle with any width, and click on the white square, which will align it to the other corner
this is an annoying part:
select the rectangle and on the green tiny arrow, on top, move it to the top
just change it to the height you want
select both objects and go to "path" > "union"
and done!
this is horribly optimized, but it should do the trick
Wow! Thank you very much for your help!! This is perfect. I have never used inkscape before and I am new to svgs and editing them so I am still learning 😅
It sure does, thank you!!
you're welcome
make sure that you ALWAYS USE WHOLE SIZES
don't use 22.478mm or something like that, or you will go crazy
set the numbers manually if you have to
what i recommend you to do next is to manually get the path of the object, instead of saving the svg
to do that, go to "edit" > "xml editor":
select the object and copy what's in the
d
I am going to try to create it myself on inkscape as we speak. I just downloaded it now.
now, we can optimize it in the website you sent:
how can we optimize it? I mean what differences can we make that will make it "optimized"? (besides its size)
you reduce 4 paths and save a ton of bytes
hmm I see
first, convert everything to absolute
you see the selected command? keep that one and remove the 2 A above it
enable output minification
and you get this
this is the original path, from inkscape:
m 125.36181,57.848699 v 88.500021 a 30,30 0 0 1 -15.00012,25.98084 30,30 0 0 1 -29.999722,0 30,30 0 0 1 -15.000118,-25.98084 h -9.999906 a 39.999999,39.999999 0 0 0 19.999815,34.64078 39.999999,39.999999 0 0 0 40.000141,0 39.999999,39.999999 0 0 0 19.99981,-34.64078 V 57.848699 Z
this is the manually optimized:
M125.3618 57.8487V146.3487A30 30 0 0165.3619 146.3487H55.3619A40 40 0 00135.3617 146.3487V57.8487Z
a big difference
in fact, rounding it to 1 decimal place works as well, and reduces even more:
M125.4 57.8V146.3A30 30 0 0165.4 146.3H55.4A40 40 0 00135.4 146.3V57.8Z
the path should (mostly) look kinda the sameyea I was gonna ask about that
the difference, in this very specific case, will be nearly inexisting
just a much smaller path
Got it, thank you very much
but hey, from 280 bytes to 71 bytes is amazing
you're welcome
yea I didn't know about all of that honestly
i need to sleep 2 hours ago, so, i won't be able to answer any questions
all good, is it cool if I dm you if I have any questions and you can answer them whenever you're free?
i would rather if you keep it here
nothing personal
alright sounds good
but, if you ask me in private:
1- others won't see what i tell you
2- others may think it is a free-for-all card and may try to message me directly instead of asking where they should
yep, understood sorry
don't be, it's a reasonable request
but if you follow my steps, you might be able to do what you want
im a shitty teacher, but, it shouldn't be too hard
i use the default ui, so, nothing should have changed
Great, thank you
you're welcome
@ἔρως Hey quick update: I'm following your steps but I don't understand this part. I clicked on the rectangle tool with the half-circle path selected and I can create a rectangle just fine but I can't align it with or snap it to the start and end of the right side of the half circle. I have my cursor on the corner but I don't see "Handle" box that's in your picture
and I don't understand this part either because nothing happens when I click on either one of the two white squares
you can manually align later, it's fine
but you need to move the mouse a tiny bit up, then click and drag
that will create the rectangle
then you can click on the square i mentioned
if it doesnt work, drag it to the corner and it should snap
if it doesnt, manually set the width to be the same as the width of the circle
then, you can use the align tool to align to the right side
you can align horizontally to the bottom, and then add the height of the semi-circle to the y
Alright I think I got it, Thanks! I'm gonna try to optimize it now
good luck!
ty ty
Hey @ἔρως , I have another question related to this post/thread. Is there a way to take a single path and split it evenly into smaller paths? I understand that it may not be optimized and I'd be using more bytes but I just want to experiment and try something out
it is possible, yes
i think inkscape has a way to split paths
could you please show me how? I'd really appreciate it
I have this svg file to start and experiment with
which is the same as the one above in the screenshot I took ^
i will take a look at the end of the day
take your time, thank you!
a strategy you can try is to use the svg path viewer tool, pick the nodes you want to keep separated, copy to another instance of the page one by one and then add a Z (i think that thats the right command) to close the chunk
you can also try the path > break apart option
I can try that but I was hoping there'd be an easier way of going about it where it just splits it evenly into smaller paths
I tried that after I duplicated the original and I'm not really sure what to do after. It becomes transparent I think and all the nodes/points are still connected to one path
i tried a little yesterday, but i couldnt do it
but, im not a designer and i am really bad at this
no worries, thank you for trying
you're welcome
if you use stackoverflow, there's a sub-website for designers, where you can ask this type of question
and someone probably will have a better answer
alright I'll try that out, thanks
you're welcome