Bienvenid@s, hoy veremos un modo bastante simple de como hacer que nuestras imágenes sean responsive, para ello utilizaremos un div donde alojaremos la imagen SVG, en el caso intervendrán dos clases .svg-container para el div y .svg-content para la imagen SVG, para dimensionar la imagen modifiquen las propiedades width y padding-bottom de la clase .svg-container en este caso se está dimensionando al 50%. En el atributo viewBox="0 0 210 500" 210 es el ancho y 500 la altura de la imagen SVG original.
<!DOCTYPE HTML>
<html>
<head>
<title>SVG Responsive</title>
<style>
.svg-container
{
display: inline-block;
position: relative;
width: 50%;
padding-bottom: 50%;
vertical-align: middle;
overflow: hidden;
}
.svg-content
{
display: inline-block;
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div class="svg-container">
<svg version="1.1" viewBox="0 0 210 500" preserveAspectRatio="xMinYMin meet" class="svg-content">
<polygon points="100,10 40,180 190,60 10,60 160,180" style="fill:#FFFFFF;stroke:#000000;stroke-width:5;fill-rule:#FFFFFF;" />
</svg>
</div>
</body>
</html>
No hay comentarios:
Publicar un comentario