Styling SVG Text

On this page, styles are used to change the appearance of SVG text elements.

The first thing to do is to create some svg! We use the 'text' element to write on the screen. We can position each word wherever we wish.

We put a style section in the SVG and create some classes. We use the classes to style the text elements. There are endless possibilities so experimenting with it is really fun.

Here is the example:

My cat is Grumpy!

This example came from a company called GSAP. Their website is here: GSAP.

GSAP have a product which is all about animating things on web pages. I have some pages on my website which show some things I have done using this product. However, to get started we are just going to use html, css and svg.