Comments (16)
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.
from vivus.
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.
from vivus.
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.
from vivus.
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!
from vivus.
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.
from vivus.
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.
from vivus.
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.
from vivus.
@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.
from vivus.
Alright. May I know which tool you use to redraw them. I tried on Sketch
but I ended up with filled in paths again.
from vivus.
Alright. I'll do that. Thanks.
from vivus.
@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!
from vivus.
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?
from vivus.
@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.
from vivus.
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
from vivus.
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
from vivus.
stroke="black" stroke-width="5"
even after 9 years , your comment is still helpful. Thank you!
from vivus.
Related Issues (20)
- Trigger SVG to draw as soon as you see it (very large SVG) HOT 1
- Include Start delay without Loop HOT 3
- Is vivus deprecated? HOT 1
- daisy-chaining a series of images? HOT 2
- Beginner, unable to use HOT 8
- Support for Play Pause HOT 4
- Vivus MAP Array Empty, no animation rendered. HOT 2
- Problem using stroke based mask using multiple time the same SVG file
- Is there any rewind too?
- [Feature Request] Animate individual paths HOT 2
- [Error Fix]: There is a grammatical error on the index page. HOT 2
- Text is drawing immediately HOT 2
- Is there any option to draw svg on scroll? HOT 1
- No "ease-in-out" timing function? HOT 3
- Move a pencil while drawing ? HOT 1
- Integration with vue 3? HOT 4
- Callback function for when a path is completed? HOT 1
- Animation automatically replay
- Not working for a simple test HOT 2
- Please add Shuffle/Random animation type to Vivus
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vivus.