HTML5 内联 SVG
SVG 是可缩放矢量图形，可以通过 XML 语言来描述。SVG 文档可以使用 <svg> 元素定义一个 SVG 画布。SVG 文件可以在浏览器中展示，是一种常用的图形绘制方式。HTML5 中，内联 SVG 可以在 HTML 元素中嵌入 SVG 图形，以此替代传统的位图图像，实现更好的可扩展性和清晰度。
内联 SVG 的基本用法
在 HTML5 中，内联 SVG 可以通过 <svg> 标签在 HTML 网页中嵌入 SVG 图形。
<!DOCTYPE html>
<html>
<head>
<title>内联 SVG</title>
</head>
<body>
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="black"
stroke-width="2" fill="white" />
</svg>
</body>
</html>
以上代码实现一个简单的 SVG 圆形。在 SVG 中，cx 和 cy 为圆心坐标，r 为半径，stroke 为边框颜色，fill 为填充颜色，以上属性都可以按需设置。
内联 SVG 与 HTML5
内联 SVG 可以在 HTML5 中实现许多优秀的特性，例如响应式设计、动画效果、交互性等。
响应式设计
在 HTML5 中，内联 SVG 可以通过 CSS 和 JavaScript 实现响应式设计。下面的例子展示了如何通过 JavaScript 监听窗口大小，使得 SVG 图形具有响应式的设计效果。
<!DOCTYPE html>
<html>
<head>
<title>响应式设计</title>
<style>
svg {
width: 100%;
height: auto;
}
</style>
<script>
window.onresize = function() {
var svg = document.getElementsByTagName('svg')[0];
svg.setAttribute('viewBox', '0 0 ' + window.innerWidth + ' ' + window.innerHeight);
}
</script>
</head>
<body>
<svg viewBox="0 0 800 600">
<rect x="50" y="50" width="700" height="500"
stroke="black" stroke-width="5" fill="#FFCC00" />
</svg>
</body>
</html>
以上代码展示了一个简单的 SVG 矩形，而 viewBox 属性可以使得 SVG 可被缩放，可以在 viewBox 中设置内容可以在网页上占用的视口大小。JavaScript 的函数则实现在浏览器窗口调整大小的变化下将 viewBox 与窗口大小相适应，实现响应式设计。
动画效果
内联 SVG 可以使用 CSS 和 JavaScript 实现许多优秀的动画效果。下面来看一个简单的 SVG 动画。
<!DOCTYPE html>
<html>
<head>
<title>SVG 动画</title>
<style>
@keyframes move {
0% {
transform: translate(0, 0);
}
50% {
transform: translate(200px, 0);
}
100% {
transform: translate(0, 0);
}
}
svg {
height: 300px;
width: 300px;
}
.circle {
animation: move 2s ease infinite;
}
</style>
</head>
<body>
<svg>
<circle class="circle" cx="50" cy="50" r="40" fill="green" />
</svg>
</body>
</html>
上述代码展示了一个 SVG 圆形动画，通过为 SVG 元素的 .circle 类设置 CSS 属性，实现了一个简单的动画效果。
交互性
内联 SVG 带来的最大的好处之一是其对于交互性处理的优秀性能。可以通过在 SVG 中添加 JavaScript 代码，使得 SVG 元素可与浏览器进行交互。
以下例子给出一个 SVG 元素的变化效果，展现了通过 JavaScript 替换 SVG 元素内容来实现交互性。
<!DOCTYPE html>
<html>
<head>
<title>SVG 交互</title>
</head>
<body>
<svg width="100" height="100">
<circle id="circle" cx="50" cy="50" r="40" stroke="black"
stroke-width="2" fill="white" />
</svg>
<p><button onclick=changeCircle()">变化</button></p>
<script>
function changeCircle() {
var circle = document.getElementById('circle');
if (circle.getAttribute('fill') === 'blue') {
circle.setAttribute('fill', 'white');
} else {
circle.setAttribute('fill', 'blue');
}
}
</script>
</body>
</html>
上述代码通过包含 <svg> 元素与 JavaScript 互动，实现了一个简单的填充颜色变化功能。
总结
HTML5 内联 SVG 提供了一种更灵活、可扩展和高精度的图形绘制方式，可以通过 CSS 、 JavaScript 和 HTML5 的其他功能实现许多优秀的特性，包括响应式设计、动画效果、交互性等。在实际应用中，内联 SVG 的强大和优势就会变得更加明显。