SVG by Attribute Last Updated : 31 Mar, 2022 Improve Improve Like Article Like Save Share Report The by attribute specifies a relative offset value for an attribute that will be modified during an animation. Syntax: by="numbers" Attribute Values: integers: Integer at which we want to set the by attribute. We will use the by attribute for adjusting the size of the shape. Example 1: HTML <!DOCTYPE html> <html> <body> <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <rect x="5" y="5" width="20" height="20"> <animate attributeName="width" fill="freeze" by="20" dur="4s" /> </rect> </svg> </body> </html> Output: Example 2: HTML <!DOCTYPE html> <html> <body> <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <rect x="5" y="5" width="20" height="10"> <animate attributeName="height" fill="freeze" by="10" dur="4s" /> </rect> </svg> </body> </html> Output: Like Article Suggest improvement Previous SVG FESpotLightElement.pointsAtZ Property Next SVG cx Attribute Share your thoughts in the comments Add Your Comment Please Login to comment...