Add Specific width and height for a svg image

Question

I'm trying to add a fix width and height (1920px width and 670px height) for a svg image but i don't succeed. I don't want to have a responsive svg but only displayed the centered content.

<div class="map" style="width:1920px;height:670px;">
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" style="width:100%;height:100%">    
    <g id="conseils" class="dark"><polygon class="st0" points="29.4,12.8 31.8,33.6 59.9,35.5 59.6,5.2 "/></g>
    <g id="brand"><polyline class="st0" points="59.6,5.2 87.1,12.3 83.5,33.6 59.9,35.5 59.6,5.2 "/></g>
    <g id="cm"><polygon class="st0" points="83.5,33.6 87.1,12.3 108,6.2 109.7,35.1 "/></g>
    <g id="data"><polyline class="st0" points="136,36.3 109.7,35.1 111,58.5 137.2,53.9 136,36.4 "/></g>
    <g id="paid"><polygon class="st0" points="108,6.2 109.7,35.1 136,36.3 132.4,11.2 "/></g>
    <g id="crm"><polygon class="st0" points="109.7,35.1 83.5,33.6 83.5,59.9 111,58.5 "/></g>
    <g id="devices"><polygon class="st0" points="83.5,33.6 59.9,35.5 54.8,57.4 83.5,59.9 "/></g>
    <g id="interfaces"><polygon class="st0" points="59.9,35.5 31.8,33.6 27.2,59.2 54.8,57.4 "/></g>
    <g id="three"><polygon class="st0" points="132.4,11.2 164.5,3.4 164.5,32.6 135.9,36.3 "/></g>
    <g id="four"><polygon class="st0" points="164.5,32.6 136,36.3 137.1,53.9 164.5,59.2 "/></g>
    <g id="two"><polygon class="st0" points="31.8,33.6 2.5,35.3 2.5,55.9 27.2,59.2 "/></g>
    <g id="one"><polygon class="st0" points="31.8,33.6 29.5,12.8 2.5,5.7 2.5,35.3 "/></g>
</svg>

Here is a codepen : http://codepen.io/johnnybegood21/pen/wadppo

Thanks for your help :)

EDIT: I would like to have a hover on each polygon and put some html on each with absolute position.

Answer 1

You have to give the SVG a viewBox that matches the dimensions of the content. Your SVG should have the following viewBox:

viewBox="2.5 3.4 162 56.5"

When you do that, the SVG scales as you wanted.

Demo fiddle