How to convert text into image with svg tag

#webdev #javascript #tutorial #svg

Original post

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

<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>

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

Build apps, not infrastructure.

Dealing with servers, hardware, and infrastructure can take up your valuable time. Discover the benefits of Heroku, the PaaS of choice for developers since 2007.

Visit Site