search

elrumordelaluz / outline-stroke

Convert stroked SVG into the outlined version
https://outline-stroke.vercel.app/
126 stars 7 forks source link

stroke-linecap round not transformed as it should be #2

Closed y-nk closed 5 years ago

y-nk commented 5 years ago

When using online web tool with the following : 

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="0 0 32 32">
 <circle cx="1.5" cy="6" r="1.5" fill="black" />
 <line x1="9" y1="6" x2="31" y2="6" stroke-width="2" stroke="#000" stroke-linecap="round" />
 <circle cx="1.5" cy="16" r="1.5" fill="black" />
 <line x1="9" y1="16" x2="31" y2="16" stroke-width="2" stroke="#000" stroke-linecap="round" />
 <circle cx="1.5" cy="26" r="1.5" fill="black" />
 <line x1="9" y1="26" x2="31" y2="26" stroke-width="2" stroke="#000" stroke-linecap="round" />
</svg>

Following output gets processed :

<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" version="1.1">
    <path d="M 0.500 5 C 0.101 5.646, 0.224 6.624, 0.774 7.174 C 1.441 7.841, 2.016 7.783, 2.500 7 C 2.899 6.354, 2.776 5.376, 2.226 4.826 C 1.559 4.159, 0.984 4.217, 0.500 5 M 8 6 C 8 6.611, 12.667 7, 20 7 C 27.333 7, 32 6.611, 32 6 C 32 5.389, 27.333 5, 20 5 C 12.667 5, 8 5.389, 8 6 M 0.500 15 C 0.101 15.646, 0.224 16.624, 0.774 17.174 C 1.441 17.841, 2.016 17.783, 2.500 17 C 2.899 16.354, 2.776 15.376, 2.226 14.826 C 1.559 14.159, 0.984 14.217, 0.500 15 M 8 16 C 8 16.611, 12.667 17, 20 17 C 27.333 17, 32 16.611, 32 16 C 32 15.389, 27.333 15, 20 15 C 12.667 15, 8 15.389, 8 16 M 0.500 25 C 0.101 25.646, 0.224 26.624, 0.774 27.174 C 1.441 27.841, 2.016 27.783, 2.500 27 C 2.899 26.354, 2.776 25.376, 2.226 24.826 C 1.559 24.159, 0.984 24.217, 0.500 25 M 8 26 C 8 26.611, 12.667 27, 20 27 C 27.333 27, 32 26.611, 32 26 C 32 25.389, 27.333 25, 20 25 C 12.667 25, 8 25.389, 8 26 " stroke="none" fill="inherit" fill-rule="evenodd"/>
</svg>

From this fiddle, you can see a diff of the output : http://jsfiddle.net/hkmrna4q/

elrumordelaluz commented 5 years ago

hi @y-nk thanks for report this issue.

Consider that svg-outline-troke traces the outline version from a bitmap copy of the input so, bigger is the input, most accurate is the traced version (also with lot more path points).

In case, you could simnply change the width and height attributes of the input svg and then change them again (as well as viewBox attr) in the result version, like in the example below.

outline-stroke

y-nk commented 5 years ago

thanks a lot for this answer :) as i understand the process, i also understand the solution :)

hendriku commented 1 year ago

@elrumordelaluz would you consider adding this to the README? The tool works awesome for us as soon as we increased the width & height from 24 (base size of our src icons) to like 500.

elrumordelaluz commented 1 year ago

@elrumordelaluz would you consider adding this to the README? The tool works awesome for us as soon as we increased the width & height from 24 (base size of our src icons) to like 500.

Sure, mind making a PR? otherwise will add as soon as possible

hendriku commented 1 year ago

https://github.com/elrumordelaluz/outline-stroke/pull/21 there you go 🙌