SVG Text

Posted in SVG Tutorial

Updated on May 18, 2024

By Mari Selvan

👁️ 173 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

Text is a crucial element in web design, allowing developers to communicate information and enhance user experience. In Scalable Vector Graphics (SVG), text can be easily incorporated and manipulated alongside other graphical elements.

In this guide, we'll explore the syntax, attributes, and usage of SVG text to help you integrate dynamic and visually appealing text into your web projects.

💡 Syntax

In SVG, text is created using the <text> element. Here's the basic structure:

Syntax

Copied

<svg>
  <text x="x-coordinate" y="y-coordinate">Your text here</text>
</svg>

🧰 Attributes

x: Specifies the x-coordinate of the starting point for the text.
y: Specifies the y-coordinate of the baseline of the text.
Additional attributes like font-family, font-size, fill, text-anchor, and alignment-baseline can be used to style and position the text.

📄 Example

Let's create a simple SVG text element:

index.html

Copied

<svg width="200" height="200">
  <text x="50" y="100" font-family="Arial" font-size="20" fill="red">Hello, SVG Text!</text>
</svg>

🧠 How it works?

In this example, we've positioned the text "Hello, SVG Text!" at coordinates (50, 100), with Arial font, 20px font size, and red fill color.

🎉 Conclusion

SVG text offers developers a flexible and scalable way to incorporate textual content into their web designs.

By understanding the syntax, attributes, and styling options available for SVG text elements, you can create visually appealing typography that seamlessly integrates with other graphical elements on your website.