SVGBasics

<script type="text/javascript"><!-- google_ad_client = "pub-1870854262600725"; google_alternate_color = "ffffff"; google_ad_width = 728; google_ad_height = 90; google_ad_format = "728x90_as"; google_ad_type = "text"; google_ad_channel ="6819119528"; google_color_border = "FFFFFF"; google_color_link = "006699"; google_color_bg = "FFFFFF"; google_color_text = "006699"; google_color_url = "006699"; //--></script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>
Turn SVG On

Specifying a Font for Text with SVG

Specifying fonts and font sizes

Anybody with a typical desktop background has generally been spoiled for some years now with the ability to just pick a font from a list and use it in their word processor. If you've done much writing online, you probably realize that things are not always so easy on the web. Choosing a font in a desktop application relies on the font file being present on the computer you're working on. If you specify a font on a web page or in an SVG file that the user doesn't have available, then you're relying on the browser or browser plugin to find a reasonably good match for that font. Given only the font name, it's going to do a bad job of matching. Use the font attribute with a combination of the font-family and other attributes to provide some information that will get a font more like the one you want. The generic family names you can use are 'serif', 'sans-serif', 'cursive', 'fantasy', and 'monospace' (from the CSS specification). You can also use other family names like "Times", "Baskerville", "Verdena", and "Symbol." I got those names from the CSS specification and some experimenting, but I'm looking for more.

When you specify a list of choices for a font, always list the most generic one last (this will be one of 'serif', 'sans-serif', 'cursive', 'fantasy', or 'monospace'). There's no need to give more than one generic, since everybody has to have one of each (if they don't have at least that, then there's no point in specifying the font anyway).

Currently, the Adobe plugin seems to have trouble with the font attribute, or I don't understand it correctly. There are a couple of w3c tests that don't look right with the Adobe plugin. I don't get the results that I expect when using the font attribute with a truetype font name, such as "Times New Roman" or "Garamond". A family name like "Times" seems to work, so I recommend using the easier to match family name.

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg viewBox = "0 0 500 300" version = "1.1">
    <desc>
        Text example
    </desc>
    <g fill = "navy">
        <text x = "10" y = "25" font-size = "12">
            <tspan x = "10" dy = "20" font-family = "serif">
                Have you gazed on naked grandeur where there's nothing else to gaze on,
            </tspan>
            <tspan x = "10" dy = "20" font-family = "serif">
                Set pieces and drop-curtain scenes galore, [serif]
            </tspan>
            <tspan x = "10" dy = "20" font-family = "sans-serif">
                Big mountains heaved to heaven, which the blinding sunsets blazon,
            </tspan>
            <tspan x = "10" dy = "20" font-family = "sans-serif">
                Black canyons where the rapids rip and roar? [sans-serif]
            </tspan>
            <tspan x = "10" dy = "20" font-family = "cursive">
                Have you swept the visioned valley
            </tspan>
            <tspan x = "10" dy = "20" font-family = "cursive">
                with the green stream streaking through it,
            </tspan>
            <tspan x = "10" dy = "20" font-family = "cursive">
                Searched the Vastness for a something you have lost? [cursive]
            </tspan>
            <tspan x = "10" dy = "20" font-family = "fantasy">
                Have you strung your soul to silence? Then for God's sake go and do it; [fantasy]
            </tspan>
            <tspan x = "10" dy = "20" font-family = "monospace">
                Hear the challenge, learn the lesson, pay the cost. [monospace]
            </tspan>
            <tspan x = "10" dy = "20">
                Hear the challenge, learn the lesson, pay the cost.
            </tspan>
        </text>
    </g>
</svg>

Related Links

In the W3C Standard

Text

<script type="text/javascript"><!-- google_ad_client = "pub-1870854262600725"; google_alternate_color = "ffffff"; google_ad_width = 200; google_ad_height = 90; google_ad_format = "200x90_0ads_al"; google_ad_channel ="7003876230"; google_color_border = "FFFFFF"; google_color_bg = "FFFFFF"; google_color_link = "006699"; google_color_url = "006699"; google_color_text = "006699"; //--></script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>
©2004 Late Night PC Service | About Us | Site Map | Contact Us