Skip to Content
SVG Essentials, 2nd Edition
book

SVG Essentials, 2nd Edition

by J. David Eisenberg, Amelia Bellamy-Royds
October 2014
Beginner
366 pages
8h 29m
English
O'Reilly Media, Inc.
Content preview from SVG Essentials, 2nd Edition

Appendix E. Creating Fonts

The fonts built into the system that renders your SVG documents will take care of the vast majority of your needs. Sometimes, though, you will want to use a custom font. It is possible to create a font for use with SVG from scratch. In brief, you use a <font> element tag to describe the origin and default width of the font’s glyphs. Inside the <font> is the <font-face> element, which has an immense number of attributes that describe the font’s dimensions in excessive detail. Table E-1 summarizes some of the more useful attributes. You can see them all in detail in the SVG specification.

The SVG font specification was intended to allow designers to create accessible logos and graphics. Search engines and screen readers would understand the text as a sequence of characters, but the design could be completely customized and would look the same on every system. At the time of writing, this ideal has not yet been realized, because two major web browsers (Internet Explorer and Firefox) have not implemented SVG fonts. If you create a custom SVG font, there are web services that can convert it to other font formats for use with these browsers.

Table E-1. font-face attributes

font-familyA list of font family names

font-style

Values of normal, italic, or oblique.

font-variant

normal or small-caps.

font-weight

normal, bold, or a number from 100 to 900 in steps of 100.

font-stretch

Indicates the condensed or expanded nature of the face relative to others in its font family. ...

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.

Read now

Unlock full access

More than 5,000 organizations count on O’Reilly

AirBnbBlueOriginElectronic ArtsHomeDepotNasdaqRakutenTata Consultancy Services

QuotationMarkO’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.
Julian F.
Head of Cybersecurity
QuotationMarkI wanted to learn C and C++, but it didn't click for me until I picked up an O'Reilly book. When I went on the O’Reilly platform, I was astonished to find all the books there, plus live events and sandboxes so you could play around with the technology.
Addison B.
Field Engineer
QuotationMarkI’ve been on the O’Reilly platform for more than eight years. I use a couple of learning platforms, but I'm on O'Reilly more than anybody else. When you're there, you start learning. I'm never disappointed.
Amir M.
Data Platform Tech Lead
QuotationMarkI'm always learning. So when I got on to O'Reilly, I was like a kid in a candy store. There are playlists. There are answers. There's on-demand training. It's worth its weight in gold, in terms of what it allows me to do.
Mark W.
Embedded Software Engineer

You might also like

SVG Animations

SVG Animations

Sarah Drasner
SVG Text Layout

SVG Text Layout

Amelia Bellamy-Royds, Kurt Cagle
Modern SVG

Modern SVG

Amelia Bellamy-Royds, Kurt Cagle

Publisher Resources

ISBN: 9781491945308Errata Page