SVGBasics

Plain Text with SVG

Text

Text in SVG gets the best treatment possible. It is rendered as a graphic so all your graphic transforms apply to it and it still acts like text - that is, it can be selected and copied as text by a user.

Text can be used in different ways depending on the author's goals. Broadly speaking, text can be decorative, such as a logo, or it can be practical with the intent of conveying simple data like names and phone numbers. Sometimes we think of text as serving the function of labelling or identifying.

Simple Applications of Text

The text element is used to write text at a location. The location is given in absolute terms with the x and y attributes or a relative location with dx and dy attributes.

<?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 200 200" version = "1.1">
    <text x = "10" y = "25" fill = "navy" font-size = "15">
        It was the best of times
    </text>
    <text x = "10" y = "25" dx = "5" dy = "15" fill = "navy" font-size = "15">
        It was the worst of times.
    </text>
</svg>

The tspan allows ranges of text to be reformatted, repositioned or otherwise adjusted while inheriting the attributes of the text element that they're contained in.

Text contained in separate tspans, but the same text element, can all be selected at once. Text in separate text elements can't be selected at the same time (when you click and drag, only text from the first text element will be selected).

<?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 200 200" version = "1.1">
    <g fill = "navy" font-size = "15">
        <text x = "10" y = "25">
            <tspan>
                It was the best of times
            </tspan>
            <tspan dx = "-140" dy = "15">
                It was the worst of times.
            </tspan>
        </text>
    </g>
</svg>
©2004 Late Night PC Service | About Us | Site Map | Contact Us