search

maxwellito / vivus-instant

Single page app to create independent stroke animated SVGs
329 stars 42 forks source link

svg not animating #1

Closed pleabargain closed 7 years ago

pleabargain commented 7 years ago

Browser:

Google Chrome 55.0.2883.87 (Official Build) (64-bit) Revision ad0be09aa3ca814168d079b52825f6f80e22f0e8-refs/branch-heads/2883@{#723} OS Linux JavaScript V8 5.5.372.32 Link to your SVG: this works https://gist.github.com/pleabargain/febaad26b59d4ac5c3f18e14086c7ab7

this doesn't https://gist.github.com/pleabargain/aea9469b6a991cebc11192de2b833bcc this one was made with inkscape and does NOT animate https://gist.github.com/pleabargain/cbcb901b69aa94bfa4fe0684f1b08ec0 Steps to reproduce it: some SVG animate some don't

please see video https://www.youtube.com/watch?v=iQvoEj7js6U

maxwellito commented 7 years ago

Hallo, Thanks for all these details, it's cool to have as much details as possible 👍 Unfortunately Vivus-instant got the same constraints as Vivus that you can find here. I'm afraid cannot animate text tags or fill based paths. This is why the intro message mention the requirement that the SVG must be 'stroke-based'.

pleabargain commented 7 years ago

Thanks for writing back so quickly... I see now the stroke requirement ...

I edited the readme.md with a deeper description of the stroke req. as well, I fixed some of the grammar issues.

Finally, May I ask what SVG editor you are using? I want to only create stroke SVG now... :) and your animation on the page is quite stylish. Thank you.

maxwellito commented 7 years ago

So, I'm a big fan of illustrator, it's what I mostly use. But it doesn't matter, Inkscape is an amazing editor. Even the most basic graphic vector editor fill the requirements to make compatible SVG with Vivus.

So, what you need to know is, SVG is made of basic elements : circle, line, path... for each of then, the border (:stroke) and the fill is customisable. So as long you create elements without fill and border only, that should work. However, in Inkscape like Illustrator, some tools are creating shapes and not lines, This is actually the difference between the two SVGs you provided : line and filled shape. For example on the last one, you could animate the border of the shape, but not the content.

On Inkscape, I would recommend to use the Node Tool that will give you the freedom to build perfect lines. It's not easy on the first contact, but it's the universal tool. Once you get used to it, you can build everything :)

pleabargain commented 7 years ago

Many thanks for the thoughtful/detailed response! I will take your advice to heart.

with regards, Dennis

On Wed, Jan 11, 2017 at 2:50 AM maxwellito notifications@github.com wrote:

So, I'm a big fan of illustrator, it's what I mostly use. But it doesn't matter, Inkscape is an amazing editor. Even the most basic graphic vector editor fill the requirements to make compatible SVG with Vivus.

So, what you need to know is, SVG is made of basic elements : circle, line, path... for each of then, the border (:stroke) and the fill is customisable. So as long you create elements without fill and border only, that should work. However, in Inkscape like Illustrator, some tools are creating shapes and not lines, This is actually the difference between the two SVGs you provided : line https://gist.github.com/pleabargain/febaad26b59d4ac5c3f18e14086c7ab7 and filled shape https://gist.github.com/pleabargain/aea9469b6a991cebc11192de2b833bcc. For example on the last one, you could animate the border of the shape, but not the content.

On Inkscape, I would recommend to use the Node Tool http://2.bp.blogspot.com/-ozwvlgFuplE/UaruMUEdj3I/AAAAAAAADG0/LGYbfJhFrNc/s1600/1.ToolBox.png that will give you the freedom to build perfect lines. It's not easy on the first contact, but it's the universal tool. Once you get used to it, you can build everything :)

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/maxwellito/vivus-instant/issues/1#issuecomment-271745264, or mute the thread https://github.com/notifications/unsubscribe-auth/AAnHTm7QjbyO22QOQEJg6czeVgDjFMvKks5rRCdSgaJpZM4LeSef .

-- Dennis G Daniels

maxwellito commented 7 years ago

You're welcome! :) Actually, you remind me that I really should build a little doc to explain how to make fully compatible SVGs. That would be useful.

abhishekakade commented 5 years ago

I know its a little late, but if anyone still comes wandering around here because they couldn't get their SVG text to animate, here's how you can export the SVG for Vivus Instant text animation easily in Illustrator. Inside Illustrator, create a text box, write the text you want to animate, choose fill as none and add stroke to the font (so its visible). Then select that text box and right click to select export selection. Now an 'Export for Screens' window will open up. But before you can export it, you need to click on that settings icon in the Formats section, select 'SVG' from the list of extensions that appears next and in the Font drop down menu, select Convert to Outlines. Also keep the 'Responsive' option on/checked. Now export the selection (text box) as SVG and drag and drop on Vivus Instant and it should animate as expected. Btw, thanks for such a cool lil tool @maxwellito 🙌