Responsive SVG cross-browser
How do I make an responsive svg cross-browser?
What is a responsive svg cross-browser? How do you make a responsive svg cross-browser? This script and codes were developed by Henri Peetsmann on 09 December 2022, Friday.
Responsive SVG cross-browser - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Responsive SVG cross-browser</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- Note: The SVG used in this example has a viewport attribute but no width or height attributes. This is the default Illustrator CC behavior when exporting.
Try resizing the viewport to see the efect.
-->
<div class="horizontal"> <a class="responsive-svg responsive-svg--vertical" href="#" style="background-image: url('http://peetsmann.ee/codepen/responsive_svg/simple-logo.svg');"> <img class="responsive-svg__img" src="http://peetsmann.ee/codepen/responsive_svg/simple-logo.svg" /> </a>
</div>
<div class="vertical"> <a class="responsive-svg" href="#" style="background-image: url('http://peetsmann.ee/codepen/responsive_svg/simple-logo.svg');"> <img class="responsive-svg__img" src="http://peetsmann.ee/codepen/responsive_svg/simple-logo.svg" /> </a>
</div>
</body>
</html>
Responsive SVG cross-browser - Script Codes CSS Codes
/* Quick reset */
* { margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
/* Responsive SVG */
.responsive-svg { display: inline-block; height: auto; width: 100%; max-width: none; max-height: 100%; overflow: hidden; vertical-align: top; background-repeat: no-repeat; background-position: center center; background-size: contain;
}
.responsive-svg--vertical { height: 100%; width: auto; max-width: 100%; max-height: none;
}
.responsive-svg__img { display: inline-block; height: auto; width: 100%; max-width: none; max-height: 100%; vertical-align: top; opacity: 0;
}
.responsive-svg--vertical .responsive-svg__img { height: 100%; width: auto; max-width: 100%; max-height: none;
}
/* Example styles just for demo purpose */
.horizontal,
.vertical { padding: 20px; background: #eee; float: left; margin: 25px 1%;
}
.horizontal { width: 58%; height: 60px;
}
.vertical { width: 38%; height: 300px;
}
.horizontal .responsive-svg,
.vertical .responsive-svg { background-color: lightsalmon; /* To show how much space is taken by the image, and thus will be clickable if using with anchor tag */
}
Developer | Henri Peetsmann |
Username | henripeetsmann |
Uploaded | December 09, 2022 |
Rating | 3 |
Size | 2,078 Kb |
Views | 10,120 |
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 |
Full size Vimeo background cover | 2,491 Kb |
Sponsor logos | 3,285 Kb |
Responsive MacBook retina mockup | 3,228 Kb |
Centre aligned responsive header | 2,493 Kb |
Modified Bootstrap dropdown | 2,534 Kb |
Sprite animation experiment | 1,638 Kb |
Dynamic ring loader | 3,331 Kb |
Search box | 2,434 Kb |
EM Units Experiment | 1,921 Kb |
A Pen by Henri Peetsmann | 3,559 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 |
Slide In Panel | Vikvarg | 2,811 Kb |
IbrahimJabbari-Effect21 | Ibrahimjabbari | 1,882 Kb |
Midterm dry run | Jds317 | 1,649 Kb |
CSS Gem Badge | Orchard | 3,335 Kb |
Portfolio page | Bhavya_j | 2,804 Kb |
No Vacancy 404 CSS Only | Sethkontny | 0 Kb |
Break Out | AzazelN28 | 12,431 Kb |
Test | Dviate | 2,668 Kb |
Tic Tac Toe | Volv | 4,862 Kb |
Caputre Cam with JS | KimmoCommit | 2,795 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!