Brecha en la repetición vertical del fondo svg

Question

Tengo un div simple, con un SVG establecido como imagen de fondo con repetición vertical. En Chrome y Firefox, dependiendo del tamaño de la pantalla, veo una brecha en diferentes tamaños (cambie el tamaño de la ventana).

https://jsfiddle.net/bartadaniel/ejtvy7po/9/

.bg {
  width: 50%;
  height: 2000px;
  display: block;
  background-repeat: repeat;
  background-size: contain;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='272' height='171' viewBox='0 0 272 171'> <rect class='cls-1' width='272' height='171' fill='green'/></svg>");
}

<div class="bg"></div>

¿Hay alguna razón para esto?

html css svg

1

Dániel Barta 29 oct. 2019 a las 18:42

Answer 1

Desafortunadamente, la única solución que abordó este problema de manera confiable fue convertir el SVG a un formato basado en píxeles, como JPG. Aparentemente, los navegadores no tienen problemas para escalar píxeles, pero causan efectos secundarios en los bordes al escalar formatos basados en vectores.

0

Dániel Barta 4 nov. 2019 a las 09:28

Answer 2

Eso sucede debido a una combinación de background-size:contain y las dimensiones en píxeles de su svg.

Estás viendo que el navegador intenta escalar la imagen para que nada desborde los límites de tu <div>. Cuando combina esa escala con dimensiones de píxeles de imagen de 171 (no se puede multiplicar uniformemente en 2000px), obtiene líneas que le muestran los subpíxeles que su navegador está tratando de mostrar.

Simplemente elimine el background-size:contain para resolverlo.

Editar:

En el caso de que necesite contener ancho, existen algunos trucos para ayudarlo a obtener un mejor resultado.

Haga que las dimensiones de la imagen de fondo sean múltiplos de 10. El cuadrado sería mejor con algo como 100x100px, pero también podría ser un rectángulo (trate de acercarse a su ancho objetivo) como 1000x100px.
Establezca background-size: 100% auto en lugar de contain. Esto estirará la imagen proporcionalmente para llenar el ancho del contenedor.
Use background-repeat: repeat-y para forzar una repetición vertical para que el navegador solo esté haciendo los cálculos en un eje.

3

Bryce Howitson 29 oct. 2019 a las 16:54

Answer 3

Es un problema de representación de subpíxeles. Cada navegador se redondea de manera diferente y la representación de subpíxeles SVG está bastante desordenada.

Le sugiero que edite su contenido SVG para hacerlo un poco más grande que su viewbox.

<svg xmlns='http://www.w3.org/2000/svg' width='272' height='171' viewBox='0 0 272 171'>
  <rect class='cls-1' y='-.5' width='272' height='172' fill='green'/>
</svg>

Obviamente, este truco no funciona para todos los SVG de fondo, pero podría ser útil en su caso.

2

thetont 29 oct. 2019 a las 16:02

Brecha en la repetición vertical del fondo svg

3 respuestas

Nuevas preguntas

html