svg html

作者：堕魂灭天发布日期:2025-02-18 浏览:137

<!-- SVG in HTML Example -->
<!DOCTYPE html>
<html>
<head>
    <title>SVG in HTML</title>
</head>
<body>
    <!-- Inline SVG Example -->
    <h2>Inline SVG</h2>
    <svg width="100" height="100">
        <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
    </svg>

    <!-- SVG as an Image -->
    <h2>SVG as an Image</h2>
    <img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8Y2lyY2xlIGN4PSI1MCIgY3k9IjUwIiByPSI0MCIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIzIiBmaWxsPSJyZWQiIC8+Cjwvc3ZnPgo=" alt="Red Circle">

    <!-- Explanation -->
    <p>This example demonstrates two ways to include SVG graphics in HTML:</p>
    <ul>
        <li><strong>Inline SVG:</strong> The SVG code is directly embedded within the HTML document. This allows for easy manipulation of the SVG elements using JavaScript and CSS.</li>
        <li><strong>SVG as an Image:</strong> The SVG is included as an image using the <code>&lt;img&gt;</code> tag. The SVG content is encoded in base64 format and embedded directly in the <code>src</code> attribute.</li>
    </ul>
</body>
</html>

上一篇：简单html图片轮播完整代码

下一篇：html外边距