Converting fill to stroke

[mushopea]

Converting fill to stroke

[krazyjakee]

For anyone in the same position, I "converted" the fill svgs to stroke by simply adding these properties to the svg stroke="black" stroke-width="5" fill="none". Most icons are fill icons and this solved it for 100% of the ones I tried.

[maxwellito]

I use Illustrator. Just keep your origin icon under a locked layer, draw the new version on top one. Then once finished you can delete the original one: it's ready to use.

[maxwellito]

Hi,
You menton the failure about animation icons with Vivus. Most of them are fill based, not stroke based. I tried to make an animation with the icon you posted, but it just kill it https://jsfiddle.net/41L4nej5/

About finding good stroke SVG icons, I would recommend you to check the Collective from Codrops. It's an amazing resources of links, and there's always some links to icons packs. By checking the first pages I found these:

https://dribbble.com/shots/2015061-Nucleo-Free-Test-Pack
http://matt-cooper.com/minimalistic-icons/

Unfortunately I don't know an icon library completely dedicated to stroke icons. Or even one which purpose this option as filter.

[mushopea]

Hi there, thanks for the recommendations. Actually, I did download about 20 icon packs, but all of them were filled. I just downloaded the ones you linked, and they are also filled.

The icon you animated in the jsfiddle has a 'double stroke' effect. Actually, I don't think it looks that bad. :) I compromised by finding icons that would look nice with that icon effect and went ahead to animate them.

Still, the best case scenario would be to make our own stroke icons! Hopefully someone can release a stroke icon pack soon :) Thanks a lot for this cool library!

[felixdorner]

Vivus is great but only usable with "real" stroke icons. Most icons are fill-based - even the ones which "appear" stroke-based.

The only solution which comes to my mind is to re-draw your favorite icons with strokes only.

[BoylesWhite]

We had an issue drawing a filled SVG but we used the pathformer.js to create the strokes then we used the js callback to "fill" the SVG once drawn. You can see the effect Here

The stop of the SVG is getting "cut off" though because I too added stroke-width="5" which "pushes" it out of the container size.... Yet to sort this out. Can post code if required.

[fluke]

I'm having trouble finding SVGs that work @maxwellito All of them are fill based and hence the double line effect appears because to make a straight line the method used is to make a rectangle and fill it. Whereas it should just be a straight path with stroke. Could you tell me how I could make these as all software like Illustrator seem to put out paths with fills.

[maxwellito]

@kartikluke I'm afraid I don't know any automatic way to transform a fill based SVG to a stroke one. The only way is to redraw them.

[fluke]

Alright. May I know which tool you use to redraw them. I tried on Sketch
but I ended up with filled in paths again.

[fluke]

Alright. I'll do that. Thanks.

[johndatserakis]

@krazyjakee your answer is perfect for my .svg that didn't animate at all - it would be nice for these little secrets to be easier to find! Only took about 2 hours of searching!

[NAMSGithub]

This solution worked great for me with the exception of the cutting off of the image which I suspect is due to the stroke width. I have tried not defining a width and height for the SVG in css but it clips regardless. Is there any other solution than to recreate the SVG files myself?

[cameronelliott]

@krazyjakee awesome comment, although one small tip for future visitors: you will have to remove any fill attributes on the path element to get this to work.

[Moanrisy]

Although fill not working, but I do this instead

open svg with inkscape, ctrl+shift+f
replace all object that have fill property with keystroke property
save it, animate it in Vivus instant
record the animation

get image with background that have color
put image and animation in the same frame

I get video with logo & text animated + color

[josh-tt]

Just to add to @krazyjakee super helpful tip:
If you're having some issues with joining edges, try using :
stroke-linecap="square" and/or experiment with the other options:
stroke
stroke-dasharray
stroke-dashoffset
stroke-linecap
stroke-linejoin
stroke-miterlimit
stroke-opacity
stroke-width

[AE-Hertz]

stroke="black" stroke-width="5"

even after 9 years , your comment is still helpful. Thank you!