Lines in SVG not the same size despite crispEdges
I have an SVG image that is being created and enhanced programatically. After creating it, it is drawn on a Canvas. However, the lines do not seem to have the same width, despite having the same value for stroke-width and the attribute shape-rendering set to crispEdges.
The coordinates are calculated in JavaScript (hence the weird numbers). However, some lines seem to be twice as thick as others (see example below). I don't understand why this happens or how I can fix it.
My best guess is that the calculations are not precise enough and the angle is not actually a perfect 45°, resulting in a thicker line. But when I calculate the slope by hand, it's 45°.
Setting shape-rendering to auto theoretically works, but the circumstances require the lines to be not smooth.
<svg xmlns="http://www.w3.org/2000/svg" width="300" height="80" shape-rendering="crispEdges" stroke-linecap="square" stroke="rgb(0,0,0)" stroke-width="1">
<rect id="background" x="0" y="0" width="3201" height="1677" fill="rgb(255,255,255)" stroke-width="0"/>
<line x1="0.5" y1="71.5" x2="71.2106781186546" y2="0.7893218813452"/>
<line x1="71.2106781186546" y1="0.7893218813452" x2="141.9213562373093" y2="71.5"/>
<line x1="141.9213562373093" y1="71.5" x2="212.632034355964" y2="0.7893218813452"/>
<line x1="212.632034355964" y1="0.7893218813452" x2="283.3427124746186" y2="71.5"/>
</svg>html svg
edited Nov 12 '18 at 23:19
Kaiido
43.7k465105
asked Nov 12 '18 at 22:19
J. DoeJ. Doe
83
add a comment |
I have an SVG image that is being created and enhanced programatically. After creating it, it is drawn on a Canvas. However, the lines do not seem to have the same width, despite having the same value for stroke-width and the attribute shape-rendering set to crispEdges.
The coordinates are calculated in JavaScript (hence the weird numbers). However, some lines seem to be twice as thick as others (see example below). I don't understand why this happens or how I can fix it.
My best guess is that the calculations are not precise enough and the angle is not actually a perfect 45°, resulting in a thicker line. But when I calculate the slope by hand, it's 45°.
Setting shape-rendering to auto theoretically works, but the circumstances require the lines to be not smooth.
<svg xmlns="http://www.w3.org/2000/svg" width="300" height="80" shape-rendering="crispEdges" stroke-linecap="square" stroke="rgb(0,0,0)" stroke-width="1">
<rect id="background" x="0" y="0" width="3201" height="1677" fill="rgb(255,255,255)" stroke-width="0"/>
<line x1="0.5" y1="71.5" x2="71.2106781186546" y2="0.7893218813452"/>
<line x1="71.2106781186546" y1="0.7893218813452" x2="141.9213562373093" y2="71.5"/>
<line x1="141.9213562373093" y1="71.5" x2="212.632034355964" y2="0.7893218813452"/>
<line x1="212.632034355964" y1="0.7893218813452" x2="283.3427124746186" y2="71.5"/>
</svg>html svg
edited Nov 12 '18 at 23:19
Kaiido
43.7k465105
asked Nov 12 '18 at 22:19
J. DoeJ. Doe
83
add a comment |
I have an SVG image that is being created and enhanced programatically. After creating it, it is drawn on a Canvas. However, the lines do not seem to have the same width, despite having the same value for stroke-width and the attribute shape-rendering set to crispEdges.
The coordinates are calculated in JavaScript (hence the weird numbers). However, some lines seem to be twice as thick as others (see example below). I don't understand why this happens or how I can fix it.
My best guess is that the calculations are not precise enough and the angle is not actually a perfect 45°, resulting in a thicker line. But when I calculate the slope by hand, it's 45°.
Setting shape-rendering to auto theoretically works, but the circumstances require the lines to be not smooth.
<svg xmlns="http://www.w3.org/2000/svg" width="300" height="80" shape-rendering="crispEdges" stroke-linecap="square" stroke="rgb(0,0,0)" stroke-width="1">
<rect id="background" x="0" y="0" width="3201" height="1677" fill="rgb(255,255,255)" stroke-width="0"/>
<line x1="0.5" y1="71.5" x2="71.2106781186546" y2="0.7893218813452"/>
<line x1="71.2106781186546" y1="0.7893218813452" x2="141.9213562373093" y2="71.5"/>
<line x1="141.9213562373093" y1="71.5" x2="212.632034355964" y2="0.7893218813452"/>
<line x1="212.632034355964" y1="0.7893218813452" x2="283.3427124746186" y2="71.5"/>
</svg>html svg
edited Nov 12 '18 at 23:19
Kaiido
43.7k465105
asked Nov 12 '18 at 22:19
J. DoeJ. Doe
83
I have an SVG image that is being created and enhanced programatically. After creating it, it is drawn on a Canvas. However, the lines do not seem to have the same width, despite having the same value for stroke-width and the attribute shape-rendering set to crispEdges.
The coordinates are calculated in JavaScript (hence the weird numbers). However, some lines seem to be twice as thick as others (see example below). I don't understand why this happens or how I can fix it.
My best guess is that the calculations are not precise enough and the angle is not actually a perfect 45°, resulting in a thicker line. But when I calculate the slope by hand, it's 45°.
Setting shape-rendering to auto theoretically works, but the circumstances require the lines to be not smooth.
<svg xmlns="http://www.w3.org/2000/svg" width="300" height="80" shape-rendering="crispEdges" stroke-linecap="square" stroke="rgb(0,0,0)" stroke-width="1">
<rect id="background" x="0" y="0" width="3201" height="1677" fill="rgb(255,255,255)" stroke-width="0"/>
<line x1="0.5" y1="71.5" x2="71.2106781186546" y2="0.7893218813452"/>
<line x1="71.2106781186546" y1="0.7893218813452" x2="141.9213562373093" y2="71.5"/>
<line x1="141.9213562373093" y1="71.5" x2="212.632034355964" y2="0.7893218813452"/>
<line x1="212.632034355964" y1="0.7893218813452" x2="283.3427124746186" y2="71.5"/>
</svg><svg xmlns="http://www.w3.org/2000/svg" width="300" height="80" shape-rendering="crispEdges" stroke-linecap="square" stroke="rgb(0,0,0)" stroke-width="1">
<rect id="background" x="0" y="0" width="3201" height="1677" fill="rgb(255,255,255)" stroke-width="0"/>
<line x1="0.5" y1="71.5" x2="71.2106781186546" y2="0.7893218813452"/>
<line x1="71.2106781186546" y1="0.7893218813452" x2="141.9213562373093" y2="71.5"/>
<line x1="141.9213562373093" y1="71.5" x2="212.632034355964" y2="0.7893218813452"/>
<line x1="212.632034355964" y1="0.7893218813452" x2="283.3427124746186" y2="71.5"/>
</svg><svg xmlns="http://www.w3.org/2000/svg" width="300" height="80" shape-rendering="crispEdges" stroke-linecap="square" stroke="rgb(0,0,0)" stroke-width="1">
<rect id="background" x="0" y="0" width="3201" height="1677" fill="rgb(255,255,255)" stroke-width="0"/>
<line x1="0.5" y1="71.5" x2="71.2106781186546" y2="0.7893218813452"/>
<line x1="71.2106781186546" y1="0.7893218813452" x2="141.9213562373093" y2="71.5"/>
<line x1="141.9213562373093" y1="71.5" x2="212.632034355964" y2="0.7893218813452"/>
<line x1="212.632034355964" y1="0.7893218813452" x2="283.3427124746186" y2="71.5"/>
</svg>html svg
html svg
edited Nov 12 '18 at 23:19
Kaiido
43.7k465105
asked Nov 12 '18 at 22:19
J. DoeJ. Doe
83
edited Nov 12 '18 at 23:19
Kaiido
43.7k465105
asked Nov 12 '18 at 22:19
J. DoeJ. Doe
83
edited Nov 12 '18 at 23:19
Kaiido
43.7k465105
edited Nov 12 '18 at 23:19
Kaiido
43.7k465105
edited Nov 12 '18 at 23:19
Kaiido
43.7k465105
43.7k465105
asked Nov 12 '18 at 22:19
J. DoeJ. Doe
83
asked Nov 12 '18 at 22:19
J. DoeJ. Doe
83
asked Nov 12 '18 at 22:19
J. DoeJ. Doe
83
83
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
The purpose of the crispEdges attribute is to accentuate the contrast between edges in your picture, not to ensure that strokes are drawn with the same width.
You probably want to use geometricPrecision instead. However, if it's important to use crisp edges for some reason, try drawing your lines with the same gradients and with their start/end points aligned to the pixel grid (ideally, offset by 0.5 pixels).
Here's your SVG, with minor modifications to ensure the stroke width appears consistent:
<svg xmlns="http://www.w3.org/2000/svg" width="300" height="80" shape-rendering="crispEdges" stroke-linecap="square" stroke="rgb(0,0,0)" stroke-width="1">
<rect id="background" x="0" y="0" width="300" height="80" fill="rgb(255,255,255)" stroke-width="0"/>
<line x1="0.5" y1="71.5" x2="71.5" y2="0.5"/>
<line x1="71.5" y1="0.5" x2="142.5" y2="71.5"/>
<line x1="142.5" y1="71.5" x2="213.5" y2="0.5"/>
<line x1="213.5" y1="0.5" x2="284.5" y2="71.5"/>
</svg>answered Nov 12 '18 at 23:03
squeamish ossifragesqueamish ossifrage
17k32361
The problem turned out to be that it's not possible to always align the lines perfectly with the pixel grid without losing precision. Since the input (the lines) is user-generated, there is nothing I can do if I want to keep my crisp edges, so instead I opted to increase the default stroke-width, which makes the problem "disappear".
– J. Doe
Nov 18 '18 at 23:36
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
);
);
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%2f53270920%2flines-in-svg-not-the-same-size-despite-crispedges%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
The purpose of the crispEdges attribute is to accentuate the contrast between edges in your picture, not to ensure that strokes are drawn with the same width.
You probably want to use geometricPrecision instead. However, if it's important to use crisp edges for some reason, try drawing your lines with the same gradients and with their start/end points aligned to the pixel grid (ideally, offset by 0.5 pixels).
Here's your SVG, with minor modifications to ensure the stroke width appears consistent:
<svg xmlns="http://www.w3.org/2000/svg" width="300" height="80" shape-rendering="crispEdges" stroke-linecap="square" stroke="rgb(0,0,0)" stroke-width="1">
<rect id="background" x="0" y="0" width="300" height="80" fill="rgb(255,255,255)" stroke-width="0"/>
<line x1="0.5" y1="71.5" x2="71.5" y2="0.5"/>
<line x1="71.5" y1="0.5" x2="142.5" y2="71.5"/>
<line x1="142.5" y1="71.5" x2="213.5" y2="0.5"/>
<line x1="213.5" y1="0.5" x2="284.5" y2="71.5"/>
</svg>answered Nov 12 '18 at 23:03
squeamish ossifragesqueamish ossifrage
17k32361
The problem turned out to be that it's not possible to always align the lines perfectly with the pixel grid without losing precision. Since the input (the lines) is user-generated, there is nothing I can do if I want to keep my crisp edges, so instead I opted to increase the default stroke-width, which makes the problem "disappear".
– J. Doe
Nov 18 '18 at 23:36
add a comment |
The purpose of the crispEdges attribute is to accentuate the contrast between edges in your picture, not to ensure that strokes are drawn with the same width.
You probably want to use geometricPrecision instead. However, if it's important to use crisp edges for some reason, try drawing your lines with the same gradients and with their start/end points aligned to the pixel grid (ideally, offset by 0.5 pixels).
Here's your SVG, with minor modifications to ensure the stroke width appears consistent:
<svg xmlns="http://www.w3.org/2000/svg" width="300" height="80" shape-rendering="crispEdges" stroke-linecap="square" stroke="rgb(0,0,0)" stroke-width="1">
<rect id="background" x="0" y="0" width="300" height="80" fill="rgb(255,255,255)" stroke-width="0"/>
<line x1="0.5" y1="71.5" x2="71.5" y2="0.5"/>
<line x1="71.5" y1="0.5" x2="142.5" y2="71.5"/>
<line x1="142.5" y1="71.5" x2="213.5" y2="0.5"/>
<line x1="213.5" y1="0.5" x2="284.5" y2="71.5"/>
</svg>answered Nov 12 '18 at 23:03
squeamish ossifragesqueamish ossifrage
17k32361
The problem turned out to be that it's not possible to always align the lines perfectly with the pixel grid without losing precision. Since the input (the lines) is user-generated, there is nothing I can do if I want to keep my crisp edges, so instead I opted to increase the default stroke-width, which makes the problem "disappear".
– J. Doe
Nov 18 '18 at 23:36
add a comment |
The purpose of the crispEdges attribute is to accentuate the contrast between edges in your picture, not to ensure that strokes are drawn with the same width.
You probably want to use geometricPrecision instead. However, if it's important to use crisp edges for some reason, try drawing your lines with the same gradients and with their start/end points aligned to the pixel grid (ideally, offset by 0.5 pixels).
Here's your SVG, with minor modifications to ensure the stroke width appears consistent:
<svg xmlns="http://www.w3.org/2000/svg" width="300" height="80" shape-rendering="crispEdges" stroke-linecap="square" stroke="rgb(0,0,0)" stroke-width="1">
<rect id="background" x="0" y="0" width="300" height="80" fill="rgb(255,255,255)" stroke-width="0"/>
<line x1="0.5" y1="71.5" x2="71.5" y2="0.5"/>
<line x1="71.5" y1="0.5" x2="142.5" y2="71.5"/>
<line x1="142.5" y1="71.5" x2="213.5" y2="0.5"/>
<line x1="213.5" y1="0.5" x2="284.5" y2="71.5"/>
</svg>answered Nov 12 '18 at 23:03
squeamish ossifragesqueamish ossifrage
17k32361
The purpose of the crispEdges attribute is to accentuate the contrast between edges in your picture, not to ensure that strokes are drawn with the same width.
You probably want to use geometricPrecision instead. However, if it's important to use crisp edges for some reason, try drawing your lines with the same gradients and with their start/end points aligned to the pixel grid (ideally, offset by 0.5 pixels).
Here's your SVG, with minor modifications to ensure the stroke width appears consistent:
<svg xmlns="http://www.w3.org/2000/svg" width="300" height="80" shape-rendering="crispEdges" stroke-linecap="square" stroke="rgb(0,0,0)" stroke-width="1">
<rect id="background" x="0" y="0" width="300" height="80" fill="rgb(255,255,255)" stroke-width="0"/>
<line x1="0.5" y1="71.5" x2="71.5" y2="0.5"/>
<line x1="71.5" y1="0.5" x2="142.5" y2="71.5"/>
<line x1="142.5" y1="71.5" x2="213.5" y2="0.5"/>
<line x1="213.5" y1="0.5" x2="284.5" y2="71.5"/>
</svg><svg xmlns="http://www.w3.org/2000/svg" width="300" height="80" shape-rendering="crispEdges" stroke-linecap="square" stroke="rgb(0,0,0)" stroke-width="1">
<rect id="background" x="0" y="0" width="300" height="80" fill="rgb(255,255,255)" stroke-width="0"/>
<line x1="0.5" y1="71.5" x2="71.5" y2="0.5"/>
<line x1="71.5" y1="0.5" x2="142.5" y2="71.5"/>
<line x1="142.5" y1="71.5" x2="213.5" y2="0.5"/>
<line x1="213.5" y1="0.5" x2="284.5" y2="71.5"/>
</svg><svg xmlns="http://www.w3.org/2000/svg" width="300" height="80" shape-rendering="crispEdges" stroke-linecap="square" stroke="rgb(0,0,0)" stroke-width="1">
<rect id="background" x="0" y="0" width="300" height="80" fill="rgb(255,255,255)" stroke-width="0"/>
<line x1="0.5" y1="71.5" x2="71.5" y2="0.5"/>
<line x1="71.5" y1="0.5" x2="142.5" y2="71.5"/>
<line x1="142.5" y1="71.5" x2="213.5" y2="0.5"/>
<line x1="213.5" y1="0.5" x2="284.5" y2="71.5"/>
</svg>answered Nov 12 '18 at 23:03
squeamish ossifragesqueamish ossifrage
17k32361
answered Nov 12 '18 at 23:03
squeamish ossifragesqueamish ossifrage
17k32361
answered Nov 12 '18 at 23:03
squeamish ossifragesqueamish ossifrage
17k32361
answered Nov 12 '18 at 23:03
squeamish ossifragesqueamish ossifrage
17k32361
17k32361
The problem turned out to be that it's not possible to always align the lines perfectly with the pixel grid without losing precision. Since the input (the lines) is user-generated, there is nothing I can do if I want to keep my crisp edges, so instead I opted to increase the default stroke-width, which makes the problem "disappear".
– J. Doe
Nov 18 '18 at 23:36
add a comment |
The problem turned out to be that it's not possible to always align the lines perfectly with the pixel grid without losing precision. Since the input (the lines) is user-generated, there is nothing I can do if I want to keep my crisp edges, so instead I opted to increase the default stroke-width, which makes the problem "disappear".
– J. Doe
Nov 18 '18 at 23:36
The problem turned out to be that it's not possible to always align the lines perfectly with the pixel grid without losing precision. Since the input (the lines) is user-generated, there is nothing I can do if I want to keep my crisp edges, so instead I opted to increase the default stroke-width, which makes the problem "disappear".
– J. Doe
Nov 18 '18 at 23:36
The problem turned out to be that it's not possible to always align the lines perfectly with the pixel grid without losing precision. Since the input (the lines) is user-generated, there is nothing I can do if I want to keep my crisp edges, so instead I opted to increase the default stroke-width, which makes the problem "disappear".
– J. Doe
Nov 18 '18 at 23:36
add a comment |
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.
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%2f53270920%2flines-in-svg-not-the-same-size-despite-crispedges%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
