Text & Styling

Introduction

Text and all the CSS text styling properties are available in SVG drawings. It's been suggested to use the braille 36 font in order to add braille dots into a drawing, otherwise the text itself can be embossed to varying degrees of tactile legibility.

One interesting accessibility feature of SVG is that all text rendered with the Text element becomes focusable by screen readers when encountering an image online.

Text in SVG

Unlike the basic shape and path construction we've seen so far, text is created in more of an HTML fashion, using opening and closing <text> tags and adding in the written text between them. Consider the following code:

<text x="400" y="20" text-anchor="middle" fill="blue" font-size="16pt" font-family="sans-serif">This is SVG text!</text>

A few things are happening here. To start, we've used the x and y attributes to set the text 100 units over on X and 50 units down on Y.

The text-anchor attribute sets where the text actually starts drawing and it can take a few different values:

Setting this to middle means that the entirety of the text will be centered using the anchor point as the middle.
Setting this to "start" will make the first letter of the sentence appear wherever you have set the x and y values.
Setting this to "end" will make the last letter of the sentence appear wherever the x and y values are set.

Just like our shapes, you can use fill and stroke to color in the text or give it an outline. We can also apply font-size and font-family here, along with many other CSS text properties. Kerning, or spacing between the letters, line-height, font-weight, and more are available for all your text needs!

Text on a Path

If we don't want our text to be straight, we can certainly apply it to a shape or a path to make more dynamic presentations of text. Arcing text, circular text, sideways text, all is possible through creative combinations of paths and the textPath element.

This does take a little more advanced setup for your file, however. Remember that weird looking xmlns attribute with a URL that is up in our opening svg tag? That defines the namespace for everything contained between the opening and closing svg tags, allowing browsers and other technology to fully understand that all the code within those tags is to be understood as svg code as opposed to anything else.

Previous versions of SVG would use a complicated xmlns xlink declaration to allow you to reference ids and connect shapes and text to paths, but it's been made much easier by allowing us to just use an "href" attribute to make the same connections without all the extra code.

You can define your path in the definitions section of your drawing, or just have it as a visible path. We'll go in-depth with the definitions section later in this guide. The following code will make a wavy line of text:

<path id="wavy" d="M 16, 100
        C 100, 25 200, 125 300, 100" stroke="black" stroke-width="2" fill="none"/>
<text x="0" y="100" text-anchor="start" font-size="16pt" font-family="sans-serif">
<textPath href="#wavy">This text sure is wavy!</textPath>
</text>

We start the text object off at the same coordinates of the path, have the text-anchor set to left so all the text will emanate out to the right, and note the href attribute in the textPath object that allows us to link the text to the id of the path. Once that is set, the text will flow and wave along the path instead of just staying straight across the page. Pretty nifty, right?

Why would we need this? Here are some uses for putting text on specific paths:

Orienting text along streets in a map, especially curved ones.
Building infographics.
Creating textures using text characters or intricate shapes with ASCII.
Displaying text within charts and graphs in a more dynamic way.
Building reading puzzles or just breaking out of the norm when it comes to how text is laid out on a page.

Styling SVG Elements

Styling your shapes is done with CSS code. We've seen individual attributes appear in some of the previous examples, and they can either be individually broken out on their own or be grouped all within a style attribute and written like true CSS.

For example, we'll go back to a simple rectangle with a stroke. The following code will produce the exact same shapes with the exact same styling:

<rect x="10" y="10" width="100" height="100" stroke="black" stroke-width="5" fill="oldLace"/>
<rect x="120" y="10" width="100" height="100"
	style="stroke: black; stroke-width: 5; fill: oldLace;"/>

I put the style attribute on a separate line and indent it with a tab for my own screen reader readability, but the whole thing can be placed on one line. The important thing to note is how the CSS version is written compared to the individual attributes.

The individual attributes all equal a value in quotes, like fill="oldLace" while the CSS style version have them all within the style attribute, each option ending in a colon and each value ending in a semicolon, especially the last value, so style="fill: oldLace;".

