Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Paddy

Beginner question about repeating elements in SVG

Recommended Posts

Hi,

I'm new to animating SVGs. For this attached one, I'll be moving and re-sizing the colored shapes down the tall vertical tubes using inline SVG, HTML and JS with GreenSock.

What little programming sense I have is telling me that creating an SVG with 4 tubes and twelve colored shapes is breaking the "Don't Repeat Yourself" rule.  Can anyone give me some pointers on the "correct" way to create duplicate graphics and show/hide between one and four on screen at once?

Can I create just a single version of the colored square (with the graduated fill) and create a number of different colored versions (which I can animate separately) by changing a color attribute without losing the other fill stop colors/positions? They'd all need different IDs of course - would I generate the SVG code using JS?

I hope that all makes sense.

Thanks

- Paddy

burette-tryout-opt.svg

Link to comment
Share on other sites

Hey Paddy.

 

2 hours ago, Paddy said:

What little programming sense I have is telling me that creating an SVG with 4 tubes and twelve colored shapes is breaking the "Don't Repeat Yourself" rule.  Can anyone give me some pointers on the "correct" way to create duplicate graphics and show/hide between one and four on screen at once?

SVG is not your conventional programming language. Most the time it'd be better considered as assets. Repeating yourself in an SVG is not really a big deal - it's more like like having multiple divs all called "card" on your page that serve different purposes.

 

With that being said, if you really want to you can reduce the amount of repetition by using SVG's <use> element. You can then change the color of each as needed. This can save file size but <use> element can also be harder to work with at times depending on your animation needs. 

 

As is usually the case, the best way method on your needs :) 

  • Thanks 1
Link to comment
Share on other sites

Hi Zach, thanks for the suggestion. I've just encountered the <use> element here on the Greensock Forum where it's been renamed "the <don't use> element" !

I've been trying out the cloneNode command which I can make sense of, though I gather it might not clone things like fills that are in the <defs> section of the SVG? Are there any other common cloneNode pitfalls I should watch out for?

 

I've started out by creating my SVGs in Inkscape so they're enormous messy things at the best of times, and once I start creating several copies of the same images... Having worked with CSS for the last 20ish years, all those inline SVG styles etc feel wrong! SVGOMG is a bit of a saviour.

 

I'll have a look at the world of <use> too, then hopefully I'll be applying some GreenSock action to a new interactive tool.

Thanks again

- Paddy

Link to comment
Share on other sites

I'd recommend creating your elements in a loop. Here's a basic starter example of that.

See the Pen ZEGNyQy by PointC (@PointC) on CodePen

 

Here's another thread where professor @OSUblake talks about using a document fragment and the performance pitfalls of <use>. I think you'll find it helpful.

Happy tweening.

:)

 

  • Like 3
  • Thanks 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    No registered users viewing this page.

×