I have an image of the map of Brazil in svg all mapped and when resizing my page it does not follow this resizing, I have read some articles and tried some solutions and in none of them I succeeded
The page with the map and the code is here:
What I tried was to remove the size set for it which is stroke-width="1.0404" and try to work with the css to solve, but I could not
.mapa {
width: 200px;
}
I always use the width in% when I make a responsive layout, I tested it here, it worked + or -, I do not know if it helps:
svg {
height: auto;
width: 100% //do elemento pai}
Embedded SVG using <img> :
<img src="my_SVG_file.svg" alt="Image description." />
css:
img {
max-width: 100%;
}
fiddle: link
SVG as a background <div> :
<div class="mysvg"></div>
css:
.mysvg {
max-width: 100%;
height: 500px;
background-image: url(your_SVG.svg);
background-position: 0 0;
background-repeat: no-repeat;
background-size: 100%;
}
fiddle: link
directly in the html:
More complicated, and would give a good article right here, so why not read one already ready? link