SVG textures are made of dynamic or predefined SVG patterns, images,masks and gradients. Patterns can be set in the “fill” and “stroke” property of an SVG object, masks have their own “mask” property. One object value can only have one pattern applied, one to the “fill” value and one to the “stroke” value. To create a multi layer pattern, it’s necessary to create multiple instances of the same object and stack them up.
Patterns,masks and gradients can be created and modified dynamically with javascript. Many of their values are animatable either via SMIL or javascript. This makes it possible to create dynamic textures, and sprite animations .

pattern

To create patterns, they first need to be predefined in the <defs> tag. Once a pattern is created it can be reused as many times as we want, but always with the same parameters. Once the pattern changes, each object applied with this pattern will change too.
The values of the pattern x, y, width, height, patternUnits is defined inside the <pattern> tag, everything within the <pattern> tags will be used as texture.

<svg id="SVG_scene" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 
 <defs>
    <pattern id="pattern" x="10px" y="10px" width="20" height="20" patternUnits="userSpaceOnUse" >
        <circle id="ptnCircle" cx="10" cy="10" r="10" style="stroke: none; fill: #0e8cf8;"/>
    </pattern>
 </defs>
 
 <circle cx="50%" r="20%" cy="50%" style="stroke: #000000; fill: white;"/>
 <circle cx="50%" r="20%" cy="50%" style="stroke: #000000; fill: url(#pattern);"/>
 </svg>

gradient

To create linear or radial gradient, its also necessary to predefine them inside the <defs> tag. They can be used as fill or stroke value of an SVG object, as pattern or as mask.
The direction of gradients can be set inside the <Gradient> tag, by changing the values x1,y1 and x2,y2. The color range of the gradient is defined within the <Gradient> tag with <stop> tags. Each <stop> tag defines a color-stop.

 <defs>
        <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop id="stop_1" offset="10%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
            <stop id="stop_2" offset="30%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
            <stop id="stop_3" offset="70%" style="stop-color:rgb(0, 50, 255);stop-opacity:1" />
        </linearGradient>
    </defs>

masking

Masks are also created inside the <defs> tag. Masks can be applied by setting the “mask” value of an SVG object accordingly. It masks out the texture that is applied to the same object as the mask itself.

<defs id="defs">
        <pattern id="grass"  x="0" y="0" width="350" height="350" patternUnits="userSpaceOnUse" >
            <image x="0" y="0" width="350px" height="350px" xlink:href="img/Grass.jpg" />
        </pattern>
        
        <pattern id="dirt"  x="0" y="0" width="350" height="350" patternUnits="userSpaceOnUse" >
            <image x="0" y="0" width="350px" height="350px" xlink:href="img/Farmland.jpg" />
        </pattern>
        
        <mask id="maskDirt" x="0" y="0" width="100" height="100" > </mask>
    </defs>

<rect x="0" y="0" width="100%" height="100%" fill="black" stroke="black" mask="url(#maskDirt)"/>

sprite animation

Sprite animation are made of a animated pattern, which have a sprite sheet applied. This is a step by step animation defined inside the <animation> tag with the “calcMode = discrete” value. The steps are defined in the “values”, and the time to run is defined in the “keyTimes” value. The x and y direction of the sprite sheet needs to be animated separately to create the feel of a smooth motion.

 <defs id="defs">
        <pattern id="pattern1" x="0" y="0" width="128" height="128" patternContentUnits="userSpaceOnUse" patternUnits="userSpaceOnUse">
            <image x="0" y="0" width="128" height="128" xlink:href="img/Coin_sprites.png" />
           <animate
                attributeName="x"
                calcMode = "discrete"
                values="0;-32;-64;-96;-128"
                keyTimes="0;0.25;0.5;0.75;1"
                dur="0.4s"
                begin="0s"
                repeatCount="indefinite" />
            
            <animate
                attributeName="y"
                calcMode = "discrete"
                values="0;-32;-64;-96;-128"
                keyTimes="0;0.25;0.50;0.75;1"
                dur="1.6s"
                begin="0s"
                repeatCount="indefinite" />
        </pattern>
    </defs>

conclusion

It is really easy to create patterns, masks and gradients with SVG. They are easy to reuse, change, manipulate and animate. It’s possible to attach them to objects, text and strokes. It’s possible to use sprite sheets, and to create sprite animations.
A great way to create dynamic stuff, with a really simple syntax. There are plenty of options for any  HTML5 game or web designer.