除了形状以外,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>