How to make SVG rubber structure? For example, on such a structure

* { margin: 0; } svg { display: table; margin: auto; } 
 <svg style="width:1200px; height:300px;"> <polygon points="10 10,10 140,600 290,1190 140,1190 10 " style="fill: blue; fill-opacity:0.5; stroke:blue;" /> </svg>

Approximately what would this figure stretch ..

Cut from photoshop or save as an image is not an option

    2 answers 2

    To do this, it is enough to indicate the coordinates and size of the canvas due to the viewBox attribute - and you can make svg rubber, due to the familiar width: 100% .

     * { margin: 0; } .svg-responsive { width: 100%; } 
     <svg class="svg-responsive" viewBox="0 0 1200 300"> <polygon points="10 10, 10 140, 600 290, 1190 140, 1190 10" style="fill: blue; fill-opacity: 0.5; stroke: blue;"/> </svg>

    • shine, I have not seen this before! ATP - user33274

    For example, specify:

     svg { max-width: 100%; width: 100%; } 

     * { margin: 0; } svg { display: table; margin: auto; max-width: 100%; width: 100%; } 
     <svg style="height:300px;"> <polygon points="10 10,10 140,600 290,1190 140,1190 10 " style="fill: blue; fill-opacity:0.5; stroke:blue;" /> </svg>

    • Lenochka, I did this a million times, and the coordinates of the points are static - I did svg myself 100%, but the screen scrolls during scrolling, but just because of the points, I also tried to write points in% - svg just doesn't work - user33274
    • Those. do I need to scale proportionally because of the height, because when I narrow my horizontal scroll there is no (at least for this example) ?! And exactly points in the points = 10%,10% ... style is not possible. - HamSter
    • By the way, see Lenochka when you open the snippet - svg does not already fit into it, see an example that I noted with a decision - for me this discovery is user33274