Use whichever method makes the most sense to you or is the easiest for you to write and hear, but pay close attention to the syntax as missing a semicolon or a stray quote can ruin your day when debugging.

Using Color

Throughout this site, we've been trying to stick to using "black" and "oldLace" for our overall colors specifically for their clarity when it comes to embossing SVG graphics.

You may have noticed a few other colors sneaking in here and there in other demos, and if you happen to be designing something both for visual and tactile experience, it's good to know how to apply different color values to your shapes and objects.

CSS Color Keywords

We've been sticking to using CSS Color Keywords which tend to be the easiest to work with since they are just names like "black", "oldLace", "teal", and so on. In fact, there are 147 different colors you can use with just names! Check them all out here:

CSS Color Keywords on W3C Wiki

As shown in all of the demos, these colors are applied directly to an attribute with an equal sign and within quotes, or applied within the style attribute. For example:

fill="teal"
style="fill: teal;"
stroke="black"
style="stroke: teal; fill: orange;"

Hex Color Codes

No, you are not casting any spells here. Hexadecimal, or Hex, color codes are very common across the web and are used throughout the design world, and can be used within your SVG drawings.

A Hex code starts with a hashtag/pound sign and is followed by 6 characters. The characters can be 0-9 and the letters A through F.

Each pair of the 6 characters represents a value for red, green, and blue respectively. 0 is the lowest a value can be, and F is the highest.

For example, pure blue would be "#0000FF" and pure white would be "#FFFFFF." The codes are not case sensitive, so you can use either uppercase or lowercase letter characters. Here are some SVG examples:

fill="#000000" for a solid black fill.
style="stroke: #ff0000;" for a red stroke.

ViewPlus/Tiger Dot Height Hex Codes

If you happen to be outputting to a ViewPlus embosser that can emboss at different dot heights, the Hex colors in the following table will give you full control over exactly how high the dots will be in your final print. So far I've only tested these in the Columbia and Delta embossers, but give them a go if you have an embosser that prints more than one height. The table also gives the corresponding percentage of Black or the overall Lightness value you can use to get the same heights without the hex codes.

For those of you with a Graffiti tactile braille tablet display, try these out as well to make digital tactile graphics with different dot heights for that display!

Tiger or ViewPlus Dot Height Colors
Dot Height	Hex Code	Black/K Percentage
Color 0	#ffffff	0%
Color 1	#e6e7e8	10%
Color 2	#c7c8ca	25%
Color 3	#9d9fa2	45%
Color 4	#808285	60%
Color 5	#58595b	80%
Color 6	#414042	90%
Color 7	#000000	100%

RGB Values

Red, Green, and Blue, or RGB values, can also be used to apply color to SVG elements. All visible colors can be presented as a mixture of red, green, and blue and the values for each range from 0 to 255.

These values are applied using the rgb() property and the individual values for the colors are placed within the parentheses separated by commas, usually without spaces like so:

fill="rgb(0,255,0)" for a green fill.
style="stroke: rgb(100,100,100);" for a medium gray stroke.

Additionally, you can add an additional alpha value to this by using an rgba() property. Alpha is a decimal value between 0 and 1 that represents how transparent the color will be.

An alpha value of 0.5 makes the color semi-transparent, so anything behind it will be able to be seen. A value of 1.0 means the color is fully opaque and cannot be seen through at all, and a value of 0.0 means that the color is fully transparent and essentially invisible.

fill="rgba(0,255,0,0.5)" a semi-transparent green fill.
style="stroke: rgba(255,0,255,1.0) a fully opaque purple stroke.

HSL Color

Hue, Saturation, and Lightness, or HSL, is one more way to define color for SVG elements.

If we consider a circle that has red at 12 o' clock or 0°, green at 5:30 or 120°, and blue at 9:30 or 240°, all the colors of the color wheel can be defined by an angle. This is what we use to determine the Hue value.

The Saturation is the intensity of the color, or technically how much grey has been added to it in a percentage. 100% saturation gives you the full tone of the color, and 0% is pure grey. We define Saturation with a value with a percent sign added.

