SVGSVG入门


备注

可缩放矢量图形(SVG)是用于绘制矢量图像的W3C标准

这是一个简单的独立SVG文件:

<svg xmlns="http://www.w3.org/2000/svg">
    <circle cx="50" cy="50" r="25" fill="blue"/>
</svg>

SVG也可以嵌入HTML中,在这种情况下,不需要xmlns属性。

其他图形元素是:

  • <line>
  • <ellipse>
  • <path>
  • <polygon><polyline>
  • <text>包括<tspan><textPath>等子元素

CSS用于样式,虽然并非所有CSS属性都适用于SVG,SVG本身定义了一些特定的属性,如fillstroke ,这些属性在其他地方没有使用。

形状可以用渐变或图案填充,并且可以使用滤镜实现额外的光栅效果。

通过使用上述图形元素作为剪辑路径,可以进行剪切。

关于W3C SVG标准的版本:

版本

发布日期
1.0 2001年9月4日
1.1第一版 2003-01-14
1.2微小 2008-12-22
1.1第二版 2011-08-16

内联SVG

内联SVG允许在HTML中编写的SVG标记在浏览器中生成图形。

使用SVG内联时,不严格要求DOCTYPE。相反, <svg> 打开和关闭标签以及viewBox或width和height属性就足够了:

<svg width="100%" height="100%">
    <!-- SVG elements go here -->
</svg>
 

上面的<svg> 片段既充当容器又充当结构元素。该片段建立了自己的坐标系。

下面是使用某些内容呈现SVG片段的示例。它将生成一个带有“Hello World!”的矩形。其中的文字。

<svg width="50%" viewBox="0 0 10 10">
    <rect x="1" y="1" width="5" height="3" fill="teal" />
    <text x="2" y="2" font-family="Palatino, Georgia, serif" font-size="3%" font-weight="bold" fill="white">Hello World!</text>
</svg>
 

结果:

简单的SVG示例输出

SVG作为背景图像

您可以在HTML文档中显示SVG文件,方法是将其指定为CSS中的背景图像。例如:

.element {
    background-size: 100px 100px;
    background: url(my_svg_file.svg);
    height: 100px;
    width: 100px;
}
 

如果SVG文件中指定的尺寸大于HTML元素的尺寸,则可能需要指定background-size 属性,以缩放SVG以适合其元素。

与使用SVG作为<img> ,值得注意的是这种方法存在一些局限性:

  • 浏览器支持不包括Internet Explorer 8及更早版本,也不包括Android 2.3及更早版本。
  • 您无法使用SVG文件外部的CSS设置SVG文件中包含的各个元素的样式。所有CSS必须在图像文件本身内。

SVG作为一个

您可以使用<img> 标记将SVG文件的内容呈现为HTML文档中的图像。例如:

<img src="my_svg_file.svg" alt="Image description">
 

默认情况下,图像的尺寸将根据src 属性中引用的SVG文件中指定的宽度高度属性进行显示。

值得注意的是这种方法固有的各种限制:

  • 浏览器支持虽然不错,但不包括Internet Explorer 8及更早版本,也不包括Android 2.3及更早版本。
  • 您无法使用SVG文件外部的CSS设置SVG文件中包含的各个元素的样式。所有CSS必须在图像文件本身内。
  • JavaScript将无法运行。
  • 图像必须在单个文件中完成。例如,如果SVG文件包含光栅图像,则必须将这些内部图像编码为数据URL。