添加文本

除了形状以外，SVG 图像还可以包含文本。SVG 给予设计人员和开发人员对文本的大量控制，可以获得很好的图形效果而不必借助失去真实纹理信息的图像(.gif或.jpg)图像甚至 Flash 电影常常这么做）。

SVG 的文本和字体能力在以添加文本开始的文本部分讨论，而现在重要的是要理解所有在传统 HTML 页面中通过级联样式表（Cascading Style Sheet）可以获得的效果，也都可以在 SVG 图像内的文本元素中得到。例如：

<?xml version="1.0"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"

"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">

<svg width="400" height="125" xmlns="http://www.w3.org/2000/svg">

<desc>Basic text</desc>

<g>

<rect x="0" y="0" width="400" height="125" fill="none"

stroke="blue" stroke-width="3"/>

<text x="10" y="50" font-size="30">Welcome to the world of</text>

<text x="10" y="100" font-size="40"

font-family="Monotype Corsiva"

fill="yellow" stroke="red">Scalable Vector Graphics!</text>

</g>

</svg>