SVG模板

<?xml version="1.0"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
                     "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"
        width="300" height="300">
    <title>SVG_TITLE</title>
    <desc>Description</desc>
    
</svg>

SVG Reference

<linearGradient id="MyGradient">...</linearGradient>
<rect style="fill:url(#MyGradient)"/>

如果可能，应将引用元素放在defs中。下面的这些元素应总是放在其中：

altGlyphDef
clipPath
cursor
filter
linearGradient
marker
mask
pattern
raidalGradient
symbol

defs的内容模型(content model)与g的是一样的。

<defs>
    <rect id="MyRect" width="60" height="10"/>
</defs>

<use x="20" y="10" xlink:href="#MyRect" />

svg, symbol, g, 其它use，以及graphis element都可以通过use元素来重复使用。

use元素的x, y, width, height属性可用来将被引用的元素映射到当前坐标系统中。

symbol类似于g，但有以下不同:

symbol不会参与渲染。只有被use引用的实例才参与渲染。
symbol有属性viewBox, preserveAspectRation, 可用以缩放以匹配use元素所定义的viewport.

与symbol类似的元素有marker, pattern。

Viewbox属性

有时希望将特定图像缩放以匹配其容器。viewBox属性提供了这个功能。

产生新viewport的元素，即svg, symbol, image, foreignObject，以及marker, pattern, view元素，都有viewBox属性。

参见"7.7 The viewBox attribute".

SVG元素的属性(attributes)

各个元素除了有自己独特的属性之外，还有多种通用属性：

conditional processing attributes
core attributes
graphical event attributes
presentation attributes
class
style
externalResourcesRequired
transform

Presentation Attributes

最常见的有：fill, font-size, stroke, stroke-dasharray, stroke-width等等。

Graphics Element

图像元素。即能导致在画板上绘制图像的元素。

circle
ellipse
image
line
path
polygon
polyline
rect
text
use

其中, image及use也是graphics referencing element, 即图像引用元素。

Styling

有以下几种方式：

外部CSS
内部CSS
presentation attributes
style属性

其中，style属性的级别最高。

SVG加载JavaScript的问题

SVG可以加载JavaScript，但若有JavaScript动态生成的内容，如果该SVG被其他SVG文件引用，则这些动态生成的内容不起作用。

解决的方法是，不要引用有JavaScript动态生成的内容的SVG，相反，在最终的SVG中文件中，直接加载JavaScript.

另一种方案是不要使用image, 或svg，而是使用object. 这种方式支持加载动态的SVG元素。

    <object type="image/svg+xml" data="drawing.svg">
      <img src="alternate_image.jpg" alt="alternate description">
    </object>

SVG Notes