Responsive SVG

by ian_smithz

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 441.344 441.344" style="enable-background:new 0 0 441.344 441.344;" xml:space="preserve">
            <path class="mainobject" d="M314.016,17.679c-36.879,0-70.09,16.419-93.344,42.648c-23.252-26.229-56.465-42.648-93.344-42.648
		C57.008,17.679,0,77.354,0,150.969c0,19.779,3.338,38.813,9.184,56.989c0,0,5.301,16.4,9.997,25.428
		c53.671,115.428,201.491,190.279,201.491,190.279s147.82-74.852,201.491-190.279c0,0,6.925-15.38,9.997-25.428
		c5.582-18.26,9.184-37.21,9.184-56.989C441.344,77.354,384.336,17.679,314.016,17.679z" />
        </svg>
    </div>
</div>

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;}