The svg text element

Card Puncher Data Processing

About

The text element is a svg element that permits to hold a text

Example

Basic

<svg height="60" >
<text 
      x="50" 
      y="50"
      font-family="Consolas" 
      font-size="20"
      fill="black" 
      >
      My Text
      </text>
</svg>

Centered

<svg class="bd-placeholder-img" width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"
     role="img"
     aria-label="Placeholder: Image" preserveAspectRatio="xMidYMid slice" focusable="false">
    <title>Placeholder</title>
    <rect width="100%" height="100%" fill="#e5e5e5"></rect>
    <text x="50%" y="50%" fill="#999" dy=".3em" 
        text-anchor="middle" 
        alignment-baseline="middle"
        font-size="1.125rem"
        >
        Image
    </text>
</svg>





Discover More
Card Puncher Data Processing
SVG - TextPath element

on a path
Card Puncher Data Processing
Scalable Vector Graphics (SVG)

SVG is a markup language describing two-dimensional image in XML . You just have to declare the visuals that you want. SVG allows for three types of graphic objects: vector graphic shapes (e.g.,...



Share this page:
Follow us:
Task Runner