Responsive SVG

HTML

<!-- Icon made by Freepik from www.flaticon.com -->
<div class="sm">
    <div id="rwd" class="my-svg-container-tag">
        <svg class="my-svg" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" preserveAspectRatio="xMinYMin meet" viewBox="0 0 600 600" style="enable-background:new 0 0 600 600;" xml:space="preserve">
           <g transform="translate(40,20)"><g class="x axis" transform="translate(0,450)"><g class="tick" style="opacity: 1;" transform="translate(0,0)"><line y2="6" x2="0"></line><text dy=".71em" style="text-anchor: middle;" y="9" x="0">0</text></g><g class="tick" style="opacity: 1;" transform="translate(36.666666666666664,0)"><line y2="6" x2="0"></line><text dy=".71em" style="text-anchor: middle;" y="9" x="0">10</text></g><g class="tick" style="opacity: 1;" transform="translate(73.33333333333333,0)"><line y2="6" x2="0"></line><text dy=".71em" style="text-anchor: middle;" y="9" x="0">20</text></g><g class="tick" style="opacity: 1;" transform="translate(110,0)"><line y2="6" x2="0"></line><text dy=".71em" style="text-anchor: middle;" y="9" x="0">30</text></g><g class="tick" style="opacity: 1;" transform="translate(146.66666666666666,0)"><line y2="6" x2="0"></line><text dy=".71em" style="text-anchor: middle;" y="9" x="0">40</text></g><g class="tick" style="opacity: 1;" transform="translate(183.33333333333334,0)"><line y2="6" x2="0"></line><text dy=".71em" style="text-anchor: middle;" y="9" x="0">50</text></g><g class="tick" style="opacity: 1;" transform="translate(220,0)"><line y2="6" x2="0"></line><text dy=".71em" style="text-anchor: middle;" y="9" x="0">60</text></g><g class="tick" style="opacity: 1;" transform="translate(256.6666666666667,0)"><line y2="6" x2="0"></line><text dy=".71em" style="text-anchor: middle;" y="9" x="0">70</text></g><g class="tick" style="opacity: 1;" transform="translate(293.3333333333333,0)"><line y2="6" x2="0"></line><text dy=".71em" style="text-anchor:...

CSS

/* http://soqr.fr/testsvg/embed-svg-liquid-layout-responsive-web-design.php */
 .my-svg-container {
    display: inline-block;
    position: relative;
    width: 50%;
    padding-bottom: 60%;
    /* depends on svg ratio, for my zebra height/width = 1.2 so padding-bottom = 50% * 1.2 = 60% */
    vertical-align: middle;
    /* top | middle | bottom ... do what you want */
}
.my-svg {
    /* svg into : object, img or inline */
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width:100%;
    /* only required for <img /> */
}
.mainobject {
    fill: #F2A136;
}
.mainobject:hover {
    fill: #c42a6e;
    cursor:pointer;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    /* ...and now for the proper property */
    transition:.5s;
}

.sm { width:30%; margin: 0 auto; position:relative;}