Converting px border to stroke-width. How exactly is this being done?

Can you tell me what kind of converter they use to convert a px border to a decimal or is it a whole number stroke-width?



Can a code script like that one be created where you can put a px value in, also its size, and it’ll convert it to a decimal number like shown here?

I assume this is being done with javascript right?

Is that something that can be extracted and made into a fiddle?

Well, I can’t, as the problem does not interest me. :rolleyes:

I would suggest that you focus your attention on
learning how to create shapes with SVG yourself.

Those that are displayed on
are not particularly complex and most could be easily
made with very basic coding skills.

Try one, you might even find the process enjoyable. :biggrin:


Yes, I understand that, I just wanted to know how they are able to make those conversations, and if that’s something easily extractable to make into a fiddle.

I can’t find any standalone website that does that, only this one.

What kind of math process/calculations do they do to make something like that.

Maybe @Paul_Wilkins might be able to help here.

Usually it occurs by developing the image on a high resolution screen, which then gets scaled down for use on the web page.

Would it be possible to put together a fiddle where I don’t know how exactly it would work but, like there would be a line, then as you increase or decrease its width depending on its size it would convert the px value to it’s sister’s SVG stroke-width value. Like how it’s done in the image I provided.

On the image the border is set to 9 then it converts that 9 into its propositional stroke-width based on its size.

Can that process be made into a fiddle?

Well that code uses 24 * iconsBorder / iconsWidth to get the final stroke width.

What does that mean?

Do you see where the border is shown as being 9?

Take 24, multiply it by nine. Divide it by the size which is shown to be 152, and you obtain the value of the stroke-width.

1 Like

That works with all calculations, but where did you get the number 24 from?

I read the code.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.