HTML5内联SVG

HTML5内联SVG

什么是SVG?

SVG 指可伸缩矢量图形 (Scalable Vector Graphics)

SVG 用于定义用于网络的基于矢量的图形

SVG 使用 XML 格式定义图形

SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失

SVG 是万维网联盟的标准

借助SVG,我们可以实现很多同Canvas API类型的绘制操作,但在Canvas元素上绘制文本的时候,字符会以像素的方式固定到上面。文本成为了图像的一部分,除非重新绘制Canvas绘制区域,否则无法改变文本内容。正因为如此,Canvas上面的文本无法被搜索引擎获取,而SVG上的文本却是可搜索的。例如,Google会对Web上的SVG内容中的文本进行索引。

SVG优势

与其他图像格式相比(比如 JPEG 和 GIF),使用 SVG 的优势在于:

SVG 图像可通过文本编辑器来创建和修改

SVG 图像可被搜索、索引、脚本化或压缩

SVG 是可伸缩的

SVG 图像可在任何的分辨率下被高质量地打印

SVG 可在图像质量不下降的情况下被放大

在页面中添加SVG

 内联方式:像HTML中的其它元素一样使用,在此基础上可以编写HTML,JavaScript和SVG的交互应用。

<body>
    <svg width="200" height="200">
    </svg>
</body>

外联方式:通过<img>元素,在HTML导入外部SVG文件,缺点是无法编写与SVG元素进行交互的脚本。

   <img src="example.svg" />

简单的形状

SVG包含了基本的形状元素,如矩形、圆形和椭圆。形状元素的尺寸和位置被定义成了属性。矩形的属性有width和height。圆形有一个表示半径的r属性。它们都应用CSS语法表示距离,因此单位包括了px 、point 、em等。

矩形:x="50" y="20"表示矩形的起点为(50,20)

<body>
    <svg width="200" height="200">
        <rect x="50" y="20" width="100" height="80" stroke="red" fill="#ccc"></rect>
    </svg>
</body>

SVG绘制开关对象是按对象文档中出现的顺序进行的。如果我们在画完矩形之后再画圆,那么圆形会显示在矩形之上。

增加一个圆形:

<body>    
<svg width="200" height="200">        
<rect x="50" y="20" width="100" height="80" stroke="red" fill="#ccc">
</rect>        
<circle cx="120" cy="80" r="40" stroke="#00f" fill="none" stroke-width="8"></circle> 
</svg>
</body>

变换SVG元素

SVG中可以将多个元素结合起来,使它们形成一个组,变为一个整体。

<g>元素代表“组”,可以用来结合多个相关的元素。组内成员可以由通过ID来引用。些外,组也可以作为一个整体进行变换。如果你为组添加了变换属性,那么组中所有内容都会进行变换。变换属性包含了旋转、变形、缩放和斜切。

 <svg width="200" height="200">
        <g transform="translate(60,0) rotate(30) scale(0.75)" id="ShapeGroup">
            <rect x="50" y="20" width="100" height="80" stroke="red" fill="#ccc"></rect>
            <circle cx="120" cy="80" r="40" stroke="#00f" fill="none" stroke-width="8"></circle>
         </g>
    </svg>

 复用内容

SVG中的<defs>元素用于定义留待将来使用的内容。可以用<use>元素将<defs>定义的内容链接到需要展示的地方。借助这两个元素,你可以多次复用同一内容,消除冗余。

<svg width="200" height="200">
        <defs>
            <g  id="ShapeGroup">
                <rect x="50" y="20" width="100" height="80" stroke="red" fill="#ccc"></rect>
                <circle cx="120" cy="80" r="40" stroke="#00f" fill="none" stroke-width="8"></circle>
            </g>
        </defs>
        <use xlink:href="#ShapeGroup" transform="translate(60,0)  scale(0.4)"></use>
        <use xlink:href="#ShapeGroup" transform="translate(120,80)  scale(0.75)"></use>
        <use xlink:href="#ShapeGroup" transform="translate(20,60)  scale(0.25)"></use>
    </svg>

图案和渐变

<svg>
<defs>
            <pattern id="GravelPattern" patternContentUnits="userSpaceOnUse"
                x="0" y="0" width="100" height="67" viewBox="0 0 100 67">
                <image x="0" y="0" width="100" height="67" xlink:href="gravel.jpg" />
            </pattern>
            <%--渐变--%>
            <linearGradient id="RedBlackGradient">
                <stop offset="0%" stop-color="#000"></stop>
                <stop offset="100%" stop-color="#f00"></stop>
            </linearGradient>
        </defs>
      <rect x="0" y="20" width="100" height="80" stroke="red"
           fill="url(#RedBlackGradient)" />
        <circle cx="120" cy="80" r="40" stroke="#00f"
            stroke-width="8" fill="url(#GravelPattern)" />
    </svg>

路径

<path> 标签用来定义路径。

<path> 标签

<path> 标签用来定义路径。

下面的命令可用于路径数据:

M = moveto

L = lineto

H = horizontal lineto

V = vertical lineto

C = curveto

S = smooth curveto

Q = quadratic Belzier curve

T = smooth quadratic Belzier curveto

A = elliptical Arc

Z = closepath

注释:以上所有命令均允许小写字母。大写表示绝对定位,小写表示相对定位。

SVG不公包含简单的形状,还包含自由形态的路径。path元素有一个d属性,代表路径数据。在d的值中,M代表移至(Move to),L代表划线至(Line to),Q代表二次曲线,Z代表闭合路径。

 <svg width="200" height="200">
        <path d="M25,50 L10,80 L20,80 L5,110,L15,110,L20,80 Z"  />
    </svg>

文本

SVG中文本有点类型于CSS中对于样式的定义

<svg width="200" height="200">
        <text x="10" y="80" font-family="Droid Sans" stroke="#00f" fill="#00f"
            font-size="40px" font-weight="bold">Hello SVG</text>
    </svg>

SVG 与 Canvas两者间的区别

SVG 是一种使用 XML 描述 2D 图形的语言。

Canvas 通过 JavaScript 来绘制 2D 图形。

SVG 基于 XML,这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。

在 SVG 中,每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化,那么浏览器能够自动重现图形。

Canvas 是逐像素进行渲染的。在 canvas 中,一旦图形被绘制完成,它就不会继续得到浏览器的关注。如果其位置发生变化,那么整个场景也需要重新绘制,包括任何或许已被图形覆盖的对象。


继续学习
||
<svg> <defs> <pattern id="GravelPattern" patternContentUnits="userSpaceOnUse" x="0" y="0" width="100" height="67" viewBox="0 0 100 67"> <image x="0" y="0" width="100" height="67" xlink:href="gravel.jpg" /> </pattern> <%--渐变--%> <linearGradient id="RedBlackGradient"> <stop offset="0%" stop-color="#000"></stop> <stop offset="100%" stop-color="#f00"></stop> </linearGradient> </defs> <rect x="0" y="20" width="100" height="80" stroke="red" fill="url(#RedBlackGradient)" /> <circle cx="120" cy="80" r="40" stroke="#00f" stroke-width="8" fill="url(#GravelPattern)" /> </svg>
提交重置代码