DEV Community

Cover image for How to convert text into image with svg tag
Arno Solo
Arno Solo

Posted on • Edited on

3 1

How to convert text into image with svg tag

Original post

Convert text into image with svg tag. The text is centered and able to wraps automatically.

Image description

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 125">
    <foreignObject width="200" height="125" x="0" y="0">
        <div class="h-full flex justify-center items-center">
            <p class="text-16px text-center">
                YOUR_TEXT_HERE
            </p>
        </div>
    </foreignObject>
</svg>
Enter fullscreen mode Exit fullscreen mode

viewBox means that the canvas starts at (0,0) and has a length and width of 200 and 125

foreignObject allows HTML elements to be placed in SVG
div flex layout is used to center the text, if you are not familiar with this atomized style, you can take a look at tailwind css. This example is using unocss

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up