How to leave a responsive . svg image inserted directly into html

Asked

Viewed 1,906 times

7

I have an image of the map of Brazil in svg all mapped and when resizing my page the same does not follow this resizing, I have read some articles and tried some solutions and in none of them I was successful

The page with the map and the code is here:

Representatives

What I tried was this, remove the set size for the same stroke-width="1.0404" and try to work with css to solve, but I couldn’t 

.mapa {
    width: 200px;
}
css svg

2 answers

6

SVG soaked using <img>:

<img src="my_SVG_file.svg" alt="Image description." />

css:

img {
 max-width: 100%;
}

fiddle: http://jsfiddle.net/jnLc174j/

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: http://jsfiddle.net/c4k6rru5/

directly in html:

more complicated, and would make a good article right here, so why not read one already ready? http://tympanus.net/codrops/2014/08/19/making-svgs-responsive-with-css/

  • Hello @user3632930, really hadn’t commented that the . svg is inserted directly into html, it was a mistake on my part, but I appreciate the tip that worked too.

3


I always use the width in % when I do responsive layout, I did the test here, it worked + or -, I don’t know if it helps:

    svg {
    height: auto;
    width: 100% //do elemento pai}

  • but he didn’t say how he’s doing it, he didn’t specify if svg is direct in html, with a class, or if it’s the background of a div

  • Hello @Nilson, the help was fantastic, simple and functional.

Browser other questions tagged css svg

You are not signed in. Login or sign up in order to post.