SVG Image creating a funny outline

CodePen: https://codepen.io/Smgy94/pen/WNmXGME?editors=1100 Hey guys! I've created an SVG Wave using https://www.shapedivider.app/. I've noticed that on mobile view the SVG wave has a thin black outline (see screenshot). This isn't an issue on desktop, only on mobile and some tablet devices. Is this a known issue ? Can it be resolved ? Thanks!
Shape Divider App
Create fully responsive shape dividers for your next web project
No description
15 Replies
celine
celine10mo ago
Hey, seems that SVG's path is kinda unfinished?? Lemme explain Every time your shape goes through the middle of the pixels, you'll get gray pixels because of the anti-aliasing that 2D renderers use. In such cases, a LIKELY solution is to use the SVG shape-rendering="crispEdges" attribute to disable anti-aliasing by the browser. https://developer.mozilla.org/ru/docs/Web/SVG/Attribute/shape-rendering. This value indicates that the user agent shall attempt to emphasize the contrast between clean edges of artwork over rendering speed and geometric precision. To achieve crisp edges, the user agent might turn off anti-aliasing for all lines and curves or possibly just for straight lines which are close to vertical or horizontal. Also, the user agent might adjust line positions and line widths to align edges with device pixels. However, there is no universal, 100% solution to the pixelization problem. Since 2D rendering depends on the installed operating system, its settings, video card and what browser is used. You can use a complex approach: Use integer values of SVG image coordinates If you take a ready-made image with fractional values, you can process it with SVG optimizer Set integer value of viewBox Use attribute shape-rendering ="crispEdges" .. or.. maybe use a different SVG wave generator
MDN Web Docs
shape-rendering - SVG | MDN
« Справочник SVG атрибутов
smgy94
smgy9410mo ago
Ah ok thanks so much for the explanation. I'm going to research some new wave generators to fix this issue Interestingly, I've tried 3 other SVG generator and also used shape-rendering="crispEdges" but the issue still persists on iPhone (Safari / Chrome) on Mobile / Mobile view in Dev Tools. Maybe I should just use a .png image instead, although I don't like that it's not as responsive Do you have any Wave generators that you could recommend ?
clevermissfox
clevermissfox10mo ago
Generators | Haikei
Our SVG generators let you discover, customize, randomize, and export generative SVG design assets to use in your favorite design tools.
celine
celine10mo ago
I've never used wave generators. Maybe try using a .png that's 2x or 4x the size of the past SVG, and then through CSS scale reduce it to the right value, but this solution is so meh, yet I don't have any other solutions on my mind
capt_uhu
capt_uhu10mo ago
i'm curious as to why the shapedivider.app generator wraps the SVG tag in a wrapper DIV? It seems unnecessary (unless i'm missing something) and could potentially be causing the 1ish px line issue?
clevermissfox
clevermissfox10mo ago
It’s generated for a shape divider , so to separate one section from another. SVGs fill their container by default so just plopping it into the body would probably have their support email blowing up with people wondering why it’s so big.
celine
celine10mo ago
it's not about the HTML elements, it's more about the rendering and SVG structure, I've tried to play with SVG's path and some editors showed that provided SVG has a black (#000) border of 1px, however removing it completely broke the wave
clevermissfox
clevermissfox10mo ago
Interesting was there a mask involved or anything ?
smgy94
smgy9410mo ago
Same issue here with Haikei on my end
celine
celine10mo ago
No, it wasn't the mask. So, first of all, I inspected the element and it points to a path in the SVG. Path is basically a list of instructions (i.e. pick up the pen and move it to { x, y }, put down a pen and draw a bezier curve etc. When I first saw the svg code I thought the problem was H0 in path because that is responsible for the straight horizontal line, however as I said earlier after removing it the wave breaks down. The SVG editor things I used: https://mediamodifier.com/svg-editor (this one showed the border of #000 of 1px, but I couldn't find a way to remove it) https://yqnn.github.io/svg-path-editor/ (here you can see how the wave breaks when you delete that H0 line)
SVG Editor - Mediamodifier
Free SVG Editor - Create & Edit SVG files online.
SvgPathEditor
Online editor to create and manipulate SVG paths
celine
celine10mo ago
some before and after deletion pics (deleted only the top line)
No description
No description
celine
celine10mo ago
It might be possible to just change a couple curves that result in this. I guess the ones which are "connected" to the top line are the problem ones
capt_uhu
capt_uhu10mo ago
wasn't suggesting not having any styling on it at all. Idea was to move the wave class onto the svg element itself. the easiest way I found to get rid of the gray line on the top of the element pictured in the OP is just to change top: 0 to top: -1px; in the wave class.
celine
celine10mo ago
this is such a strange behavior to be honest
smgy94
smgy9410mo ago
Thanks, this is a simple solution I can use as a workaround, thanks!
Want results from more Discord servers?
Add your server