How Do They Work Together?
- The
viewBox
defines the coordinate system and content area. - The
width
andheight
attributes of the SVG element define the viewport size. - When the viewBox and viewport have different aspect ratios, the SVG content is scaled to fit the viewport while maintaining its proportions.
- If the aspect ratios match, the SVG content is displayed without distortion.
Example: Illustration of Inline SVG with viewbox and viewport Attributes
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Inline SVG Example</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f7f7f7;
}
.container {
width: 80%;
margin: 0 auto;
text-align: center;
padding-top: 50px;
}
.svg-container {
width: 100px;
height: 100px;
display: inline-block;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="container">
<h1>Inline SVG Example</h1>
<div class="svg-container">
<svg viewBox="0 0 100 100"
width="100" height="100"
preserveAspectRatio="xMidYMid meet">
<circle cx="50" cy="50" r="40" fill="blue" />
</svg>
</div>
</div>
</body>
</html>
Output:
How does the SVG Viewbox & Viewport work in CSS ?
SVG (Scalable Vector Graphics) is a format used to create graphics on the web that can scale without losing quality. Within SVG, two important concepts are the viewBox
and viewPort
, which play crucial roles in how SVG elements are displayed and scaled.
Table of Content
- What is SVG ViewBox?
- What is SVG ViewPort?
- How Do They Work Together?
- Employing External SVG with viewbox and viewport Attributes:
- Integrating SVG via CSS Background with viewBox and viewport Attributes:
- Difference
Contact Us