How can I get the svg image below to scale right bak to 40px by 40px.
I've tried altering the viewBox and the height and width but I cannot quite seem to get it right
<html>
<body>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" width="1000px" height="1000px" viewBox="0 0 1000 1000" enable-background="new 0 0 1000 1000"><g class="cow__container"><path fill-rule="evenodd" clip-rule="evenodd" d="M884,329.64c-1.122,5.369-2.196,10.749-3.374,16.105 c-5.812,26.44-14.017,52.028-27.338,75.751c-8.967,15.969-19.913,30.313-34.847,41.242c-17.124,12.532-36.314,17.801-57.453,16.278 c-15.802-1.139-30.767-5.478-45.043-12.084c-5.87-2.717-11.806-3.102-17.942-2.617c-3.539,0.28-7.031,1.141-10.631,1.754 c0.009,0.118-0.085-0.121-0.007-0.265c10.652-19.542,8.98-38.777-1.587-57.698c-1.23-2.204-1.374-3.731-0.087-5.998 c4.313-7.596,6.408-15.77,5.273-24.585c-0.039-0.302-0.005-0.613-0.005-0.933c12.388-4.38,22.498-12.23,30.922-21.735 c21.579-24.352,48.968-38.988,79.189-49.157c13.771-4.634,27.94-7.222,42.558-6.92c9.435,0.195,18.555,1.809,27.24,5.592 c6.401,2.788,10.529,7.59,12.593,14.226c0.106,0.344,0.355,0.644,0.538,0.965C884,322.92,884,326.28,884,329.64z M813.712,411.235 c13.214-11.448,24.157-24.656,31.979-40.3c4.986-9.976,8.731-20.378,9.758-31.577c0.747-8.158-3.785-15.235-11.115-17.18 c-3.213-0.852-6.578-1.426-9.895-1.544c-12.256-0.437-23.887,2.734-35.259,6.86c-25.36,9.203-48.545,22.578-70.963,37.389 c-0.212,0.14-0.518,0.137-0.779,0.201c0.172,0.167,0.344,0.334,0.516,0.501c6.907-3.452,13.771-6.995,20.731-10.338 c17.256-8.287,34.713-16.104,53.276-21.07c8.582-2.296,17.264-4.059,26.248-2.629c7.499,1.193,12.295,5.485,13.14,13.042 c0.468,4.186,0.021,8.641-0.887,12.783c-2.658,12.12-8.274,23.077-14.427,33.733C822.103,397.917,817.831,404.532,813.712,411.235z M116.48,320.52c0.283-0.723,0.615-1.431,0.841-2.172c1.925-6.315,5.841-10.919,11.843-13.68 c10.928-5.028,22.511-6.349,34.371-5.811c22.41,1.016,43.156,8.08,63.146,17.713c13.792,6.646,26.886,14.458,38.425,24.604 c3.887,3.418,7.336,7.338,10.943,11.07c7.019,7.262,14.383,14.125,23.115,19.307c3.339,1.982,6.924,3.551,10.595,5.408 c-1.522,9.651,1.301,18.615,6.165,27.146c0.339,0.594,0.078,1.818-0.324,2.504c-4.226,7.232-7.299,14.867-8.674,23.173 c-2.099,12.683-0.024,24.606,6.26,35.809c0.116,0.207,0.203,0.43,0.246,0.521c-3.407-0.581-6.848-1.36-10.333-1.719 c-6.48-0.667-12.69-0.128-18.843,2.743c-13.077,6.103-26.845,10.176-41.255,11.635c-27.48,2.782-51.181-5.511-71.055-24.695 c-16.231-15.667-27.08-34.831-35.658-55.405c-9.213-22.099-15.302-45.104-19.335-68.676c-0.077-0.452-0.312-0.878-0.474-1.316 C116.48,325.96,116.48,323.24,116.48,320.52z M272.693,365.663c0.082-0.15,0.163-0.301,0.245-0.452 c-2.861-1.863-5.702-3.759-8.589-5.583c-20.825-13.152-42.271-25.105-65.679-33.097c-11.907-4.065-24.03-7.013-36.839-5.579 c-11.376,1.273-17.435,7.567-16.425,18.974c0.575,6.498,2.402,13.023,4.573,19.218c7.084,20.224,19.782,36.685,35.429,51.033 c0.284,0.261,0.689,0.39,1.654,0.917c-0.957-1.467-1.555-2.3-2.068-3.183c-5.619-9.649-11.527-19.146-16.747-29.006 c-4.939-9.332-8.863-19.184-9.322-29.932c-0.343-8.028,2.437-14.054,10.39-16.621c2.32-0.749,4.836-1.119,7.281-1.219 c10.545-0.43,20.566,2.308,30.458,5.508c21.311,6.895,41.392,16.63,61.287,26.777C269.795,364.16,271.243,364.915,272.693,365.663z M663.008,669.929c-0.57-6.571-0.819-13.115-1.764-19.557c-1.846-12.592-6.015-24.323-14.439-34.166 c-8.361-9.77-19.219-14.847-31.82-16.344c-11.665-1.386-23.322-0.167-34.94,0.729c-11.3,0.872-22.556,2.314-33.824,3.57 c-8.967,1-17.9,2.408-26.892,3.038c-5.608,0.394-11.294-0.401-16.948-0.509c-2.742-0.052-5.514,0.076-8.234,0.424 c-8.098,1.036-16.116,0.118-24.14-0.764c-18.413-2.021-36.807-4.222-55.24-6.034c-7.539-0.741-15.158-0.889-22.743-0.921 c-23.11-0.101-40.845,12.222-49.031,33.803c-3.836,10.115-5.649,20.597-5.755,31.392c-0.017,1.744-0.002,3.489-0.002,5.548 c-4.864-1.54-8.998-3.864-12.838-6.717c-9.7-7.205-14.901-17.091-16.823-28.821c-2.638-16.104,0.222-31.7,5.145-46.927 c2.886-8.929,6.822-17.515,10.166-26.3c0.529-1.39,0.774-3.069,0.563-4.53c-4.173-28.935-0.409-56.709,12.433-83.037 c13.871-28.438,34.403-50.76,62.111-66.282c12.372-6.932,25.758-10.52,39.782-12.147c20.579-2.388,40.963-1.236,61.273,2.623 c2.06,0.391,4.374-0.458,6.554-0.828c16.933-2.874,33.938-3.865,51.081-2.336c14.256,1.271,28.075,4.083,40.99,10.548 c18.312,9.166,33.66,22.004,46.606,37.747c15.749,19.153,26.357,40.818,31.112,65.23c3.099,15.908,3.408,31.886,0.85,47.902 c-0.32,2.008-0.121,3.79,0.807,5.725c7.428,15.472,12.966,31.583,15.206,48.656c1.541,11.742,1.423,23.426-3.074,34.694 c-4.804,12.035-13.703,19.76-25.494,24.496C663.406,669.946,663.072,669.921,663.008,669.929z M605.628,421.397 c0.963,4.05,2.046,7.475,2.561,10.983c1.789,12.183-2.256,21.521-15.65,24.141c-4.38,0.856-8.461,2.359-11.879,5.298 c-8.065,6.935-10.746,16.04-9.978,26.251c0.537,7.135,3.031,13.625,8.943,18.149c7.012,5.365,14.798,4.856,22.577,2.128 c19.232-6.746,29.46-26.586,24.763-47.405c-2.858-12.667-9.106-23.591-16.774-33.836 C608.833,425.295,607.366,423.566,605.628,421.397z M394.049,421.417c-6.855,8.215-12.873,16.908-17.128,26.736 c-3.265,7.541-5.247,15.325-5.182,23.644c0.136,17.333,10.931,32.072,27.48,37.161c10.059,3.093,18.936,0.843,24.504-6.399 c3.563-4.635,5.015-10.017,5.354-15.833c0.734-12.635-5.88-27.413-22.268-30.356c-11.702-2.102-17.405-10.878-15.455-22.681 C392.024,429.63,393.109,425.64,394.049,421.417z M385.188,614.35c-30.602,9.913-44.266,43.738-29.744,70.788 c13.506,25.16,32.758,44.557,58.68,56.919c16.505,7.872,33.85,10.102,51.838,6.574c11.664-2.287,22.316-7.104,32.274-13.49 c1.28-0.82,2.135-0.883,3.381-0.029c1.975,1.351,4.068,2.535,6.165,3.692c20.894,11.528,42.822,14.716,65.889,7.9 c14.798-4.372,27.73-12.192,39.306-22.259c13.833-12.029,25.468-25.849,33.104-42.676c8.517-18.77,3.709-41.744-11.356-55.673 c-12.316-11.388-27.147-15.468-43.479-14.71c-12.123,0.562-24.212,1.836-36.332,2.469c-15.026,0.785-30.035,0.18-45.006-1.363 c-3.883-0.4-7.802-1.142-11.661-0.929c-9.802,0.541-19.571,2.066-29.368,2.215c-13.484,0.203-26.987-0.346-40.471-0.874 c-7.413-0.29-14.802-1.199-19.317-1.584C399.026,611.195,392.012,612.139,385.188,614.35z M614.046,304.22 c-4.441-7.552-10.675-12.843-19.206-15.215c-5.954-1.655-12.028-1.494-18.089-0.922c-6.198,0.584-12.37,1.462-18.569,2.041 c-8.708,0.813-16.924-1.104-24.966-4.422c-5.063-2.089-10.335-3.744-15.624-5.186c-2.317-0.632-4.934-0.479-7.377-0.265 c-3.544,0.31-5.785,2.279-6.321,6.167c-0.924,6.702-1.378,13.469-2.005,20.211c-0.079,0.852-0.011,1.717-0.011,3.075 c-2.08-3.633-3.823-6.902-5.774-10.042c-4.486-7.22-10.406-12.706-18.816-15.042c-6.247-1.735-12.613-1.932-19.017-1.34 c-10.881,1.004-21.744,2.226-32.638,3.057c-6.35,0.484-12.85-0.287-19.098,0.692c-12.795,2.004-22.984,8.451-29.298,20.121 c-4.257,7.869-1.296,17.128,6.733,21.185c2.62,1.324,5.428,2.295,8.193,3.309c9.971,3.655,15.402,10.976,17.087,21.237 c0.75,4.566,3.28,7.726,7.163,9.913c6.563,3.695,13.806,4.717,21.17,5.343c2.07,0.176,4.465,0.445,6.056,1.585 c4.102,2.939,3.749,9.51-0.764,11.916c-2.781,1.482-6.159,2.074-9.346,2.527c-23.123,3.288-43.874,12.207-62.387,26.303 c-17.72,13.492-31.283,30.301-39.339,51.223c-1.911,4.962-3.122,10.194-4.659,15.3c-0.151,0.5-0.333,0.992-0.671,1.987 c-14.79-25.739-11.593-50.302,2.654-74.574c-7.669-6.593-10.705-15.2-10.515-25.115c0.199-10.346,5.33-17.771,13.816-23.23 c0.802-0.516,1.736-1.586,1.767-2.43c0.872-24.068,13.771-39.763,34.372-50.502c8.469-4.415,16.503-9.679,24.643-14.708 c8.296-5.126,16.499-10.51,26.149-12.688c6.912-1.56,13.954-2.592,20.975-3.604c9.8-1.413,18.569-4.963,26.196-11.385 c4.704-3.961,9.538-7.889,15.574-9.669c8.622-2.543,16.993-1.01,24.948,2.575c6.902,3.111,13.532,6.823,20.328,10.176 c10.314,5.09,21.436,7.675,32.565,10.14c10.117,2.241,20.345,3.996,30.433,6.356C603.153,283.308,610.116,292.33,614.046,304.22z M341.396,397.209c6.927,1.933,15.42-3.808,18.002-10.533c3.484-9.078-0.717-19.207-9.632-22.887 c-8.248-3.404-18.796,0.382-21.805,7.826c9.91-5.26,18.346-3.502,22.554,4.615C353.767,382.505,352.773,392.788,341.396,397.209z M333.249,382.019c2.373,0.034,4.197-1.644,4.25-3.911c0.056-2.4-1.807-4.32-4.182-4.311c-2.231,0.009-4.102,1.875-4.136,4.127 C329.145,380.24,330.878,381.985,333.249,382.019z M605.976,285.565c6.292,2.87,12.091,5.283,17.679,8.112 c12.737,6.448,24.342,14.432,33.104,25.961c7.495,9.863,11.641,20.86,10.715,33.422c-0.134,1.817,0.703,2.704,1.981,3.673 c8.49,6.434,13.247,14.796,12.889,25.667c-0.26,7.891-2.972,14.8-8.544,20.498c-0.494,0.505-0.962,1.036-1.38,1.487 c14.257,24.308,17.445,48.856,2.726,74.484c-1.533-5.072-2.716-9.767-4.365-14.293c-6.201-17.022-16.648-31.178-29.779-43.48 c-11.345-10.627-24.26-19.025-37.901-26.304c-8.729-4.657-18.408-6.692-27.949-8.955c-6.36-1.508-12.817-2.604-19.194-4.045 c-1.91-0.431-3.869-1.135-5.508-2.181c-5.003-3.195-5.851-7.113-2.87-12.218c3.534-6.053,8.322-10.506,15.719-10.576 c3.701-0.035,7.417,0.868,11.117,1.409c2.602,0.38,5.173,1.09,7.783,1.254c5.353,0.336,7.924-1.375,10.057-6.313 c1.296-3.001,2.515-6.035,3.785-9.047c2.637-6.249,7.107-10.496,13.625-12.553c1.821-0.575,3.605-1.282,5.378-2 c10.631-4.306,14.215-14.344,8.737-24.482c-3.886-7.191-9.742-12.597-16.043-17.592c-0.374-0.296-0.767-0.569-1.135-0.874 C606.496,286.533,606.45,286.376,605.976,285.565z M641.396,371.752c9.896-5.434,18.505-3.728,22.723,4.503 c4.164,8.126,0.637,16.222-9.132,20.958c5.196,1.796,14.711-2.42,17.915-10.289c3.563-8.745-0.271-18.921-8.859-22.804 C655.484,360.251,645.177,363.724,641.396,371.752z M646.895,382.019c2.46,0.021,4.282-1.746,4.246-4.115 c-0.034-2.191-1.926-4.08-4.114-4.106c-2.364-0.029-4.233,1.838-4.214,4.207C642.831,380.308,644.551,381.999,646.895,382.019z"></path></g></svg>
</body>
</html>
All you need is a wrapper:
.svg-control {
width: 40px;
display: inline-block;
}
.svg-control svg {
width: 100%;
height: auto;
}
.svg-control {
width: 40px;
display: inline-block;
}
.svg-control svg {
width: 100%;
height: auto;
}
<span class="svg-control">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" width="1000px" height="1000px" viewBox="0 0 1000 1000" enable-background="new 0 0 1000 1000"><g class="cow__container"><path fill-rule="evenodd" clip-rule="evenodd" d="M884,329.64c-1.122,5.369-2.196,10.749-3.374,16.105 c-5.812,26.44-14.017,52.028-27.338,75.751c-8.967,15.969-19.913,30.313-34.847,41.242c-17.124,12.532-36.314,17.801-57.453,16.278 c-15.802-1.139-30.767-5.478-45.043-12.084c-5.87-2.717-11.806-3.102-17.942-2.617c-3.539,0.28-7.031,1.141-10.631,1.754 c0.009,0.118-0.085-0.121-0.007-0.265c10.652-19.542,8.98-38.777-1.587-57.698c-1.23-2.204-1.374-3.731-0.087-5.998 c4.313-7.596,6.408-15.77,5.273-24.585c-0.039-0.302-0.005-0.613-0.005-0.933c12.388-4.38,22.498-12.23,30.922-21.735 c21.579-24.352,48.968-38.988,79.189-49.157c13.771-4.634,27.94-7.222,42.558-6.92c9.435,0.195,18.555,1.809,27.24,5.592 c6.401,2.788,10.529,7.59,12.593,14.226c0.106,0.344,0.355,0.644,0.538,0.965C884,322.92,884,326.28,884,329.64z M813.712,411.235 c13.214-11.448,24.157-24.656,31.979-40.3c4.986-9.976,8.731-20.378,9.758-31.577c0.747-8.158-3.785-15.235-11.115-17.18 c-3.213-0.852-6.578-1.426-9.895-1.544c-12.256-0.437-23.887,2.734-35.259,6.86c-25.36,9.203-48.545,22.578-70.963,37.389 c-0.212,0.14-0.518,0.137-0.779,0.201c0.172,0.167,0.344,0.334,0.516,0.501c6.907-3.452,13.771-6.995,20.731-10.338 c17.256-8.287,34.713-16.104,53.276-21.07c8.582-2.296,17.264-4.059,26.248-2.629c7.499,1.193,12.295,5.485,13.14,13.042 c0.468,4.186,0.021,8.641-0.887,12.783c-2.658,12.12-8.274,23.077-14.427,33.733C822.103,397.917,817.831,404.532,813.712,411.235z M116.48,320.52c0.283-0.723,0.615-1.431,0.841-2.172c1.925-6.315,5.841-10.919,11.843-13.68 c10.928-5.028,22.511-6.349,34.371-5.811c22.41,1.016,43.156,8.08,63.146,17.713c13.792,6.646,26.886,14.458,38.425,24.604 c3.887,3.418,7.336,7.338,10.943,11.07c7.019,7.262,14.383,14.125,23.115,19.307c3.339,1.982,6.924,3.551,10.595,5.408 c-1.522,9.651,1.301,18.615,6.165,27.146c0.339,0.594,0.078,1.818-0.324,2.504c-4.226,7.232-7.299,14.867-8.674,23.173 c-2.099,12.683-0.024,24.606,6.26,35.809c0.116,0.207,0.203,0.43,0.246,0.521c-3.407-0.581-6.848-1.36-10.333-1.719 c-6.48-0.667-12.69-0.128-18.843,2.743c-13.077,6.103-26.845,10.176-41.255,11.635c-27.48,2.782-51.181-5.511-71.055-24.695 c-16.231-15.667-27.08-34.831-35.658-55.405c-9.213-22.099-15.302-45.104-19.335-68.676c-0.077-0.452-0.312-0.878-0.474-1.316 C116.48,325.96,116.48,323.24,116.48,320.52z M272.693,365.663c0.082-0.15,0.163-0.301,0.245-0.452 c-2.861-1.863-5.702-3.759-8.589-5.583c-20.825-13.152-42.271-25.105-65.679-33.097c-11.907-4.065-24.03-7.013-36.839-5.579 c-11.376,1.273-17.435,7.567-16.425,18.974c0.575,6.498,2.402,13.023,4.573,19.218c7.084,20.224,19.782,36.685,35.429,51.033 c0.284,0.261,0.689,0.39,1.654,0.917c-0.957-1.467-1.555-2.3-2.068-3.183c-5.619-9.649-11.527-19.146-16.747-29.006 c-4.939-9.332-8.863-19.184-9.322-29.932c-0.343-8.028,2.437-14.054,10.39-16.621c2.32-0.749,4.836-1.119,7.281-1.219 c10.545-0.43,20.566,2.308,30.458,5.508c21.311,6.895,41.392,16.63,61.287,26.777C269.795,364.16,271.243,364.915,272.693,365.663z M663.008,669.929c-0.57-6.571-0.819-13.115-1.764-19.557c-1.846-12.592-6.015-24.323-14.439-34.166 c-8.361-9.77-19.219-14.847-31.82-16.344c-11.665-1.386-23.322-0.167-34.94,0.729c-11.3,0.872-22.556,2.314-33.824,3.57 c-8.967,1-17.9,2.408-26.892,3.038c-5.608,0.394-11.294-0.401-16.948-0.509c-2.742-0.052-5.514,0.076-8.234,0.424 c-8.098,1.036-16.116,0.118-24.14-0.764c-18.413-2.021-36.807-4.222-55.24-6.034c-7.539-0.741-15.158-0.889-22.743-0.921 c-23.11-0.101-40.845,12.222-49.031,33.803c-3.836,10.115-5.649,20.597-5.755,31.392c-0.017,1.744-0.002,3.489-0.002,5.548 c-4.864-1.54-8.998-3.864-12.838-6.717c-9.7-7.205-14.901-17.091-16.823-28.821c-2.638-16.104,0.222-31.7,5.145-46.927 c2.886-8.929,6.822-17.515,10.166-26.3c0.529-1.39,0.774-3.069,0.563-4.53c-4.173-28.935-0.409-56.709,12.433-83.037 c13.871-28.438,34.403-50.76,62.111-66.282c12.372-6.932,25.758-10.52,39.782-12.147c20.579-2.388,40.963-1.236,61.273,2.623 c2.06,0.391,4.374-0.458,6.554-0.828c16.933-2.874,33.938-3.865,51.081-2.336c14.256,1.271,28.075,4.083,40.99,10.548 c18.312,9.166,33.66,22.004,46.606,37.747c15.749,19.153,26.357,40.818,31.112,65.23c3.099,15.908,3.408,31.886,0.85,47.902 c-0.32,2.008-0.121,3.79,0.807,5.725c7.428,15.472,12.966,31.583,15.206,48.656c1.541,11.742,1.423,23.426-3.074,34.694 c-4.804,12.035-13.703,19.76-25.494,24.496C663.406,669.946,663.072,669.921,663.008,669.929z M605.628,421.397 c0.963,4.05,2.046,7.475,2.561,10.983c1.789,12.183-2.256,21.521-15.65,24.141c-4.38,0.856-8.461,2.359-11.879,5.298 c-8.065,6.935-10.746,16.04-9.978,26.251c0.537,7.135,3.031,13.625,8.943,18.149c7.012,5.365,14.798,4.856,22.577,2.128 c19.232-6.746,29.46-26.586,24.763-47.405c-2.858-12.667-9.106-23.591-16.774-33.836 C608.833,425.295,607.366,423.566,605.628,421.397z M394.049,421.417c-6.855,8.215-12.873,16.908-17.128,26.736 c-3.265,7.541-5.247,15.325-5.182,23.644c0.136,17.333,10.931,32.072,27.48,37.161c10.059,3.093,18.936,0.843,24.504-6.399 c3.563-4.635,5.015-10.017,5.354-15.833c0.734-12.635-5.88-27.413-22.268-30.356c-11.702-2.102-17.405-10.878-15.455-22.681 C392.024,429.63,393.109,425.64,394.049,421.417z M385.188,614.35c-30.602,9.913-44.266,43.738-29.744,70.788 c13.506,25.16,32.758,44.557,58.68,56.919c16.505,7.872,33.85,10.102,51.838,6.574c11.664-2.287,22.316-7.104,32.274-13.49 c1.28-0.82,2.135-0.883,3.381-0.029c1.975,1.351,4.068,2.535,6.165,3.692c20.894,11.528,42.822,14.716,65.889,7.9 c14.798-4.372,27.73-12.192,39.306-22.259c13.833-12.029,25.468-25.849,33.104-42.676c8.517-18.77,3.709-41.744-11.356-55.673 c-12.316-11.388-27.147-15.468-43.479-14.71c-12.123,0.562-24.212,1.836-36.332,2.469c-15.026,0.785-30.035,0.18-45.006-1.363 c-3.883-0.4-7.802-1.142-11.661-0.929c-9.802,0.541-19.571,2.066-29.368,2.215c-13.484,0.203-26.987-0.346-40.471-0.874 c-7.413-0.29-14.802-1.199-19.317-1.584C399.026,611.195,392.012,612.139,385.188,614.35z M614.046,304.22 c-4.441-7.552-10.675-12.843-19.206-15.215c-5.954-1.655-12.028-1.494-18.089-0.922c-6.198,0.584-12.37,1.462-18.569,2.041 c-8.708,0.813-16.924-1.104-24.966-4.422c-5.063-2.089-10.335-3.744-15.624-5.186c-2.317-0.632-4.934-0.479-7.377-0.265 c-3.544,0.31-5.785,2.279-6.321,6.167c-0.924,6.702-1.378,13.469-2.005,20.211c-0.079,0.852-0.011,1.717-0.011,3.075 c-2.08-3.633-3.823-6.902-5.774-10.042c-4.486-7.22-10.406-12.706-18.816-15.042c-6.247-1.735-12.613-1.932-19.017-1.34 c-10.881,1.004-21.744,2.226-32.638,3.057c-6.35,0.484-12.85-0.287-19.098,0.692c-12.795,2.004-22.984,8.451-29.298,20.121 c-4.257,7.869-1.296,17.128,6.733,21.185c2.62,1.324,5.428,2.295,8.193,3.309c9.971,3.655,15.402,10.976,17.087,21.237 c0.75,4.566,3.28,7.726,7.163,9.913c6.563,3.695,13.806,4.717,21.17,5.343c2.07,0.176,4.465,0.445,6.056,1.585 c4.102,2.939,3.749,9.51-0.764,11.916c-2.781,1.482-6.159,2.074-9.346,2.527c-23.123,3.288-43.874,12.207-62.387,26.303 c-17.72,13.492-31.283,30.301-39.339,51.223c-1.911,4.962-3.122,10.194-4.659,15.3c-0.151,0.5-0.333,0.992-0.671,1.987 c-14.79-25.739-11.593-50.302,2.654-74.574c-7.669-6.593-10.705-15.2-10.515-25.115c0.199-10.346,5.33-17.771,13.816-23.23 c0.802-0.516,1.736-1.586,1.767-2.43c0.872-24.068,13.771-39.763,34.372-50.502c8.469-4.415,16.503-9.679,24.643-14.708 c8.296-5.126,16.499-10.51,26.149-12.688c6.912-1.56,13.954-2.592,20.975-3.604c9.8-1.413,18.569-4.963,26.196-11.385 c4.704-3.961,9.538-7.889,15.574-9.669c8.622-2.543,16.993-1.01,24.948,2.575c6.902,3.111,13.532,6.823,20.328,10.176 c10.314,5.09,21.436,7.675,32.565,10.14c10.117,2.241,20.345,3.996,30.433,6.356C603.153,283.308,610.116,292.33,614.046,304.22z M341.396,397.209c6.927,1.933,15.42-3.808,18.002-10.533c3.484-9.078-0.717-19.207-9.632-22.887 c-8.248-3.404-18.796,0.382-21.805,7.826c9.91-5.26,18.346-3.502,22.554,4.615C353.767,382.505,352.773,392.788,341.396,397.209z M333.249,382.019c2.373,0.034,4.197-1.644,4.25-3.911c0.056-2.4-1.807-4.32-4.182-4.311c-2.231,0.009-4.102,1.875-4.136,4.127 C329.145,380.24,330.878,381.985,333.249,382.019z M605.976,285.565c6.292,2.87,12.091,5.283,17.679,8.112 c12.737,6.448,24.342,14.432,33.104,25.961c7.495,9.863,11.641,20.86,10.715,33.422c-0.134,1.817,0.703,2.704,1.981,3.673 c8.49,6.434,13.247,14.796,12.889,25.667c-0.26,7.891-2.972,14.8-8.544,20.498c-0.494,0.505-0.962,1.036-1.38,1.487 c14.257,24.308,17.445,48.856,2.726,74.484c-1.533-5.072-2.716-9.767-4.365-14.293c-6.201-17.022-16.648-31.178-29.779-43.48 c-11.345-10.627-24.26-19.025-37.901-26.304c-8.729-4.657-18.408-6.692-27.949-8.955c-6.36-1.508-12.817-2.604-19.194-4.045 c-1.91-0.431-3.869-1.135-5.508-2.181c-5.003-3.195-5.851-7.113-2.87-12.218c3.534-6.053,8.322-10.506,15.719-10.576 c3.701-0.035,7.417,0.868,11.117,1.409c2.602,0.38,5.173,1.09,7.783,1.254c5.353,0.336,7.924-1.375,10.057-6.313 c1.296-3.001,2.515-6.035,3.785-9.047c2.637-6.249,7.107-10.496,13.625-12.553c1.821-0.575,3.605-1.282,5.378-2 c10.631-4.306,14.215-14.344,8.737-24.482c-3.886-7.191-9.742-12.597-16.043-17.592c-0.374-0.296-0.767-0.569-1.135-0.874 C606.496,286.533,606.45,286.376,605.976,285.565z M641.396,371.752c9.896-5.434,18.505-3.728,22.723,4.503 c4.164,8.126,0.637,16.222-9.132,20.958c5.196,1.796,14.711-2.42,17.915-10.289c3.563-8.745-0.271-18.921-8.859-22.804 C655.484,360.251,645.177,363.724,641.396,371.752z M646.895,382.019c2.46,0.021,4.282-1.746,4.246-4.115 c-0.034-2.191-1.926-4.08-4.114-4.106c-2.364-0.029-4.233,1.838-4.214,4.207C642.831,380.308,644.551,381.999,646.895,382.019z"></path></g></svg>
</span>
Now control the width of the <svg> by adjusting the width of the wrapper.
As per why doesn't changing viewBox work, it's because the <svg> is a document, which has infinite size in theory, and the viewBox is just the window you watch this document through. <svg> is not an image. It's a document.
Ref: Why does it need a viewBox (in comments).
A: It needs a viewBox so you can define the size of what gets printed in your context in order to have control over it. If you have a viewBox and you use CSS to resize the <svg> you will transform what gets printed according to the ratio between viewBox and <svg> size. Without viewBox, you have no control over the contents of svg. It just gets printed the same size at all times, with a 1:1 ratio between svg units and document pixels, and the <svg> in your document acts as a viewBox. When bigger, you see all the contents, but they won't stretch to fit. When smaller, the contents will be cropped. Without viewBox you have no control over the size of the contents of <svg>. That's why you need a viewBox.
Related
This is my path tag size (g tag is same size)
And this is my SVG tag size
There is space between them
These are the inline attributes...
<svg preserveAspectRatio="none" class="JDicon JDicon__svg JDicon--white JDicon--large" alignment-baseline="central" version="1.1" data-tip="false" viewBox="0 0 64 64">
<g>
<path d="M56.562,6.875 L3.437,6.875 C1.539,6.875 -0.000,5.336 -0.000,3.437 C-0.000,1.539 1.539,-0.000 3.437,-0.000 L56.562,-0.000 C58.461,-0.000 60.000,1.539 60.000,3.437 C60.000,5.336 58.461,6.875 56.562,6.875 ZM3.437,24.062 L32.656,24.062 C34.555,24.062 36.094,25.601 36.094,27.500 C36.094,29.398 34.555,30.937 32.656,30.937 L3.437,30.937 C1.539,30.937 -0.000,29.398 -0.000,27.500 C-0.000,25.601 1.539,24.062 3.437,24.062 ZM43.437,30.937 C41.539,30.937 40.000,29.398 40.000,27.500 C40.000,25.601 41.539,24.062 43.437,24.062 L43.562,24.062 C45.461,24.062 47.000,25.601 47.000,27.500 C47.000,29.398 45.461,30.937 43.562,30.937 L43.437,30.937 ZM3.437,47.125 L56.562,47.125 C58.461,47.125 60.000,48.664 60.000,50.562 C60.000,52.461 58.461,54.000 56.562,54.000 L3.437,54.000 C1.539,54.000 -0.000,52.461 -0.000,50.562 C-0.000,48.664 1.539,47.125 3.437,47.125 Z">
</path>
</g>
</svg>
This is css for svg
{
width: 1.8rem;
height: 1.8rem;
}
I am trying to figure out why this space exists.
https://codepen.io/colton123/pen/qBEGwLL
Two things: Your icon is not a perfect square, and there is a gap in the icon itself on the right side.
First, with the <svg> set to 1.8rem (32px in CodePen) the <g> is 30x27px. If you changed the height and width of <svg> to 3rem (48px in CodePen) the <g> would be 45x40.5px. Since you are forcing <svg> into a square, there will be a gap.
Second, the width of <g> should match the width of <svg>, but it is always 93.75% of the width. This means there is a 6.25% gap in the icon itself.
Hello please see this and solve your issue of SVG. Thanks
svg {
width: 2rem;
height: auto;
}
<svg class="JDicon JDicon__svg JDicon--white JDicon--large" alignment-baseline="central" version="1.1" data-tip="false" viewBox="0 0 62 56"><g><path d="M56.562,6.875 L3.437,6.875 C1.539,6.875 -0.000,5.336 -0.000,3.437 C-0.000,1.539 1.539,-0.000 3.437,-0.000 L56.562,-0.000 C58.461,-0.000 60.000,1.539 60.000,3.437 C60.000,5.336 58.461,6.875 56.562,6.875 ZM3.437,24.062 L32.656,24.062 C34.555,24.062 36.094,25.601 36.094,27.500 C36.094,29.398 34.555,30.937 32.656,30.937 L3.437,30.937 C1.539,30.937 -0.000,29.398 -0.000,27.500 C-0.000,25.601 1.539,24.062 3.437,24.062 ZM43.437,30.937 C41.539,30.937 40.000,29.398 40.000,27.500 C40.000,25.601 41.539,24.062 43.437,24.062 L43.562,24.062 C45.461,24.062 47.000,25.601 47.000,27.500 C47.000,29.398 45.461,30.937 43.562,30.937 L43.437,30.937 ZM3.437,47.125 L56.562,47.125 C58.461,47.125 60.000,48.664 60.000,50.562 C60.000,52.461 58.461,54.000 56.562,54.000 L3.437,54.000 C1.539,54.000 -0.000,52.461 -0.000,50.562 C-0.000,48.664 1.539,47.125 3.437,47.125 Z"></path></g></svg>
Your should be viewBox="0 0 62 54" instead of viewBox="0 0 62 62"
I want to show full SVG image with dynamic width and height from html or CSS
for example:
http://codepen.io/anon/pen/JWgXmj
<svg with="250px" height="250px" viewBox="0 0 250 250">
Not showing full SVG image
You have an error in your svg definition, with is misspelled and should be width. You don't need to add px in width or height, just the svg width and height values.
<svg width="250" height="250" viewBox="0 0 250 250">
I saved an .svg from Photoshop with the dimensions I want it to appear as by default. It appeared fine on the page using the following markup, but was blurry.
<object type="image/svg+xml" data="~/Assets/images/premium-feature-star.svg" class="premiumFeatureButton"></object>
So, I re-saved the .svg in larger dimensions from Photoshop (overwriting the existing image), and I tried setting the viewBox attribute in the .svg to the dimensions I want the image to appear as, (see the code below). Now I don't see the image appear on my web page. Here's the .svg code:
(I've tried removing the image width and height from the svg code below)
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 21 21">
<image id="Layer_0" data-name="Layer 0" x="5" y="5" width="385" height="385" xlink:href="data:img/png;base64,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"/>
</svg>
When I look at my webpage, I see that the .svg is still scaled to it's original dimensions:
Here's the css (which was displaying the old .svg correctly):
.premiumFeatureButton {
position: absolute;
top: 408px;
left: 380px;
z-index: 3;
}
The element is contained within a div. I've tried setting height and width of the containing div as percentages.
Here's the div that the .svg is contained in:
I needed to set height and width on the svg and the image contained inside the svg, to the desired pixel dimensions. I also set the svg viewBox attribute (which specifies that the visible area of the svg should be from the top left corner (0 0) to the bottom right corner (21 21) of the svg:)
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="21" height="21" viewBox="0 0 21 21">
<image id="Layer_0" data-name="Layer 0" width="21" height="21"
hey i have some Svg elements consisting each out of a polygon shape. see the following code:
<body>
<svg class="svgRules" width = "100%" height="200">
<polygon class="opmaakPoly" id ="p1" points="500,0 1920,0 1920,200 600,200"/>
</svg>
<svg class="svgRules" width = "100%" height="200">
<polygon class="opmaakPoly" id="p2" points="600,0 1920,0 1920,200 700,200"/>
</svg>
</body>
with the following style:
body{
margin: 0;
padding: 0;
}
.svgRules{
float: left;
}
.opmaakPoly{
stroke:#F0c;
fill: #FFF;
stroke-width:2px;
}
now when i scale the browser window the polygon shapes dont scale accordingly i tried setting the points to percentages but that didnt seem to work. so how do i make the polygon element scale with the browser window?
JSFiddle
Try to add
viewBox="0 0 1920 1080" preserveAspectRatio="none"
or similar to your svg tag - the viewbox should have the your desired (svg-internal) size, while preserveAspectRatio will allow it to scale properly - check the available values if "none" doesn't create the desired result.
oke thanks to rainforce15 and maxshuty i figured out how to do it properly!
you indeed need to add the:
viewBox="0,0,1920,1080" preserveAspectRation="none"
but you need to make the viewBox the size of the polygon shape inside otherwise it will deform the polygon shape.
so instead of using:
viewBox="0,0,1920,1080"
use
viewBox="0,0,1920,200"
So this seems to be a bug that just cropped up in Chrome today (and Firefox apparently).
I have an SVG wrapped inside a span (I've tried div's and object tags as well, it doesn't seem to matter), and that span has a specified height and width. Yesterday, the child element would size itself appropriately to the full dimensions of it's parent, as every other html element does. However, now, that SVG element is not getting the inherited size from its parent, and is sizing itself based off the actual size of the SVG.
Check out the fiddle here: http://jsfiddle.net/theandybob/4LHeB/
The CSS:
.icon-small {
width: 32px;
height: 32px;
position: relative;
display: inline-block;
}
And the Code:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<symbol id="run-import" viewBox="0 0 48 48">
<path fill="#4B4B4B" d="M24,0c4.4,0,8.4,1.1,12,3.2s6.6,5.1,8.7,8.7c2.1,3.7,3.2,7.7,3.2,12s-1.1,8.4-3.2,12 c-2.1,3.7-5.1,6.6-8.7,8.7c-3.7,2.1-7.7,3.2-12,3.2c-4.4,0-8.4-1.1-12-3.2c-3.7-2.1-6.6-5.1-8.7-8.7C1.1,32.4,0,28.4,0,24 s1.1-8.4,3.2-12S8.3,5.4,12,3.2S19.6,0,24,0z M36,25.7c0.7-0.4,1-0.9,1-1.7c0-0.8-0.3-1.3-1-1.7l-17-10c-0.6-0.4-1.3-0.4-2,0 c-0.7,0.4-1,1-1,1.8v20c0,0.8,0.3,1.4,1,1.8c0.3,0.2,0.7,0.3,1,0.3c0.4,0,0.7-0.1,1-0.3L36,25.7z"></path>
</symbol>
</svg>
<span class="icon-small">
<svg><use xlink:href="#run-import"></use></svg>
</span>
Now, this happens in Chrome (both on Windows and Mac), and Firefox, but not IE or Safari. Ideas on how to fix the issue, or where it came up from?
The only workaround I have now is to specifically set the svg size to inherit from it's parent.
Also, throwing the version numbers out there:
1. Chrome: Version 36.0.1985.125 m
2. Firefox: 30.0
You need height and width on the <svg> element which you can set using CSS if you wish but which I've set using attributes.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="0" height="0">
<symbol id="run-import" viewBox="0 0 48 48">
<path fill="#4B4B4B" d="M24,0c4.4,0,8.4,1.1,12,3.2s6.6,5.1,8.7,8.7c2.1,3.7,3.2,7.7,3.2,12s-1.1,8.4-3.2,12 c-2.1,3.7-5.1,6.6-8.7,8.7c-3.7,2.1-7.7,3.2-12,3.2c-4.4,0-8.4-1.1-12-3.2c-3.7-2.1-6.6-5.1-8.7-8.7C1.1,32.4,0,28.4,0,24 s1.1-8.4,3.2-12S8.3,5.4,12,3.2S19.6,0,24,0z M36,25.7c0.7-0.4,1-0.9,1-1.7c0-0.8-0.3-1.3-1-1.7l-17-10c-0.6-0.4-1.3-0.4-2,0 c-0.7,0.4-1,1-1,1.8v20c0,0.8,0.3,1.4,1,1.8c0.3,0.2,0.7,0.3,1,0.3c0.4,0,0.7-0.1,1-0.3L36,25.7z"></path>
</symbol>
</svg>
<span class="icon-small">
<svg width="100%" height="100%"><use xlink:href="#run-import"></use></svg>
</span>