摘要：
svg與canvas一樣都可以將文本和圖像放在畫布中，制作出不一樣的效果。下面是如何使用svg來渲染文本與圖像。
簡介：
SVG的強大能力之一是它可以將文本控制到標准HTML頁面不可能有的程度，而無須求助圖像或其它插件。任何可以在形狀或路徑上執行的操作（如繪制或濾鏡）都可以在文本上執行。盡管SVG的文本渲染如此強大，但是還是有一個不足之處：SVG不能執行自動換行。如果文本比允許空間長，則簡單地將它切斷。多數情況下，創建多行文本需要多個文本元素。
文本：
文本主要使用text元素，在text元素中，空格的處理與HTML類似：換行和回車變成空格，而多個空格壓縮成單個空格。
<svg width="500" height="500" version="1.1" xmlns="http://www.w3.org/2000/svg"> <rect width="300" height="100" style="fill:red;"/> <circle cx="150" cy="100" r="80" style="fill:green;"/> <text x="100" y="125" font-size="60" style="fill:white">SVG</text> </svg>
效果
注意：從圖上也可以看出，svg中的元素是按照從上往下開始執行的，后者會覆蓋前者，可以使用透明來處理。
參數詳解：
- x,y是文本開始坐標。
- text-anchor是文本顯示的方向，其實也就是位置(x,y)處於文本的位置。這個屬性有start,middle和end三種值。start表示文本位置坐標(x,y)位於文本的開始處，文本從這點開始向右挨個顯示。middle表示(x,y)位於文本中間處，文本向左右兩個方向顯示，其實就是居中顯示。end表示(x,y)點位於文本結尾，文本向左挨個顯示。
- fill,stroke：填充和描邊顏色，建議類似與樣式有關的寫在style屬性中，比如fill，font等。
使用tspan來強調重點：
這個元素是text元素的強力補充；它用於渲染一個區間內的文本；它只能出現在text元素或者tspan元素的子元素中。典型的用法就是強調顯示部分文本。例如：
<svg width="500" height="500" version="1.1" xmlns="http://www.w3.org/2000/svg"> <text x="100" y="125" font-size="60" style="fill:green"> <tspan font-weight="bold">測試</tspan> <tspan font-weight="bold" fill="red">svg</tspan> </text> </svg>
效果：
配置參數：
- x,y用於設置包含的文本的絕對坐標值，這個值會覆蓋默認的文本位置。這些屬性可以包含一系列數字，這些數字會應用到每個對應的單個字符。沒有對應設置的字符會緊跟前一個字符。
- dx,dy用於設置包含的文本相對於默認的文本位置的偏移量。這些屬性同樣可以包含一系列數字，每個都會應用到對應的字符。沒有對應設置的字符會緊跟前一個字符。
- rotate用於設置字體的旋轉角度
圖像：
SVG中的image元素可以直接插入圖片，如下：
<svg width="500" height="500" version="1.1" xmlns="http://www.w3.org/2000/svg"> <image xlink:href="qq.png" x="10" y="10" height="50px" width="50px"> </svg>
效果：
注意：
- 如果沒有設置x或y坐標，則默認是0
- 如果顯式的設置width或height為0，則會禁止渲染這幅圖片。
- 如果沒有設置width或height，則默認也是0
- 圖片的格式支持png,jpeg,jpg,svg等等，所以svg是支持嵌套svg的。
附錄：
SVG 元素：
| 元素 | 描述 |
|---|---|
| a | 定義超鏈接 |
| altGlyph | 允許對象性文字進行控制，來呈現特殊的字符數據（例如，音樂符號或亞洲的文字） |
| altGlyphDef | 定義一系列象性符號的替換（例如，音樂符號或者亞洲文字） |
| altGlyphItem | 定義一系列候選的象性符號的替換 |
| animate | 隨時間動態改變屬性 |
| animateColor | 規定隨時間進行的顏色轉換 |
| animateMotion | 使元素沿着動作路徑移動 |
| animateTransform | 對元素進行動態的屬性轉換 |
| circle | 定義圓 |
| clipPath | |
| color-profile | 規定顏色配置描述 |
| cursor | 定義獨立於平台的光標 |
| definition-src | 定義單獨的字體定義源 |
| defs | 被引用元素的容器 |
| desc | 對 SVG 中的元素的純文本描述 - 並不作為圖形的一部分來顯示。用戶代理會將其顯示為工具提示。 |
| ellipse | 定義橢圓 |
| feBlend | SVG 濾鏡。使用不同的混合模式把兩個對象合成在一起。 |
| feColorMatrix | SVG 濾鏡。應用matrix轉換。 |
| feComponentTransfer | SVG 濾鏡。執行數據的 component-wise 重映射。 |
| feComposite | SVG 濾鏡。 |
| feConvolveMatrix | SVG 濾鏡。 |
| feDiffuseLighting | SVG 濾鏡。 |
| feDisplacementMap | SVG 濾鏡。 |
| feDistantLight | SVG 濾鏡。 Defines a light source |
| feFlood | SVG 濾鏡。 |
| feFuncA | SVG 濾鏡。feComponentTransfer 的子元素。 |
| feFuncB | SVG 濾鏡。feComponentTransfer 的子元素。 |
| feFuncG | SVG 濾鏡。feComponentTransfer 的子元素。 |
| feFuncR | SVG 濾鏡。feComponentTransfer 的子元素。 |
| feGaussianBlur | SVG 濾鏡。對圖像執行高斯模糊。 |
| feImage | SVG 濾鏡。 |
| feMerge | SVG 濾鏡。創建累積而上的圖像。 |
| feMergeNode | SVG 濾鏡。feMerge的子元素。 |
| feMorphology | SVG 濾鏡。 對源圖形執行"fattening" 或者 "thinning"。 |
| feOffset | SVG 濾鏡。相對與圖形的當前位置來移動圖像。 |
| fePointLight | SVG 濾鏡。 |
| feSpecularLighting | SVG 濾鏡。 |
| feSpotLight | SVG 濾鏡。 |
| feTile | SVG 濾鏡。 |
| feTurbulence | SVG 濾鏡。 |
| filter | 濾鏡效果的容器。 |
| font | 定義字體。 |
| font-face | 描述某字體的特點。 |
| font-face-format | |
| font-face-name | |
| font-face-src | |
| font-face-uri | |
| foreignObject | |
| g | 用於把相關元素進行組合的容器元素。 |
| glyph | 為給定的象形符號定義圖形。 |
| glyphRef | 定義要使用的可能的象形符號。 |
| hkern | |
| image | |
| line | 定義線條。 |
| linearGradient | 定義線性漸變。 |
| marker | |
| mask | |
| metadata | 規定元數據。 |
| missing-glyph | |
| mpath | |
| path | 定義路徑。 |
| pattern | |
| polygon | 定義由一系列連接的直線組成的封閉形狀。 |
| polyline | 定義一系列連接的直線。 |
| radialGradient | 定義放射形的漸變。 |
| rect | 定義矩形。 |
| script | 腳本容器。（例如ECMAScript） |
| set | 為指定持續時間的屬性設置值 |
| stop | |
| style | 可使樣式表直接嵌入SVG內容內部。 |
| svg | 定義SVG文檔片斷。 |
| switch | |
| symbol | |
| text | |
| textPath | |
| title | 對 SVG 中的元素的純文本描述 - 並不作為圖形的一部分來顯示。用戶代理會將其顯示為工具提示。 |
| tref | |
| tspan | |
| use | |
| view | |
| vkern |