The SVG Text Element defines a graphics element consisting of text. The attributes and properties of the the SVG Text Element indicate things like the font specification, writing direction, and attributes for how to exactly render and paint the characters. Because SVG Text Elements are rendered using the same rendering methods as the rest of the SVG Graphical Elements, the same coordinate system, transformations, … etc also apply.
In the previous post I talked about SVG patterns, and how they work using fills and strokes. The same applies for SVG text, whatever it was that you did on your rectangles and triangles, you can do on your text. That includes transformations, filling, etc,. etc,.
I’m going to document a couple of tutorials, guides and resources from the most experienced SVG players. You’ll find many examples, insights and tips on how to work with the SVG text element, and how to make it work for you. SVG is fairly new – as you know – and so the first content that we’re seeing is like a raw blueprint.
Right, before we jump into our post – here is an article written by Ilya Pukhalski, it covers all the necessary requirements and details for working with responsive SVG. It talks about a responsive icon project that was the inspiration behind the original post, but also about how stacking SVG files can help to create better responsive designs.
SVG `text` and Designs
Here we have one of the people who’re actively participating in the SVG development – Chris Coyier. In this post, Chris shows us all about the ‘text’ element, and how we can use many types of designs to adjust, and modify our text. He also mentions the usefulness of Adobe Illustrator, and how it lets you to save files directly as SVG. You can then find the ‘text’ element hidden within the source of the file, pretty neat!
Would you like to see a post that discusses the top design software for SVG?
SVG Filters on Text
There is a lot of heated discussion around the SVG trend, not all browsers (mostly major ones) are ready to fully integrate and serve SVG, but what seems to be an even bigger disappointment is the lack of webmasters taking their time to switch to SVG. I’ve to say, I’m one of those people that have avoided the change.
In this post, Chris Coyer is welcoming a guest author – Chris Scott, who talks about using SVG to add filters on top of your text, and some really old-school filters at that. Chris argues that SVG is now widely supported, and the changes that are being made to the text are actually unique, and can be served to both people and search engines.
SVG Text Element
If you’re looking for a full-scale introduction to the text element, then this is the tutorial to watch out for. I like that it has snapshots of the developer tools console as well, don’t be afraid to load it up and experiment a little yourself. Basically, you’ll be learning how to add visualization to different elements, which may or may not prove to be very useful in the future.
SVG tspan Element
The SVG tspan element is used to draw multiple lines of text in SVG. Rather than having to position each line of text absolutely, the tspan element makes it possible to position a line of text relatively to the previous line of text. The tspan element also makes it possible for the user to select and copy-paste several lines of text at a time, instead not just one text element.
Check out the end of the post, the demo of text carousel looks really good.
Text in SVG (text, tspan, tref)
Learn how annoying is the lack of word wrap for SVG. The tutorial covers basics for the text element.
Easily center text vertically, with SVG!
Lea is a well-known expert in her field, and she’s also one of the experts that actively pursue the capabilities of SVG. In this tutorial, Lea takes us through the steps required to align our text vertically using nothing but SVG. The actual demo looks nicer than you’d expect.
Cross-Browser SVG Text-Paths Without JavaScript
It’s a more technical tutorial, but I think that the end result is what’s going to capture your attention. Take a look at how the text can be aligned to match shapes, and corners. I think that the advertising industry is going to want to have a look at the flexibility of some of these examples.
Flowed Text in SVG
I’m pretty sure that the equivalent for CSS is called positioning. Just take a moment to observe how quickly you can add positioned text to your elements using SVG, this feature also is ringing some serious bells for future state of development.
Fitter Happier Text
You can resize the browser to view the page from different angles, but the text seems to remain fluid as promised. Check out how the colors change in the original demo as well, some really cool looking stuff.
How to Use SVG to Create Responsive Texts & Filters
I really enjoyed this particular topic, it looks like the text element is going to provide a lot of flexibility for designers, and developers who’re looking to welcome the new additions with open arms. Did I miss any important tutorials or guides on this particular subject? I’d love to see them, so please leave your suggestions!
Also, while I’m trying to put together a very detailed list of SVG resources, some people have tried to achieve that feat already, and while I respect and have no problem with giving those resources credit, I’m actually trying to bring up the latest posts that cover SVG and all that comes with it. If you have ideas, feedback, or things you’d like to see covered – give me a shout and I’ll look into it.
