Welcome to TalkGraphics.com
Results 1 to 10 of 21

Thread: Animating SVG

Hybrid View

  1. #1
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    17,790

    Lightbulb Animating SVG

    Until a few weeks ago, I was relying on anime.js to animate content including SVG.
    The biggest downside to this approach as @Egg and @handrawn was the lack of a Timeline Panel.

    My go-to application for SVG production for as few years has been Boxy SVG and a few weeks pack launched v4, which handles SVG animation with timelining.
    There is no current tutorial or documentation, just a commitment to fully develop the animation aspects:
    animate over 50 different properties such as fill color, stroke width, font size, view box and path data. Motion paths and transform animations are also supported in this release
    In other words, you can currently achieve a hell of a lot.

    I produced this, while learning my way: SVG - Animated.xar

    If you open into https://boxy-svg.com/app, you can roll your own.
    If you want to see what I worked on, drag this into Boxy: TG.svg.

    The mechanics of adding the animation into a Xara design are a bit crude presently but essentially create a Box 500px square.
    Open the exported SVG file, saved from Boxy, in a text editor and copy the contents into the Box's Placeholder Body.

    It even works as far back as Xara WDPv11.
    Do note, you see nothing in Preview, you have to open into a more modern browser.

    Acorn
    Acorn - installed Xara software: Cloud+/Pro+ and most others back through time (to CC's Artworks). Contact for technical remediation/consultancy for your web designs.
    When we provide assistance, your responses are valuable as they benefit the community. TG Nuggets you might like. Report faults: Xara Cloud+/Pro+/Magix Legacy; Xara KB & Chat

  2. #2
    Join Date
    Aug 2000
    Location
    Harwich, Essex, England
    Posts
    21,904

    Default Re: Animating SVG

    Yes that's an improvement Acorn but I find the timeline somewhat confusing. There doesn't appear any way to give a total length to the timeline & have it repeat. Help is very basic as well.

    https://parkeston.com/!!!!!!test/boxy-ani.svg
    Egg

    Intel i7 - 4790K Quad Core + 16 GB Ram + NVIDIA Geforce GTX 1660 Graphics Card + MSI Optix Mag321 Curv monitor
    + Samsung 970 EVO Plus 500GB SSD + 232 GB SSD + 250 GB SSD portable drive + ISP = BT + Web Hosting = TSO Host

  3. #3
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    17,790

    Default Re: Animating SVG

    Quote Originally Posted by Egg Bramhill View Post
    Yes that's an improvement Acorn but I find the timeline somewhat confusing. There doesn't appear any way to give a total length to the timeline & have it repeat. Help is very basic as well.
    https://parkeston.com/!!!!!!test/boxy-ani.svg
    Egg, thanks for having a go. Sometimes the silence is deafening.

    If you start with a clutch of SVG Shapes then select them all before switching to the Animation pane.
    You can then apply any transformation to each individually.
    Paths are Bezier and can have nodes added.
    All effects can be set to Infinity, loops for a set period and/or ended.
    Freeze set keeps the shape in place at its reached end point.
    You can drag the timeline back and forth.
    You set up values when you have selected the Start or End nodes or any added node in-between.
    You can also apply an overall effect to the SVG as a whole.
    The one thing I have yet to find is to be able to reverse the motion or effect.

    I did mention there was no help as yet. The best read of the possible is https://css-tricks.com/guide-svg-animations-smil/. Not all aspects are implemented currently.

    Acorn
    Acorn - installed Xara software: Cloud+/Pro+ and most others back through time (to CC's Artworks). Contact for technical remediation/consultancy for your web designs.
    When we provide assistance, your responses are valuable as they benefit the community. TG Nuggets you might like. Report faults: Xara Cloud+/Pro+/Magix Legacy; Xara KB & Chat

  4. #4
    Join Date
    Aug 2000
    Location
    Harwich, Essex, England
    Posts
    21,904

    Default Re: Animating SVG

    Understand most of that but a looping timeline would be a huge benifit. Also a way to change a shapes origin would be good.

    Here's an animation I created in Boxy that does loop but the workaround is very limiting.

    I attach a xar with one embedded copy and one svg text pasted into a placeholder but Xara Designer Pro X 17 truncates the text. I can't test wether Xara Designer Pro+ is better.
    Attached Files Attached Files
    Egg

    Intel i7 - 4790K Quad Core + 16 GB Ram + NVIDIA Geforce GTX 1660 Graphics Card + MSI Optix Mag321 Curv monitor
    + Samsung 970 EVO Plus 500GB SSD + 232 GB SSD + 250 GB SSD portable drive + ISP = BT + Web Hosting = TSO Host

  5. #5
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    17,790

    Default Re: Animating SVG

    Egg, perhaps it's how we approach the animations.
    When you click the Bar and pick infinity, it greys out for the rest of time.

    I use Web properties > Placeholder > Replace with graphic file for local files.. I use your for already uploaded SVGs.
    When the Placeholder code is too big, try SVG-OMG; you can compact a fair amount.
    Placeholdering is good if you intent to manipulate the SVG with JS or CSS after rendering.

    If the design is complex then save out the static SVG parts as a separate file.
    Your original file seemed to have a few invisible part that make the size on the page wider then the visible design.

    Your animation reworked: Copper.svg.
    Still too big for Placeholder but works well embedded.

    Acorn
    Acorn - installed Xara software: Cloud+/Pro+ and most others back through time (to CC's Artworks). Contact for technical remediation/consultancy for your web designs.
    When we provide assistance, your responses are valuable as they benefit the community. TG Nuggets you might like. Report faults: Xara Cloud+/Pro+/Magix Legacy; Xara KB & Chat

  6. #6
    Join Date
    Feb 2007
    Location
    UK
    Posts
    21,290

    Default Re: Animating SVG

    I don't have pro+ so I can't use this in xda ?

    I'll look at the online app, but it does not appear to be supported in firefox so it will have to wait for now...
    -------------------------------
    Nothing lasts forever...

 

 

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •