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
15 Replies
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
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 ?
Generators | Haikei
Our SVG generators let you discover, customize, randomize, and export generative SVG design assets to use in your favorite design tools.
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
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?
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.
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
Interesting was there a mask involved or anything ?
Same issue here with Haikei on my end
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
some before and after deletion pics (deleted only the top line)
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
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.this is such a strange behavior to be honest
Thanks, this is a simple solution I can use as a workaround, thanks!