Employing External SVG with viewbox and viewport Attributes
In this method, we put the SVG picture in a separate file and then add it to our webpage using a special tag called <object>. The viewbox helps us to define the size and shape of the picture, and the viewport attributes width and height help us to control the size of the SVG within its containing element. preserveAspectRatio ensures that the SVG maintains its aspect ratio.
Syntax:
<object type="image/svg+xml" data="path/to/svg" width="value"
height="value" style="preserveAspectRatio: value;">
</object>
In this syntax:
type="image/svg+xml"
specifies that the object contains an SVG image.data="path/to/svg"
points to the external SVG file.width="value"
andheight="value"
control the dimensions of the SVG within the object.
Example: Illustration of Employing External 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>
External SVG with viewbox
and viewport Attributes
</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.container {
text-align: center;
}
svg {
display: block;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="container">
<h1>
External SVG with viewbox
and viewport Attributes
</h1>
<!-- External SVG embedded with specified
viewBox and viewport attributes -->
<svg xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 100 100" width="300" height="200"
style="border:1px solid black;">
<circle cx="50" cy="50" r="40" stroke="black"
stroke-width="3" fill="red" />
</svg>
</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