SVG Patterns

Posted in SVG Tutorial

Updated on Oct 13, 2024

By Mari Selvan

👁️ 194 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

SVG (Scalable Vector Graphics) patterns allow you to create intricate and reusable designs that can be applied as fills or strokes to various SVG elements. Patterns are a powerful feature of SVG, enabling the creation of complex graphics and textures with minimal effort.

In this guide, we'll explore the syntax, attributes, and practical usage of SVG patterns.

💡 Syntax

The syntax for creating an SVG pattern involves using the <pattern> element within the <defs> section of your SVG. The pattern is then applied to other SVG elements using the fill or stroke attribute.

Here's the basic structure:

Syntax

Copied

<svg width="width" height="height">
  <defs>
    <pattern id="patternID" patternUnits="userSpaceOnUse" width="patternWidth" height="patternHeight">
      <!-- Pattern content goes here -->
    </pattern>
  </defs>
  <rect width="rectWidth" height="rectHeight" fill="url(#patternID)" />
</svg>

🧰 Attributes

id: A unique identifier for the pattern. This is used to reference the pattern when applying it to other elements.
patternUnits: Defines the coordinate system for the pattern content. Can be userSpaceOnUse (default) or objectBoundingBox.
width: Specifies the width of the pattern's bounding box.
height: Specifies the height of the pattern's bounding box.
Additional attributes like patternTransform can be used to transform the pattern.

📄 Example

Let's create a simple SVG pattern and apply it to a rectangle:

index.html

Copied

<svg width="200" height="200">
  <defs>
    <pattern id="dots" patternUnits="userSpaceOnUse" width="10" height="10">
      <circle cx="5" cy="5" r="3" fill="red" />
    </pattern>
  </defs>
  <rect width="200" height="200" fill="url(#dots)" />
</svg>

🧠 How it works?

In this example, we've defined a pattern with small red dots. This pattern is then applied to fill a rectangle, resulting in a polka dot effect.

📄 Advance Example

For more complex patterns, you can combine multiple SVG elements:

index.html

Copied

<svg width="200" height="200">
  <defs>
    <pattern id="stripes" patternUnits="userSpaceOnUse" width="20" height="20">
      <rect width="10" height="20" fill="blue" />
      <rect x="10" width="10" height="20" fill="white" />
    </pattern>
  </defs>
  <rect width="200" height="200" fill="url(#stripes)" />
</svg>

🧠 How it works?

This example creates a striped pattern by combining two rectangles of different colors within the pattern definition.

🎉 Conclusion

SVG patterns are a versatile and efficient way to enhance your graphics with reusable design elements.

By mastering the syntax and attributes of SVG patterns, you can create intricate and visually appealing designs that can be applied to a variety of SVG elements, adding depth and texture to your web projects.