Jump to content
Search Community

How to avoid heavy DOM? ( SVG makes DOM too much heavy!!! )

Muhammad Abdullah test
Moderator Tag

Recommended Posts

Hi GSAP experts,

I'm working with a SVGs path tag and I'm using SVG markup right inside my html(actually JSX).
so, my concern is the SVG I'm working with is too much heavy and it makes my DOM to much lengthy.

Please, help me to avoid this?

any best practice ?

Please find the code pen link.

thanks 

See the Pen XWejypM by abdullah-rafique (@abdullah-rafique) on CodePen

Link to comment
Share on other sites

Hi @Muhammad Abdullah,

 

As stated in the forum guidelines - we try to keep these forums to GSAP specific questions and this is purely about SVG.

 

I would recommend one of the following options

  • Recreate this in canvas or webGL
  • Simplify the gradient and use drawSVG draw out the stroke
  • Just accept that you've got a ton of SVG code and abstract it away into it's own component or template

 

You could also run it through svg.omg but that's not gonna deliver huge gains for this - there's a lot of path data

Link to comment
Share on other sites

I don't know if that's an option in your project, but from what I see in your example, I would probably try to draw one SVG with komplex gradients that represents the final sate (if there is such a thing in your case) and work with masking.
Just a guess though...

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.
×
×
  • Create New...