SVG width and height not behaving as expected - html
I currently have an SVG file, the standard text at the top is there as follows:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="400px"
height="400px" viewBox="0 0 400 400" style="enable-background:new 0 0 400 400;" xml:space="preserve">
.......
</svg>
I've tried changing the width and height to 50%, 100%, 10% etc... and in Chrome it just takes up the whole screen, as if it's 100%, no matter what I try. It's as if there is an issue with using percent.
In Internet Explorer, the image doesn't take up the whole page, it's alot smaller at 100%.
I understand that I could place this into a div element and then resize that but this issue is bothering me. Obviously, I want to use percentages to get a responsive layout, which does happen, it just doesn't get any smaller than 100%, whatever I do.
I'm not using an img tag in the html. I'm using an object tag like so:
<body>
<object>
<embed src="Loading.svg">
</object>
</body>
Any help with this would be appreciated.
Thanks.
Related
SVG won't scale
Good Afternoon,
I know this question has been asked over and over but I can't seem to find the answer to fix my problem in any of the post i've searched.. which is a lot!
So I have a container Div which I want my SVG to scale to (100%).
I currently have HTML of
<div class="svg-lrg">
<object data="../images/sodium-sync-1.svg" width="416px" height="164px" type="image/svg+xml"></object>
</div>
I have also changed the HTML to try width="100%" as well as no width specified at all.
Div CSS is
.svg-lrg
{ width:100%;
height: auto;
margin: auto;
text-align: center;}
SVG info (or at least what I think is the important bit)
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
preserveAspectRatio="xMinYMin meet" version="1.1" viewBox="0 0 416 164">
I have the width and height set to 100% within the SVG.
It weirdly will be the correct size if changes are made to on the google console but on initial load or refreshing the page it's too small!
I've tried clear all css styles putting it within a Div, incase something on the template is upsetting it
.clear
{all: unset;}
Still no joy...
Any ideas?
Thanks :)
Just use this: HTML: <div class="svg-lrg"> <object data="../images/sodium-sync-1.svg" width="100%" height="100%" type="image/svg+xml"></object> </div> Setting both the width and height to 100% will scale the image to the parent (<div>). PS.: Your code wasn't working because you were trying to scale the <div>, not the <object>.
shrink svg image using viewBox
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.
Scaling SVG in HTML5 or in svg file or from css
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">
Why is my svg not appearing?
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"
SVG's not inheriting values from parent
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>