SVG图片的优势

1. 高分辨率与缩放

2. 矢量优势

3. 优化加载时间

CSS3与SVG的结合

1. 基本样式

svg {
    width: 100px;
    height: 100px;
    fill: blue;
    stroke: black;
    stroke-width: 2;
}

2. 动画效果

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

svg {
    animation: rotate 2s linear infinite;
}

3. 响应式设计

@media (max-width: 600px) {
    svg {
        width: 50px;
        height: 50px;
    }
}

实例：SVG头像与CSS3结合

以下是一个SVG头像与CSS3结合的示例：

<svg width="100px" height="100px" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
    <circle cx="50" cy="50" r="40" stroke="black" stroke-width="4" fill="white"/>
    <circle cx="50" cy="50" r="35" fill="#FF6347"/>
    <path d="M 50 20 A 15 15 0 0 1 35 35 A 15 15 0 0 1 50 50 A 15 15 0 0 1 65 35 A 15 15 0 0 1 50 20" fill="#FFD700"/>
</svg>

svg {
    width: 100px;
    height: 100px;
    animation: rotate 5s linear infinite;
}

在这个例子中，SVG头像通过CSS3动画实现旋转效果，增加了网页的动态性。

总结