Like patterns, gradients can add depth and interest to a composition. Despite the current trend toward a flatter design aesthetic, gradients are still highly useful.
Patterns for web design elements are usually created with images. While some patterns can be created using CSS alone, most involve images of some kind. Fortunately SVG makes it easy to create simple and more complex patterns that can scale with your design and likely require fewer http requests.
A common graphic element drawn with SVG are arrowheads. You could create a new one for each line, but that duplicates code. You could reuse a graphic you defined in
<symbol> elements, but then you have to move and rotate your arrowhead with each new line. Better would be to make things easy on yourself and use a