SVG can be used to create banners, charts, diagrams, graphs, illustrations, logos, maps, and many other things that require text. Fortunately you don't have to actually draw the text. You can create text using the SVG text element in which you can specify the attributes of the text. This tutorial explains how to code for outlined letters text in your SVG drawings using the SVG text element.
<svg width="300" height="60" version="1.1" xmlns="http://www.w3.org/2000/svg" style="border-style:solid;"> <text x="25" y="40" font-family="Verdana" font-size="35" font-weight="bold" fill="white" stroke="black" stroke-width="2"">Stroked Text</text"> </svg">
Shown below are the attributes you can specify for a text element.
| Attribute | Description |
| x | x-axis coordinate of the upper-left corner of the text |
| y | y-axis coordinate of the upper-left corner of the text |
| font-family | name of font, similar to styles attribute |
| font-size | size of font, similar to styles attribute |
| font-weight | boldness of font, similar to styles attribute |
| fill | color to fill the characters |
| stroke | color to outline the characters |
| stroke-width | width of lines to outline the characters |
| textLength | used to ensure that text displays same width if web fonts fail to load |
| lengthAdjust | how text is stretched or compressed to fit into its element. Set to spacing the letter forms are preserved, the space between them stretches or shrinks. Set to spacingAndGlyphs the entire text element stretches or shrinks |
More Graphics Design Tips:
• SVG For Responsive Web Design
• Free Replacement for Overpriced Photoshop
• Free Animated GIF Maker
• SVG Code to Translate a Rectangle and Text
• Five Surprising Reasons I Use Krita for Photo Editing
• Paint.Net Ink Sketch, Oil Painting, and Pencil Sketch Artistic Effects
• Inkscape Shadows and Highlights
• How to Create a Product Box in Photoshop
• MathML mtext Element to Display Plain Text
• Animation Software - The Amazing 3D World