SVG to Attribute

The SVG to attribute indicates the initial value of an attribute. It is used with from attribute.

Syntax:

to = "number"

Attribute Values:

number: This attribute value holds the number at which we want to set the attribute.

We will use the to attribute for setting the initial value.

Example 1:

HTML

<!DOCTYPE html>
<html>

<body>
    <svg viewBox="0 0 1000 1000" 
        xmlns="http://www.w3.org/2000/svg">
        
        <rect x="10" y="10">
            <animate attributeName="width" 
                fill="freeze" from="100" 
                to="150" dur="3s" />

            <animate attributeName="height" 
                fill="freeze" from="100" 
                to="150" dur="3s" />
        </rect>
    </svg>
</body>

</html>

Output:

Example 2:

HTML

<!DOCTYPE html>
<html>

<body>
    <svg viewBox="0 0 1000 1000" 
        xmlns="http://www.w3.org/2000/svg">
        
        <rect x="10" y="10" fill="green">
            <animate attributeName="width" 
                fill="freeze" from="100" 
                to="150" dur="3s" />

            <animate attributeName="height" 
                fill="freeze" from="100" 
                to="150" dur="3s" />
        </rect>
    </svg>
</body>

</html>

Output:

Explore