How to Use Text in SVG to Create Custom Graphics

If you already master the basics we covered in our SVG guide and know how to structure primitive shapes, it is time to add a key ingredient: text! The <text> element in SVG allows you to include titles, labels, or even custom typographic logos, all fully scalable and web-optimized. In this tutorial, we will guide you step-by-step to learn how to use text in SVG and create stunning custom graphics.

Creating text inside an SVG file is very straightforward. You just need to insert the element into a plain text document, change the extension to .svg, and open it in your favorite web browser. At creadorlogos.com, we have designed professional logos combining vector text and geometric shapes. Today we will show you how to apply it yourself, whether you are a designer, developer, or beginner.

Step 1: Create an SVG with Basic Text

Let us start with the fundamentals: adding text to an SVG canvas using the <text> tag. Let us write the message "Hello, SVG!" following these steps:

1. Open your trusted code editor (such as Notepad or Visual Studio Code).
2. Copy and paste the following code:

<svg width="300" height="80" xmlns="http://www.w3.org/2000/svg">  <text x="20" y="50" font-family="Arial" font-size="24" fill="black">Hello, SVG!</text></svg>

3. Save the file with the .svg extension (for example, hola-svg.svg).
4. View it directly in any web browser or import it into vector editors like Inkscape or Adobe Illustrator.

Visual result:

Attributes x="20" and y="50" position the text within the canvas, referencing the (0,0) point at the top-left corner. You can embed this code directly into your website's HTML body inside a <div> container.

Step 2: Customize Text with Advanced Styles

You can apply design attributes such as weight, decoration, opacity, and strokes using code. Check out this example with centered and outlined text:

<svg width="300" height="150" xmlns="http://www.w3.org/2000/svg">  <text x="150" y="75" font-family="Verdana" font-size="24" font-weight="bold" text-decoration="underline" fill="#ff6600" fill-opacity="0.8" stroke="#000000" stroke-width="1" text-anchor="middle">Decorated SVG Text!</text></svg>

Result:

Step 3: Combine Text with Geometric Shapes

The true potential of SVG text is unlocked when integrating it with primitive shapes to build simple logos:

<svg width="300" height="200" xmlns="http://www.w3.org/2000/svg">  <circle cx="150" cy="100" r="80" fill="#a1d99b" stroke="#006600" stroke-width="4"></circle>  <text x="150" y="110" font-family="Arial" font-size="24" font-weight="bold" text-anchor="middle" fill="white">My Logo</text></svg>

Result:

Step 4: Multi-line Text with <tspan>

To structure independent headings and subheadings without declaring multiple text tags, use the <tspan> element:

<svg width="300" height="150" xmlns="http://www.w3.org/2000/svg">  <text x="150" y="50" font-family="Arial" font-size="20" text-anchor="middle" fill="black">    <tspan x="150" dy="0">Welcome</tspan>    <tspan x="150" dy="30">to my web</tspan>  </text></svg>

Result:

Step 5: Design Logos with Text Easily on creadorlogos.com

If you prefer a fast visual workflow without coding by hand, the platform at creadorlogos.com allows you to:

• Type and position text choosing from thousands of exclusive fonts.
• Combine your titles with geometric shapes and professional vector assets.
• Export your design directly in SVG format or as a PNG image ready for social media and digital projects.

Explore more inspiring examples in our corporate identity section at creadorlogos.com/ejemplo-logotipos.php. Start designing today!