3

I have collected SVG icons from different sources. Some use thick paths and shapes. Others use thin ones.

Is there a way to change the thickness of paths and shapes in an SVG without having to adjust all the points in the object?

enter image description here

1
  • Please look over How to Ask and How to Answer a question to see what makes good queries, and how best to frame. As a whole, questions which would require access to individual files are out-of-scope as being essentially tech support queries; yours seems perilously close to that as currently framed, as we cannot tell looking at the .pngs whether the .svgs originally called for 'strokes of varying width' or if those are shaped fills, which would complexify to any answer; please revise your question to better fit the guidelines, perhaps posting the .svg code. Thanks! Commented Jul 19, 2019 at 18:09

3 Answers 3

2

It would depend on how the graphics were constructed.

If it's made of simple strokes, then you could just apply a thinner stroke.

If the strokes have been converted to outlines, all bets are probably off. In this case it would be easier to redraw them as strokes, and apply a thinner stroke.

I don't use Sketch, but the example below was done in Inkscape. I redrew the shapes with the Bézier/Pen tool, and changed the stroke size. It should also be possible in Sketch

enter image description here

1
  • Thanks Billy. The objects I am trying to modify in Sketch are in Paths in Shape folders. There doesn't appear to be Strokes, or an equivalent in Sketch. I tried increasing the border size of paths to no avail. Any other suggestions would be much appreciated.
    – Marc Bolh
    Commented Jul 23, 2019 at 11:43
1

Sketch doesn't have strokes. To make a line icon in Sketch you need to make a smaller version of a path (shape) and change the fill color.

To fix the problem, I had to ungroup the paths, remove the fill color, add a border and increase the thickness.

enter image description here

1

If you want to make a path thicker, here's an engineer's approach.

Open the SVG file in a text editor (say, Notepad) and look for <path. Add the following text right after <path : stroke="color" stroke-width="width", where:

  • color should be the same color as the path. It can be explicitly defined (for instance #000 for black) or set to currentColor, meaning the color of a container.
  • width is how much the path should be thicker. Try numbers between 1 and the viewBox width (512 in my example below).

The SVG should start looking as this:

<svg id="svg-repo-html5" class="svg-repo-html5" viewBox="0 0 512 512">
<path stroke="currentColor" stroke-width="10"

Sometimes it's a way better just to quickly edit a file than opening it in a WYSIWYG editor.

Unfortunately, you cannot make the path thinner this way.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.