在 HTML5 中，我们可以通过内联 SVG（Scalable Vector Graphics）的方式来在网页中展示矢量图形。SVG 是一种基于 XML 的矢量图形格式，可以实现高质量的图形展示和交互效果。
使用 <svg> 元素
要在 HTML 中内联 SVG，我们需要使用 <svg> 元素。这个元素可以包含各种图形元素和属性，用来描述我们想要展示的图形。
示例代码：
---- ----------- ------------- ------- ------- ------- ------ ---------- -- ------
在这个示例中，我们使用 <svg> 元素创建了一个宽高为 100px 的 SVG 画布，然后在画布中绘制了一个半径为 40px 的红色圆形。
SVG 图形元素
除了 <circle> 元素，SVG 还提供了很多其他的图形元素，比如 <rect>（矩形）、<line>（直线）、<path>（路径）等等。这些元素可以组合使用，实现复杂的图形效果。
示例代码：
---- ----------- ------------- ----- ------ ------ ----------- ------------ ----------- -- ----- ------- ------- -------- -------- -------------- -- ----- ------ -- ---- -- ---- --- -- ----------- ------------ -- ------
在这个示例中，我们同时使用了 <rect>、<line> 和 <path> 元素，绘制了一个蓝色矩形、一条黑色直线和一个红色路径。
SVG 动画效果
除了静态图形，SVG 还支持动画效果，可以通过 CSS 或 JavaScript 来实现。我们可以给 SVG 元素添加动画属性，比如 animation、transition 等，来实现图形的动态效果。
示例代码：
---- ----------- -------------
------- -------- -------- ------ -------------
-------- ----------------- --------- ------ -------- ------------------------ --
---------
------在这个示例中，我们给一个圆形元素添加了一个 animate 元素，实现了圆形半径由 50px 变为 0px 的动画效果，并且循环播放。
以上就是关于 HTML5 内联 SVG 的介绍，希望能帮助你更好地理解和应用 SVG 技术。