HTML5内联SVG

最新推荐文章于 2025-05-20 11:21:07 发布

原创最新推荐文章于 2025-05-20 11:21:07 发布 · 2.6k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #矢量图 #SVG

HTML(5) 专栏收录该内容

26 篇文章

订阅专栏

本文介绍了SVG（Scalable Vector Graphics）在HTML5中的应用，SVG是一种使用XML格式定义的矢量图形，其优势在于放大或改变尺寸时仍能保持高质量。文中详细讲述了SVG与Canvas的区别，如何在页面中以内联和外联方式添加SVG，以及SVG的图形绘制、元素变换、内容复用和文本处理等核心概念。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.SVG是可伸缩矢量图形（Scalable Vector Graphics）,用于定语网络的矢量图形，使用XML格式定义图形，图像在放大或改变尺寸的情况下其图形质量不会有损失。
优势：
与其他图像格式相比（jpeg和gif）

1.图像通过文本编辑器来创建和修改
2.图像可以被搜索，索引，脚本化或压缩
3.可伸缩的
4.图像在任何分辨率下呗高质量的打印
5.图像质量不下降的情况下被放大

2.SVG与Canvas两者间的区别

SVG使用XML描述二维的图像的语言
Canvas通过javascript来绘制二维图形
SVG基于XML，这意味着SVG DOM中每个元素都是可用的，可以为某个元素附加javascript事件处理器
在SVG中，每个被绘制的图形都被视为对象。如果对象的属性发生变化，那么浏览器能够自动重现图形。
Canvas是逐个像素渲染的，一旦被绘制完成，不会继续得到浏览器的关注。如果位置发生变化，整个场景也需要重新绘制。

这里写图片描述
3.在页面中添加SVG
内联方式：

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

外联方式：通过<img>元素，在html中导入外部svg文件，缺点是无法编写与svg元素进行交互的脚本。

<img src="example.svg" />

4.svg绘制图形
矩形：x,y为起点的位置，然后定义宽和高
这里写图片描述

<body>
 <svg width="200" height="200">
 <rect x="50" y="20" width="100" height="50" stroke="blue" fill="green"></rect>
 </svg>
</body>

svg绘制对象是按对象在文档中出现的顺序进行的。如果画完矩形之后画圆形，那么圆形会显示在矩形之上。
这里写图片描述

 <svg width="200" height="200">
 <rect x="50" y="20" width="100" height="50" stroke="blue" fill="green"></rect>
 <circle cx="120" cy="80" r="40" stroke="black" fill="none" stroke-width="8"></circle>>
 </svg>

这里写图片描述

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
  <polygon points="100,10 40,180 190,60 10,60 160,180"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;">
</svg>

6.变换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="50" stroke="blue" fill="green"></rect>
 <circle cx="120" cy="80" r="40" stroke="black" fill="none" stroke-width="8"></circle>
 </g>
 </svg>

7.复用内容
svg中的<defs>元素用于定义留待将来使用的内容。可以用<use>元素将<defs>定义的内容链接到需要展示的地方。借助这两个元素，可以多次复用同一内容，消除冗余。
这里写图片描述

<svg width="400" height="400">
  <defs>
    <g  id="ShapeGroup">
      <rect x="50" y="20" width="100" height="50" stroke="blue" fill="green"></rect>
      <circle cx="120" cy="80" r="40" stroke="black" 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>

8.文本

 <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>