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

About BTH User Agreement Privacy Site Map Contact News Feeds

SVG Code for Outlined Letters Text

By Stephen Bucaro

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