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

Decorating Text with SVG - Italic, Subscript and Superscript

To get italic text in a tspan or text element, set the font-style to "italic" ( and back to "normal" when you're done). The "oblique" value is also available, but as far as I know, this is a synonym for italic.

<?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 = "20">
            <tspan x = "10" y = "20" font-style = "italic">
                Italic font-style.
            </tspan>
            <tspan x = "10" y = "80" font-style = "normal">
                Normal (not italic and not oblique) font-style.
            </tspan>
            <tspan x = "10" y = "140" font-style = "oblique">
                Oblique font-style.
            </tspan>
        </text>
    </g>
</svg>

Superscript and subscript are written by using the 'baseline-shift' attribute. Just set baseline-shift="super" or baseline-shift="sub" respectively.

<?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 = "20">
            <tspan>
                e = mc
                <tspan baseline-shift = "super">
                    2
                </tspan>
            </tspan>
            <tspan x = "10" y = "60">
                T
                <tspan baseline-shift = "sub">
                    i+2
                </tspan>
                =T
                <tspan baseline-shift = "sub">
                    i
                </tspan>
                + T
                <tspan baseline-shift = "sub">
                    i+1
                </tspan>
            </tspan>
        </text>
    </g>
</svg>
<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