All you need to know about SVG on the web

On this page, we look at how to make text in SVG, as well as how you can use CSS styles inline. We also take a look at what's coming up with SVG 2.0.

We'll start with making text, which is easy in SVG. You use the <text> tag to define it. Here is an example:

<text x="10" y="10">This is text.</text>

The x and y determine the position of the text. Like with the shape elements, text can be colourised with the fill attribute and given a stroke with the stroke attribute. You can even use gradients and patterns as strokes and fills.

Set font properties

Each of the following properties can be set as an attribute or via a CSS declaration: font-family, font-style, font-weight, font-variant, font-stretch, font-size, font-size-adjust, kerning, letter-spacing, word-spacing and text-decoration.Like the <span> elements <tpsan> can also be used to select web sections of your text. A typical use-case might be to bold some text like this:

<text>
  This is <tspan font-weight="bold" fill="red">bold and red</tspan>
</text>

You can also set strokes, fills, rotations, direction and much more. Here is a quick example of setting the text to draw outlines only, and to switch the direction of the text:

<text x="350" y="50" style="fill: none; stroke: #000000; font-size: 48px; direction: rtl; unicode-bidi: bidi-override;">This is text</text>

We use the direction style and set it to rtl, which means right to left. We also have to set the unicode-bidi style to bidi-override.

Use textPath

This element uses the xlink:href attribute to connect to a path and aligns the characters along this path. This enables you to draw virtually any path you wish, and then attach your text to it, so it follows it. Here's an example:

<path id="my_path" d="M 40,40 C 200,100 10,100 520,200" 
fill="transparent" />
<text>
  <textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#my_path">
    This Text is Curved
  </textPath>
</text>

CSS and SVG

You can use CSS styles inline, inside SVG elements. Here is an example:

<svg width="350" height="60">
 <text>
   This is <tspan font-weight="bold" fill="red">bold and red</tspan>
 </text>
 <style><![CDATA[
  text{
 dominant-baseline: hanging; font: 28px Verdana, Helvetica, Arial, sans-serif;
 }
 ]]></style>
</svg>

You can also use CSS separately, just like with any other elements on your page. For example, if you set a class attribute on your SVG shape, you can set its colour through regular CSS like this:

<svg class="logo" width="400" height="400" viewBox="0 0 400 400">
 <rect class="box" x="0" y="0" width="400" height="400" fill="#56A0D3" />
</svg>

And the CSS would be:

.box { fill: red; }

Notice we had inline colouring that we then overrode with our CSS. Pretty cool!

What about SVG 2?

SVG 2.0 is currently in candidate recommendation stage, which means it is not supported by browsers yet, and it may still be some time before it is. It boasts numerous improvements and features. It also removes or deprecates some features of SVG 1.1 and incorporates new features from HTML5 and Web Open Font Format.

SVG 2.0 removes several font elements, such as glyphs, and they are replaced by the WOFF font format. Also the xml:space attribute is deprecated in favour of CSS.

It reached candidate recommendation stage on 15 September 2016. The latest draft was released on 18 October 2018. You can read more about it and follow its progress here.

This article was originally published in issue 282 of creative web design magazine Web Designer. Buy issue 282 here or subscribe to Web Designer here.

Related articles:

• 6 reasons why you should be using SVG
• Animate SVG with JavaScript
• Create and animate SVG polygons