SVG Embedded in HTML
There are various ways to use SVG in web pages. This chapter will introduce different embedding methods and their pros and cons.
Method 1: Inline SVG
The most direct way is to write SVG code directly in HTML:
html
<!DOCTYPE html>
<html>
<body>
<svg width="200" height="100">
<rect width="200" height="100" fill="#3b82f6" />
<text x="100" y="55" text-anchor="middle" fill="white" font-size="20">
Hello SVG
</text>
</svg>
</body>
</html>Pros
- Can style with CSS
- Can manipulate elements with JavaScript
- No additional HTTP requests
- Supports all SVG features
Cons
- HTML file size increases
- Cannot be cached by browser
- Code can become cluttered
Method 2: Using <img> Tag
Import SVG as an image file:
html
<img src="image.svg" alt="SVG Image" width="200" height="100">Pros
- Simple syntax, same as regular images
- Can be cached by browser
- Keeps HTML clean
Cons
- Cannot modify SVG internal styles with CSS
- Cannot manipulate SVG elements with JavaScript
- Does not support scripts in SVG animations
Method 3: Using CSS Background Image
Use SVG as CSS background:
css
.icon {
width: 100px;
height: 100px;
background-image: url('icon.svg');
background-size: contain;
background-repeat: no-repeat;
}html
<div class="icon"></div>Pros
- Easy to control size and position with CSS
- Can be cached by browser
- Suitable for decorative graphics
Cons
- Cannot manipulate SVG internal elements
- Not suitable for interactive graphics
Method 4: Using <object> Tag
html
<object type="image/svg+xml" data="image.svg" width="200" height="100">
Your browser does not support SVG
</object>Pros
- Can be cached by browser
- Supports fallback content
- Scripts inside SVG can run
Cons
- Cross-domain access restricted
- Style isolation, external CSS cannot affect internal styles
Method 5: Using <iframe> Tag
html
<iframe src="image.svg" width="200" height="100" frameborder="0">
Your browser does not support iframe
</iframe>Pros
- Completely isolated environment
- Scripts inside SVG can run
Cons
- Styles completely isolated
- Cross-domain operations restricted
- Increases page complexity
Method 6: Using Data URI
Encode SVG as Base64 or embed directly:
html
<!-- Base64 encoded -->
<img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIi..." alt="SVG">
<!-- URL encoded -->
<img src="data:image/svg+xml,%3Csvg%20width%3D%22100%22..." alt="SVG">Pros
- Reduces HTTP requests
- Suitable for small icons
Cons
- Not readable, difficult to maintain
- Base64 increases file size by about 33%
- Cannot be cached separately
Best Practice Selection
| Use Case | Recommended Method |
|---|---|
| Need JS interaction | Inline SVG |
| Need CSS animation | Inline SVG |
| Static decorative image | <img> or CSS background |
| Icon system | Inline SVG + Symbol |
| External SVG needs scripts | <object> |
SVG Symbol Usage
For icon systems, Symbol is recommended:
html
<!-- Define Symbol (usually placed at the top of the page) -->
<svg style="display: none;">
<symbol id="icon-home" viewBox="0 0 24 24">
<path d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/>
</symbol>
<symbol id="icon-user" viewBox="0 0 24 24">
<path d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
</symbol>
</svg>
<!-- Use Symbol -->
<svg width="24" height="24">
<use href="#icon-home"></use>
</svg>
<svg width="24" height="24">
<use href="#icon-user"></use>
</svg>viewBox Attribute
viewBox is one of the most important SVG attributes, defining the SVG coordinate system:
html
<svg width="200" height="100" viewBox="0 0 100 50">
<rect width="100" height="50" fill="#3b82f6"/>
</svg>viewBox="0 0 100 50" means:
0 0: Starting point coordinates (x, y)100 50: Viewport width and height
This allows SVG to scale responsively.
Responsive SVG
Create responsive SVG:
html
<svg viewBox="0 0 100 100" style="width: 100%; max-width: 300px;">
<circle cx="50" cy="50" r="40" fill="#3b82f6"/>
</svg>Key points:
- Set
viewBoxinstead of fixedwidth/height - Use CSS to control actual dimensions
Next Steps
Now you understand how to use SVG in HTML, let's learn how to draw SVG Rectangle!