Welcome to Bucaro TecHelp!

Bucaro TecHelp
HTTPS Encryption not required because no account numbers or
personal information is ever requested or accepted by this site

About Bucaro TecHelp About BTH User Agreement User Agreement Privacy Policy Privacy Site Map Site Map Contact Bucaro TecHelp Contact RSS News Feeds News Feeds

SVG Code for Outlined Letters Text

Stroked Text

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.

AttributeDescription
xx-axis coordinate of the upper-left corner of the text
yy-axis coordinate of the upper-left corner of the text
font-familyname of font, similar to styles attribute
font-sizesize of font, similar to styles attribute
font-weightboldness of font, similar to styles attribute
fillcolor to fill the characters
strokecolor to outline the characters
stroke-widthwidth of lines to outline the characters
textLengthused to ensure that text displays same width if web fonts fail to load
lengthAdjusthow 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:
• Export Inkscape Drawing as an Image
• The Game Maker's Apprentice
• SVG Code to Create a Rectangle and Text and Translate as a Group
• Inkscape Shadows and Highlights
• Stop Motion Animation: Nine Creative and Easy Techniques
• Free Replacement for Overpriced Photoshop
• Graphics Design for Beginners - Blur Filters
• History of Type Development and Type Terminology
• Building an Image with a Logo
• How to Make a Simple Animated Banner in Flash CS3

RSS Feed RSS Feed


Follow Stephen Bucaro Follow @Stephen Bucaro


Fire HD
[Site User Agreement] [Privacy Policy] [Site map] [Search This Site] [Contact Form]
Copyright©2001-2018 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268