Lightness is how much white or black has been added to the color to make a shade. Again, this is a percentage value where 0% is pure black, 100% is pure white, and 50% is neutral with just the direct color showing. If the color was blue, a light blue would be around 85%, and a dark blue would be around 25%. Here are some examples:

fill="hsl(120,100%,50%)" is a solid green.
style="stroke: hsl(240,50%,25%);" is a dark muted blue.
fill="hsl(0,0%,75%)" Saturation at 0% makes the color grey, and then you control the lightness of the grey with the Lightness percentage. Very useful for greyscale images or textures!

Just like rgba, you can add an "a" to HSL in order to use an alpha value between 0.0 and 1.0, like so:

fill="hsla(180,100%,50%,0.75)" a slightly transparent turquoise color.

Strokes

Strokes have a few different attributes that can be played with regarding how they are shaped at their ends and how they connect with other line segments.

Stroke-linecap

Stroke-linecap controls the ends of your lines. By default, the lines end with a sharp square edge directly at the ending point.

stroke-linecap="butt" is the default edge, and it's just fun having a butt in your code.
stroke-linecap="round" creates a rounded edge at the ends of your lines. The radius of this round edge is defined by the stroke-width value.
stroke-linecap="square" creates a square edge similar to the butt but will extend out the distance set by the stroke-width value.

Here's a quick code sample showing this attribute off:

<path d="M 10, 90
	L 100, 10"
	style="stroke: red; stroke-width: 10; stroke-linecap: round;"/>
<path d="M 110, 90
	L 210, 10"
	style="stroke: green; stroke-width: 10; fill: none; stroke-linecap: butt;"/>
<path d="M 210, 90
	L 310, 10"
	style="stroke: blue; stroke-width: 10; fill: none; stroke-linecap: square;"/>

Stroke-linejoin

Stroke-linejoin will define how your line segments will connect in polyline, polygon, and path shapes.

stroke-linejoin="round" creates smooth and rounded elbows/transitions between the line segments.
stroke-linejoin="miter" creates even transitions between segments no matter at what angle they connect. Think of these like how a picture frame comes together at the corners.
stroke-linejoin="bevel" creates hard transitions between two angles as line segments come together. It will produce an equal flat edge between two line segments instead of a sharp point.

Here's another sample to show off stroke-linejoin:

<path d="M 10, 10
	L 100, 30
	L 10, 65
	L 110, 90"
	style="stroke: magenta; stroke-width: 8; stroke-linejoin: bevel; fill: none;"/>
<path d="M 100, 10
	L 190, 30
	L 110, 65
	L 210, 95"
	style="stroke: cyan; stroke-width: 8; fill: none; stroke-linejoin: round;"/>
<path d="M 210, 10
	L 300, 30
	L 210, 65
	L 310, 95"
	style="stroke: black; stroke-width: 8; fill: none; stroke-linejoin: miter;"/>

Dashed Lines

Dashed lines can be made using the stroke-dasharray attribute. This attribute can receive up to 4 comma-separated values as input to make complex dashes, but it's very simple to make a basic dashed line with even dashes and spaces.

stroke-dasharray="4" will create a dashed line with a 4 unit long dash and a 4 unit long space, so perfectly even dashes and spaces.
stroke-dasharray="4, 2" creates 4 unit long dashes and 2 unit long spaces.
stroke-dasharray="4,2,2" creates a 4 unit long dash, a 2 unit long space, then a 2 unit long dash, repeating the pattern to create alternating dashes of differing size.

In code, this would look like:

<path d="M 10, 10
	H 400"
	style="stroke:red: stroke-width: 10; fill: none; stroke-dasharray: 10 10;"/>
<path d="M 10, 30
	H 400"
	style="stroke: orange; stroke-width: 10; fill: none; stroke-dasharray: 10 5;"/>
<path d="M 10, 60
	H 400"
	style="stroke: gold; stroke-width: 10; fill: none; stroke-dasharray: 10 5 10;"/>