SVG space around
-1
I have an svg icon which is generated by some plugin used in the project. I need to modify the svg because it has some blank space around.
How to fix this? What causes that blank space ?
[https://codepen.io/zoom/pen/NEObQB][2]
html css svg
edited Nov 28 '18 at 14:56
newton_cr7
155112
asked Nov 28 '18 at 13:01
DmiDmi
196
add a comment |
-1
I have an svg icon which is generated by some plugin used in the project. I need to modify the svg because it has some blank space around.
How to fix this? What causes that blank space ?
[https://codepen.io/zoom/pen/NEObQB][2]
html css svg
edited Nov 28 '18 at 14:56
newton_cr7
155112
asked Nov 28 '18 at 13:01
DmiDmi
196
1
please add your code to quetion
– לבני מלכה
Nov 28 '18 at 13:03
1
Questions seeking code help must include the shortest code necessary to reproduce it in the question itself preferably in a Stack Snippet. Although you have provided a link, if it was to become invalid, your question would be of no value to other future SO users with the same problem. See Something in my website/demo doesn't work can I just paste a link.
– Paulie_D
Nov 28 '18 at 13:20
I'm not very sure I understand your question. Please tryviewBox="53 22 26 36"for your SVG element. The values used are taken from your triangle bounding box
– enxaneta
Nov 28 '18 at 14:18
Did you solve this problem?
– ksav
Jan 16 at 16:18
add a comment |
-1
-1
-1
I have an svg icon which is generated by some plugin used in the project. I need to modify the svg because it has some blank space around.
How to fix this? What causes that blank space ?
[https://codepen.io/zoom/pen/NEObQB][2]
html css svg
edited Nov 28 '18 at 14:56
newton_cr7
155112
asked Nov 28 '18 at 13:01
DmiDmi
196
I have an svg icon which is generated by some plugin used in the project. I need to modify the svg because it has some blank space around.
How to fix this? What causes that blank space ?
[https://codepen.io/zoom/pen/NEObQB][2]
html css svg
html css svg
edited Nov 28 '18 at 14:56
newton_cr7
155112
asked Nov 28 '18 at 13:01
DmiDmi
196
edited Nov 28 '18 at 14:56
newton_cr7
155112
asked Nov 28 '18 at 13:01
DmiDmi
196
edited Nov 28 '18 at 14:56
newton_cr7
155112
edited Nov 28 '18 at 14:56
newton_cr7
155112
edited Nov 28 '18 at 14:56
newton_cr7
155112
155112
asked Nov 28 '18 at 13:01
DmiDmi
196
asked Nov 28 '18 at 13:01
DmiDmi
196
asked Nov 28 '18 at 13:01
DmiDmi
196
196
1
please add your code to quetion
– לבני מלכה
Nov 28 '18 at 13:03
1
Questions seeking code help must include the shortest code necessary to reproduce it in the question itself preferably in a Stack Snippet. Although you have provided a link, if it was to become invalid, your question would be of no value to other future SO users with the same problem. See Something in my website/demo doesn't work can I just paste a link.
– Paulie_D
Nov 28 '18 at 13:20
I'm not very sure I understand your question. Please tryviewBox="53 22 26 36"for your SVG element. The values used are taken from your triangle bounding box
– enxaneta
Nov 28 '18 at 14:18
Did you solve this problem?
– ksav
Jan 16 at 16:18
add a comment |
1
please add your code to quetion
– לבני מלכה
Nov 28 '18 at 13:03
1
Questions seeking code help must include the shortest code necessary to reproduce it in the question itself preferably in a Stack Snippet. Although you have provided a link, if it was to become invalid, your question would be of no value to other future SO users with the same problem. See Something in my website/demo doesn't work can I just paste a link.
– Paulie_D
Nov 28 '18 at 13:20
I'm not very sure I understand your question. Please tryviewBox="53 22 26 36"for your SVG element. The values used are taken from your triangle bounding box
– enxaneta
Nov 28 '18 at 14:18
Did you solve this problem?
– ksav
Jan 16 at 16:18
1
1
please add your code to quetion
– לבני מלכה
Nov 28 '18 at 13:03
please add your code to quetion
– לבני מלכה
Nov 28 '18 at 13:03
1
1
Questions seeking code help must include the shortest code necessary to reproduce it in the question itself preferably in a Stack Snippet. Although you have provided a link, if it was to become invalid, your question would be of no value to other future SO users with the same problem. See Something in my website/demo doesn't work can I just paste a link.
– Paulie_D
Nov 28 '18 at 13:20
Questions seeking code help must include the shortest code necessary to reproduce it in the question itself preferably in a Stack Snippet. Although you have provided a link, if it was to become invalid, your question would be of no value to other future SO users with the same problem. See Something in my website/demo doesn't work can I just paste a link.
– Paulie_D
Nov 28 '18 at 13:20
I'm not very sure I understand your question. Please try
viewBox="53 22 26 36" for your SVG element. The values used are taken from your triangle bounding box– enxaneta
Nov 28 '18 at 14:18
I'm not very sure I understand your question. Please try
viewBox="53 22 26 36" for your SVG element. The values used are taken from your triangle bounding box– enxaneta
Nov 28 '18 at 14:18
Did you solve this problem?
– ksav
Jan 16 at 16:18
Did you solve this problem?
– ksav
Jan 16 at 16:18
add a comment |
2 Answers
2
active
oldest
votes
0
Set a width and height also to svg instead:
x="8" y="22" viewBox="0 0 125 80" style="fill: rgb(255, 255, 255); stroke-width: 0px;"
<div>
<svg id="svg" width="125" height="60"><rect fill-rule="evenodd" clip-rule="evenodd" fill="none" width="125" height="60"></rect><polygon fill-rule="evenodd" clip-rule="evenodd" fill="red" points="53,22 53,58 79,40"></polygon></svg>
</div>answered Nov 28 '18 at 13:09
לבני מלכהלבני מלכה
10.7k1827
add a comment |
0
If you want your SVG to be scalable according to the height and width set on it's parent div, set it up like this:
div {
position: relative;
background-color: #eee;
}
svg {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
}
.div1 {
width: 60px;
height: 30px;
}
.div2 {
width: 400px;
height: 300px;
}<div class="div1">
<svg id="svg" preserveAspectRatio="xMidYMid meet" viewBox="0 0 125 80" style="fill: rgb(255, 255, 255); stroke-width: 0px;"><rect fill-rule="evenodd" clip-rule="evenodd" fill="none" width="125" height="80"></rect><polygon fill-rule="evenodd" clip-rule="evenodd" fill="red" points="53,22 53,58 79,40"></polygon></svg>
</div>
<div class="div2">
<svg id="svg" preserveAspectRatio="xMidYMid meet" viewBox="0 0 125 80" style="fill: rgb(255, 255, 255); stroke-width: 0px;"><rect fill-rule="evenodd" clip-rule="evenodd" fill="none" width="125" height="80"></rect><polygon fill-rule="evenodd" clip-rule="evenodd" fill="red" points="53,22 53,58 79,40"></polygon></svg>
</div>answered Nov 28 '18 at 13:15
ksavksav
5,37721432
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53520084%2fsvg-space-around%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
Set a width and height also to svg instead:
x="8" y="22" viewBox="0 0 125 80" style="fill: rgb(255, 255, 255); stroke-width: 0px;"
<div>
<svg id="svg" width="125" height="60"><rect fill-rule="evenodd" clip-rule="evenodd" fill="none" width="125" height="60"></rect><polygon fill-rule="evenodd" clip-rule="evenodd" fill="red" points="53,22 53,58 79,40"></polygon></svg>
</div>answered Nov 28 '18 at 13:09
לבני מלכהלבני מלכה
10.7k1827
add a comment |
0
Set a width and height also to svg instead:
x="8" y="22" viewBox="0 0 125 80" style="fill: rgb(255, 255, 255); stroke-width: 0px;"
<div>
<svg id="svg" width="125" height="60"><rect fill-rule="evenodd" clip-rule="evenodd" fill="none" width="125" height="60"></rect><polygon fill-rule="evenodd" clip-rule="evenodd" fill="red" points="53,22 53,58 79,40"></polygon></svg>
</div>answered Nov 28 '18 at 13:09
לבני מלכהלבני מלכה
10.7k1827
add a comment |
0
0
0
Set a width and height also to svg instead:
x="8" y="22" viewBox="0 0 125 80" style="fill: rgb(255, 255, 255); stroke-width: 0px;"
<div>
<svg id="svg" width="125" height="60"><rect fill-rule="evenodd" clip-rule="evenodd" fill="none" width="125" height="60"></rect><polygon fill-rule="evenodd" clip-rule="evenodd" fill="red" points="53,22 53,58 79,40"></polygon></svg>
</div>answered Nov 28 '18 at 13:09
לבני מלכהלבני מלכה
10.7k1827
Set a width and height also to svg instead:
x="8" y="22" viewBox="0 0 125 80" style="fill: rgb(255, 255, 255); stroke-width: 0px;"
<div>
<svg id="svg" width="125" height="60"><rect fill-rule="evenodd" clip-rule="evenodd" fill="none" width="125" height="60"></rect><polygon fill-rule="evenodd" clip-rule="evenodd" fill="red" points="53,22 53,58 79,40"></polygon></svg>
</div><div>
<svg id="svg" width="125" height="60"><rect fill-rule="evenodd" clip-rule="evenodd" fill="none" width="125" height="60"></rect><polygon fill-rule="evenodd" clip-rule="evenodd" fill="red" points="53,22 53,58 79,40"></polygon></svg>
</div><div>
<svg id="svg" width="125" height="60"><rect fill-rule="evenodd" clip-rule="evenodd" fill="none" width="125" height="60"></rect><polygon fill-rule="evenodd" clip-rule="evenodd" fill="red" points="53,22 53,58 79,40"></polygon></svg>
</div>answered Nov 28 '18 at 13:09
לבני מלכהלבני מלכה
10.7k1827
answered Nov 28 '18 at 13:09
לבני מלכהלבני מלכה
10.7k1827
answered Nov 28 '18 at 13:09
לבני מלכהלבני מלכה
10.7k1827
answered Nov 28 '18 at 13:09
לבני מלכהלבני מלכה
10.7k1827
10.7k1827
add a comment |
add a comment |
0
If you want your SVG to be scalable according to the height and width set on it's parent div, set it up like this:
div {
position: relative;
background-color: #eee;
}
svg {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
}
.div1 {
width: 60px;
height: 30px;
}
.div2 {
width: 400px;
height: 300px;
}<div class="div1">
<svg id="svg" preserveAspectRatio="xMidYMid meet" viewBox="0 0 125 80" style="fill: rgb(255, 255, 255); stroke-width: 0px;"><rect fill-rule="evenodd" clip-rule="evenodd" fill="none" width="125" height="80"></rect><polygon fill-rule="evenodd" clip-rule="evenodd" fill="red" points="53,22 53,58 79,40"></polygon></svg>
</div>
<div class="div2">
<svg id="svg" preserveAspectRatio="xMidYMid meet" viewBox="0 0 125 80" style="fill: rgb(255, 255, 255); stroke-width: 0px;"><rect fill-rule="evenodd" clip-rule="evenodd" fill="none" width="125" height="80"></rect><polygon fill-rule="evenodd" clip-rule="evenodd" fill="red" points="53,22 53,58 79,40"></polygon></svg>
</div>answered Nov 28 '18 at 13:15
ksavksav
5,37721432
add a comment |
0
If you want your SVG to be scalable according to the height and width set on it's parent div, set it up like this:
div {
position: relative;
background-color: #eee;
}
svg {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
}
.div1 {
width: 60px;
height: 30px;
}
.div2 {
width: 400px;
height: 300px;
}<div class="div1">
<svg id="svg" preserveAspectRatio="xMidYMid meet" viewBox="0 0 125 80" style="fill: rgb(255, 255, 255); stroke-width: 0px;"><rect fill-rule="evenodd" clip-rule="evenodd" fill="none" width="125" height="80"></rect><polygon fill-rule="evenodd" clip-rule="evenodd" fill="red" points="53,22 53,58 79,40"></polygon></svg>
</div>
<div class="div2">
<svg id="svg" preserveAspectRatio="xMidYMid meet" viewBox="0 0 125 80" style="fill: rgb(255, 255, 255); stroke-width: 0px;"><rect fill-rule="evenodd" clip-rule="evenodd" fill="none" width="125" height="80"></rect><polygon fill-rule="evenodd" clip-rule="evenodd" fill="red" points="53,22 53,58 79,40"></polygon></svg>
</div>answered Nov 28 '18 at 13:15
ksavksav
5,37721432
add a comment |
0
0
0
If you want your SVG to be scalable according to the height and width set on it's parent div, set it up like this:
div {
position: relative;
background-color: #eee;
}
svg {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
}
.div1 {
width: 60px;
height: 30px;
}
.div2 {
width: 400px;
height: 300px;
}<div class="div1">
<svg id="svg" preserveAspectRatio="xMidYMid meet" viewBox="0 0 125 80" style="fill: rgb(255, 255, 255); stroke-width: 0px;"><rect fill-rule="evenodd" clip-rule="evenodd" fill="none" width="125" height="80"></rect><polygon fill-rule="evenodd" clip-rule="evenodd" fill="red" points="53,22 53,58 79,40"></polygon></svg>
</div>
<div class="div2">
<svg id="svg" preserveAspectRatio="xMidYMid meet" viewBox="0 0 125 80" style="fill: rgb(255, 255, 255); stroke-width: 0px;"><rect fill-rule="evenodd" clip-rule="evenodd" fill="none" width="125" height="80"></rect><polygon fill-rule="evenodd" clip-rule="evenodd" fill="red" points="53,22 53,58 79,40"></polygon></svg>
</div>answered Nov 28 '18 at 13:15
ksavksav
5,37721432
If you want your SVG to be scalable according to the height and width set on it's parent div, set it up like this:
div {
position: relative;
background-color: #eee;
}
svg {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
}
.div1 {
width: 60px;
height: 30px;
}
.div2 {
width: 400px;
height: 300px;
}<div class="div1">
<svg id="svg" preserveAspectRatio="xMidYMid meet" viewBox="0 0 125 80" style="fill: rgb(255, 255, 255); stroke-width: 0px;"><rect fill-rule="evenodd" clip-rule="evenodd" fill="none" width="125" height="80"></rect><polygon fill-rule="evenodd" clip-rule="evenodd" fill="red" points="53,22 53,58 79,40"></polygon></svg>
</div>
<div class="div2">
<svg id="svg" preserveAspectRatio="xMidYMid meet" viewBox="0 0 125 80" style="fill: rgb(255, 255, 255); stroke-width: 0px;"><rect fill-rule="evenodd" clip-rule="evenodd" fill="none" width="125" height="80"></rect><polygon fill-rule="evenodd" clip-rule="evenodd" fill="red" points="53,22 53,58 79,40"></polygon></svg>
</div>div {
position: relative;
background-color: #eee;
}
svg {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
}
.div1 {
width: 60px;
height: 30px;
}
.div2 {
width: 400px;
height: 300px;
}<div class="div1">
<svg id="svg" preserveAspectRatio="xMidYMid meet" viewBox="0 0 125 80" style="fill: rgb(255, 255, 255); stroke-width: 0px;"><rect fill-rule="evenodd" clip-rule="evenodd" fill="none" width="125" height="80"></rect><polygon fill-rule="evenodd" clip-rule="evenodd" fill="red" points="53,22 53,58 79,40"></polygon></svg>
</div>
<div class="div2">
<svg id="svg" preserveAspectRatio="xMidYMid meet" viewBox="0 0 125 80" style="fill: rgb(255, 255, 255); stroke-width: 0px;"><rect fill-rule="evenodd" clip-rule="evenodd" fill="none" width="125" height="80"></rect><polygon fill-rule="evenodd" clip-rule="evenodd" fill="red" points="53,22 53,58 79,40"></polygon></svg>
</div>div {
position: relative;
background-color: #eee;
}
svg {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
}
.div1 {
width: 60px;
height: 30px;
}
.div2 {
width: 400px;
height: 300px;
}<div class="div1">
<svg id="svg" preserveAspectRatio="xMidYMid meet" viewBox="0 0 125 80" style="fill: rgb(255, 255, 255); stroke-width: 0px;"><rect fill-rule="evenodd" clip-rule="evenodd" fill="none" width="125" height="80"></rect><polygon fill-rule="evenodd" clip-rule="evenodd" fill="red" points="53,22 53,58 79,40"></polygon></svg>
</div>
<div class="div2">
<svg id="svg" preserveAspectRatio="xMidYMid meet" viewBox="0 0 125 80" style="fill: rgb(255, 255, 255); stroke-width: 0px;"><rect fill-rule="evenodd" clip-rule="evenodd" fill="none" width="125" height="80"></rect><polygon fill-rule="evenodd" clip-rule="evenodd" fill="red" points="53,22 53,58 79,40"></polygon></svg>
</div>answered Nov 28 '18 at 13:15
ksavksav
5,37721432
answered Nov 28 '18 at 13:15
ksavksav
5,37721432
answered Nov 28 '18 at 13:15
ksavksav
5,37721432
answered Nov 28 '18 at 13:15
ksavksav
5,37721432
5,37721432
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53520084%2fsvg-space-around%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
please add your code to quetion
– לבני מלכה
Nov 28 '18 at 13:03
1
Questions seeking code help must include the shortest code necessary to reproduce it in the question itself preferably in a Stack Snippet. Although you have provided a link, if it was to become invalid, your question would be of no value to other future SO users with the same problem. See Something in my website/demo doesn't work can I just paste a link.
– Paulie_D
Nov 28 '18 at 13:20
I'm not very sure I understand your question. Please try
viewBox="53 22 26 36"for your SVG element. The values used are taken from your triangle bounding box– enxaneta
Nov 28 '18 at 14:18
Did you solve this problem?
– ksav
Jan 16 at 16:18