⚡️ Optimize resize arrow #2550
⚡️ Optimize resize arrow #2550
Conversation
|
thanks, I optimize svg at work all the time and suprised I didn't see this one... |
|
It seems to me this change is making the arrow look big and blurry. Before: It's been a while since I delved into the nitty-gritty of vectors, so I don't know what the best fix is, but I was able improve it to my eye by setting Perhaps someone else has a better idea? Either way, I think there's a minor regression here. |
|
@allen-pattern good catch. I had not checked it... if you can submit a fix that would be great. weird as the size is also there |
|
Might be a browser issue. Safari is known to be not great at SVG rendering for example. It can be also fixed from CSS if I'm not mistaken, without changing the SVG itself (whatever keeps the file smaller should be the best option). |
|
I am using Brave. I tried briefly to fix with CSS and wasn't able to, but maybe I missed something. |
|
After taking a look at the CSS I found the issue: The container for the SVG background is 20x20px, while the SVG is 16x16px. Setting |
|
I was going to say I can see that on Chrome as well, and the resize image is actually smaller then the click region and the windows default icon (seems like they should match) yet when always showin (eg: mobile) having a smaller icon might be a good thing yet have a bigger finger click region. so maybe leave alone (I commited his size fix) |
|
@allen-pattern would you mind checking this out? #2592 If that doesn't work then we can do the |
|
@adumesny both PRs have the same effect, the difference is that the SVG is a little bit bigger with the |
|
@allen-pattern thank you! ✨ |
|
I like the definition of the before (big data) better - thinner line which made the arrow heads standout more |
|
I actually rewrote it from scratch by hand. I'm kinda an SVG nerd. The previous arrow code decoded and formatted (I added comments with explanations): <!--
❗️ The XML header is not necessary
-->
<?xml version="1.0" encoding="iso-8859-1"?>
<!--
❗️ Comments aren't necessary either, even less if they are just about the generator
-->
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!--
❗️ Doctype can also be removed
-->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!--
❗️ In the SVG tag below:
- xmlns:xlink="http://www.w3.org/1999/xlink": Not necessary when no links are used.
- version: Inferred by the browser.
- id: Not necessary when not inlined as SVG directly.
- x, y: Not necessary either because that's the default
- width, height: Not necessary when using a responsive viewBox (ideal for CSS).
- viewBox: The values here should be a red flag when the actual size will be ~20px. Also it should be a square, but this is slightly taller.
- style: Not necessary, it can be styled from attributes.
- xml:space: Not necessary when drawing the path correctly.
-->
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1"
id="Capa_1"
x="0px"
y="0px"
width="16px"
height="16px"
viewBox="0 0 511.626 511.627"
style="enable-background: new 0 0 511.626 511.627"
xml:space="preserve"
>
<!--
❗️ We don't need to group when is a single path
-->
<g>
<!--
❗️ The complexity here should be a red flag as well, when the idea is to draw a simple arrow. It contours the entire shape instead of just using strokes. Also `fill` color is in long form format, when it can simply be #666
-->
<path
d="M328.906,401.994h-36.553V109.636h36.553c4.948,0,9.236-1.809,12.847-5.426c3.613-3.615,5.421-7.898,5.421-12.845 c0-4.949-1.801-9.231-5.428-12.851l-73.087-73.09C265.044,1.809,260.76,0,255.813,0c-4.948,0-9.229,1.809-12.847,5.424 l-73.088,73.09c-3.618,3.619-5.424,7.902-5.424,12.851c0,4.946,1.807,9.229,5.424,12.845c3.619,3.617,7.901,5.426,12.85,5.426 h36.545v292.358h-36.542c-4.952,0-9.235,1.808-12.85,5.421c-3.617,3.621-5.424,7.905-5.424,12.854 c0,4.945,1.807,9.227,5.424,12.847l73.089,73.088c3.617,3.617,7.898,5.424,12.847,5.424c4.95,0,9.234-1.807,12.849-5.424 l73.087-73.088c3.613-3.62,5.421-7.901,5.421-12.847c0-4.948-1.808-9.232-5.421-12.854 C338.142,403.802,333.857,401.994,328.906,401.994z"
fill="#666666"
/>
</g>
<!--
❗️ All this empty groups aren't necessary either:
-->
<g></g>
<g></g>
<g></g>
<g></g>
<g></g>
<g></g>
<g></g>
<g></g>
<g></g>
<g></g>
<g></g>
<g></g>
<g></g>
<g></g>
<g></g>
</svg>The new code (also with comments and formatted): <!--
❗️ Styles set in attributes in the header directly because is a single path.
-->
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
stroke="#666"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
viewBox="0 0 20 20"
>
<!--
❗️ Stroke instead of contouring the entire shape.
-->
<path d="m10 3 2 2H8l2-2v14l-2-2h4l-2 2" />
</svg>Here's a side-by-side comparison visually (old first, new second):
The difference is minimal (the arrow is a little bit chubbier), but the code is much more readable, smaller, and maintainable. That's why also it took me a minute or so to update it to have the padding required without setting |
|
the arrow head need to be more pointy (less rounded corners and more like a sharp arrow). looks like a nose or fawl piece right now :) FYI I've been using https://jakearchibald.github.io/svgomg/ to shrink a lot of my svg at work (and also modifying the code directly). Not sure what tool you've used... |
|
I used VSCode and wrote it by hand. As I mentioned, I'm an SVG nerd. Even using <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 511.626 511.627"><path fill="#666" d="M328.906 401.994h-36.553V109.636h36.553c4.948 0 9.236-1.809 12.847-5.426 3.613-3.615 5.421-7.898 5.421-12.845 0-4.949-1.801-9.231-5.428-12.851l-73.087-73.09C265.044 1.809 260.76 0 255.813 0c-4.948 0-9.229 1.809-12.847 5.424l-73.088 73.09c-3.618 3.619-5.424 7.902-5.424 12.851 0 4.946 1.807 9.229 5.424 12.845 3.619 3.617 7.901 5.426 12.85 5.426h36.545v292.358h-36.542c-4.952 0-9.235 1.808-12.85 5.421-3.617 3.621-5.424 7.905-5.424 12.854 0 4.945 1.807 9.227 5.424 12.847l73.089 73.088c3.617 3.617 7.898 5.424 12.847 5.424 4.95 0 9.234-1.807 12.849-5.424l73.087-73.088c3.613-3.62 5.421-7.901 5.421-12.847 0-4.948-1.808-9.232-5.421-12.854-3.611-3.613-7.896-5.421-12.847-5.421z"/></svg>The new one (198b): <svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="#666" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 20 20"><path d="m10 3 2 2H8l2-2v14l-2-2h4l-2 2"/></svg>It's 75% smaller. And again, is more readable because I can tell what the path is doing in the small version, but the big one is drawing the whole arrow point by point including corners. Even if you absolutely want not to have it rounded, I would suggest redoing the asset in a smaller canvas so the values used for the path are integers instead of floats, making it more portable. Another alternative is to make the arrow points open, like in the Heroicons library, which helps with clarity in smaller sizes. |
Description
The inline resize arrow in CSS has the following unoptimized code:
And on top of that, it's encoded in base 64, making it even heavier. This PR optimizes said inline SVG to be this:
Making the arrow ~88% lighter from 1.82 KB to 225 B. Also, because we don't encode it in base 64, it is easier to change details like the color, the thickness, etc.