{"id":171038,"date":"2014-05-27T08:49:07","date_gmt":"2014-05-27T15:49:07","guid":{"rendered":"http:\/\/css-tricks.com\/?p=171038"},"modified":"2014-10-24T18:56:36","modified_gmt":"2014-10-25T01:56:36","slug":"svg-text-typographic-designs","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/svg-text-typographic-designs\/","title":{"rendered":"SVG `text` and Small, Scalable, Accessible Typographic Designs"},"content":{"rendered":"
Let’s say you designed something with custom fonts that was a little bit fancy. Perhaps a certain word is positioned between the ascenders of another word below it. Some text is kerned out below to match the width of that same word. <\/p>\n
This is something we might tell a graphic designer switching from print to web to avoid. It’s too finicky. Too much touchy, unscalable absolute positioning. Too much risk from different font rendering behavior.<\/p>\n
But with inline SVG, we can do it, and do it well.<\/p>\n
<\/p>\n
The big “trick” here is that SVG has a See.<\/a><\/p>\n Using but it even works for SVG-as-<img> (or I haven’t tested a ton of different software, but Adobe Illustrator can “Save As” SVG. When you design with text elements, <text><\/code><\/a> element that is just that: text. Not outlines of text, just regular ol’ selectable, accessible web text.<\/p>\n
<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\r\n width=\"800px\" height=\"300px\" viewBox=\"0 0 800 300\">\r\n\r\n <text x=\"25\" y=\"55\" \r\n font-family=\"'Lucida Grande', sans-serif\" \r\n font-size=\"32\">\r\n\r\n Regular ol' text here. Hi.\r\n\r\n <\/text>\r\n\r\n<\/svg><\/code><\/pre>\n
<text> is happy to use custom fonts<\/h3>\n
@font-face<\/code> and custom fonts on your site? No problem. That SVG is happy to use them. This works with inline SVG, where you can set font-family<\/a> with CSS:<\/p>\n
<text class=\"hook\">Some Cool Text Yeah.<\/text><\/code><\/pre>\n
.hook {\r\n font-family: \"proxima-nova\", sans-serif;\r\n}<\/code><\/pre>\n
background-image<\/code>, presumably) as well, as long as the font-family references the custom font by the right name.<\/p>\n
<text x=\"25\" y=\"55\" \r\n font-family=\"'proxima-nova', sans-serif\" \r\n font-size=\"32\"><\/code><\/pre>\n
Use Design Software<\/h3>\n
<text><\/code> is what you get in the .svg file.<\/p>\n