How To Style and Position SVG Text With The tspan Element

The SVG text element allows you to easily position and style text, but what do you do if you want to position and style different parts of the text differently? Do you need to create multiple text elements? Nope. There’s an easier way.

Continue reading

How To Manipulate SVG Text

Last week I showed you how to create SVG text using the <text> element. In the examples I added x and y coordinates to position the text and the individual characters in a string of SVG text. There’s more to the <text> element.

Continue reading

How To Work With SVG Text

SVG text offers the best of both worlds. It’s rendered like other graphic elements so you can do things like add strokes and fills that you can add to shapes, lines, and arrowheads. It’s also packaged as XML character data, which means it’s real text.

Continue reading

How To Use Sass Variables

Think of all the times you might add the same color to different elements or classes in your CSS file and then think of all the fun you have changing everything when you decide another color would work better. Wouldn’t you prefer to make the change once and have the rest update automatically?

Continue reading

The Pros and Cons of Nesting Your Sass Code

Nesting can be a good way to organize your Sass code. It can also lead to specificity problems if you nest too deeply. You don’t have to look to far to find people who’ll tell you how wonderful nesting is or how the universe might cave in on itself if you attempt to nest your code.

The truth as usual is somewhere in between the extremes.

Continue reading