Scaling inline SVG with the stretcher-bar technique
How do I make an scaling inline svg with the stretcher-bar technique?
This is an example of scaling an inline <svg> tag by using an <img> tag to force the browser to perform its natural width/height scaling.. What is a scaling inline svg with the stretcher-bar technique? How do you make a scaling inline svg with the stretcher-bar technique? This script and codes were developed by Taylor Hunt on 29 September 2022, Thursday.
Scaling inline SVG with the stretcher-bar technique - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Scaling inline SVG with the stretcher-bar technique</title> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <figure> <div class="wrapper-a"> <img src="data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'/%3E"> <svg viewBox="0 0 400 400"> <image xlink:href="http://placehold.it/400x400" x="0" y="0" width="400" height="400" /> </svg> </div> <figcaption>This wrapper <code><div></code> is 300 by 200 pixels.</figcaption>
</figure>
<figure> <div class="wrapper-b"> <img src="data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'/%3E"> <svg viewBox="0 0 400 400"> <image xlink:href="http://placehold.it/400x400" x="0" y="0" width="400" height="400" /> </svg> </div> <figcaption>This wrapper <code><div></code> is instead 200 by 300 pixels.</figcaption>
</figure>
</body>
</html>
Scaling inline SVG with the stretcher-bar technique - Script Codes CSS Codes
svg { position: absolute; max-width: 100%; max-height: 100%; top: 0; left: 0;
}
img { max-width: 100%; max-height: 100%;
}
div { background: grey; position: relative;
}
.wrapper-a { height: 300px; width: 200px; }
.wrapper-b { height: 200px; width: 300px; }
figure { float: left; }
figcaption { margin-top: 1em; }
Developer | Taylor Hunt |
Username | tigt |
Uploaded | September 29, 2022 |
Rating | 3 |
Size | 1,853 Kb |
Views | 14,168 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
CSS Scroll thumb autosizing v2 | 2,228 Kb |
Weird Animals | 4,232 Kb |
Scaling inline SVG with preserveAspectRatio | 1,692 Kb |
Scaling inline SVG with object-fit | 1,668 Kb |
Web site header, circa 2016 | 2,184 Kb |
WCAG contrast checker in SVG filter | 3,534 Kb |
CSS Scroll thumb autosizing | 2,278 Kb |
SVG break-all text wrapping | 1,928 Kb |
Tabs without JavaScript... or CSS | 1,585 Kb |
More robust SVG text demo | 1,929 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Coburg Banks SVG Logo | Mjtweaver | 3,875 Kb |
Nested flexbox layout for library catalog | Boycetrus | 3,271 Kb |
A Pen by Alex Bergin | Abergin | 3,347 Kb |
Animate elements with fixed gradient | Badabam | 4,406 Kb |
CardMove | Thompsonemerson | 3,699 Kb |
A Pen by Eka Risyana | Risyana | 3,705 Kb |
Velocity.js custom stagger | Tommiehansen | 4,805 Kb |
Resizable SASS Icons | Marianarlt | 7,611 Kb |
Polygon Logo in CSS | Kai | 3,412 Kb |
404 Page | Saransh | 2,666 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!