Text & Styling

On This Page

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:

This is SVG text! 
<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:

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:

This text sure is wavy! 
<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:

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:

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:

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:

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.

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:

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:

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.

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.

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.

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;"/>

Text & Styling CSS Resources