Jump to content
Search Community

Is it ok to animate SVG width and height attributes?

wcomp test
Moderator Tag

Recommended Posts

I have always heard that animating the width and height properties of an element in CSS is bad practice because the browser has to do lots of calculating, painting, etc. In certain cases where width and height CSS properties are being animated I can actually see a difference in animation quality when put up against a transform. I'm curious though, does the same rule apply to animating the width and height attributes of an SVG element? Like in the codepen below.  Or since its an SVG is that ok? I can't seem to tell any visual difference between animating the width and height and using a scale transform on an SVG parent element. I'm Interested in what the consensus is out there about this. Thanks!

See the Pen XWbqGpE by Wcomp (@Wcomp) on CodePen

Link to comment
Share on other sites

Hey wcomp.

 

In short, animating the SVG element itself is no different than animating other DOM elements. The browser still needs to do the same amount of recalculating and laying out as if that SVG were a div. Just because the inner contents of the SVG scale more easily doesn't affect the needs of resizing the parent. 

 

Animating an element's width or height is acceptable in some circumstances but you should always use transforms if you can. For example if you element is taken out of the normal document flow (using position absolute or fixed) then affecting its width and height are much less performance intensive because the browser doesn't have to do work in terms of other elements in the document. 

  • Like 3
Link to comment
Share on other sites

5 hours ago, ZachSaucier said:

In short, animating the SVG element itself is no different than animating other DOM elements. The browser still needs to do the same amount of recalculating and laying out as if that SVG were a div. Just because the inner contents of the SVG scale more easily doesn't affect the needs of resizing the parent. 

Well, if you're talking about animating various SVG elements INSIDE of an <svg>, I don't think that affects document flow. With regular DOM elements that are in the document flow, changing the size of one can shift everything else on the page, having a trickle-down effect. But inside the <svg> world, it's not like that at all. Artwork is independent (no trickle-down calculations). But then again, SVGs are typically resolution-independent which can be more processor-intensive to render. But yeah, if you're merely talking about a raster <image>, that ain't resolution-independent. 

 

Also, keep in mind that for most regular DOM elements, width/height snap to whole pixel values (in other words, the browser doesn't render something 20.38px wide...it just rounds to 20px), thus it can make things APPEAR jittery when animating just because it's snapping to whole pixels. With vectors (resolution-independent SVG artwork), there's no such snapping. There's sub-pixel rendering, so that can make it appear smoother while animating. 

  • Like 3
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...