1

Contexto: estoy cambiando algunos de mis íconos en WebP por gráficos SVG para reducir tamaño y solicitudes HTTP pasándolas directamente como base64.

Tengo un SVG que funciona como imagen de fondo para dar textura:

<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="15" height="15">
    <rect cx="0" cy="0" fill="#2a2a2a" width="15" height="15" />
    <path d="M 0 0 L 1 0 L 15 14 L 15 15 L 14 15 L 0 1 L 0 0" fill="#212124" />
    <path d="M 0 14 L 14 0 L 15 0 L 15 1 L 1 15 L 0 15" fill="#212124" />
</svg>

Y una página con el elemento en donde lo uso:

<!DOCTYPE HTML>
<html lang="es">
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <style>
            :root {
                /* Nota: este código base64 es exactamente el mismo código SVG de arriba */
               --texture-uri: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIiA/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4wLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL1RSLzIwMDEvUkVDLVNWRy0yMDAxMDkwNC9EVEQvc3ZnMTAuZHRkIj48c3ZnIHZlcnNpb249IjEuMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTUiIGhlaWdodD0iMTUiPjxyZWN0IGN4PSIwIiBjeT0iMCIgZmlsbD0iIzJhMmEyYSIgd2lkdGg9IjE1IiBoZWlnaHQ9IjE1IiAvPjxwYXRoIGQ9Ik0gMCAwIEwgMSAwIEwgMTUgMTQgTCAxNSAxNSBMIDE0IDE1IEwgMCAxIEwgMCAwIiBmaWxsPSIjMjEyMTI0IiAvPjxwYXRoIGQ9Ik0gMCAxNCBMIDE0IDAgTCAxNSAwIEwgMTUgMSBMIDEgMTUgTCAwIDE1IiBmaWxsPSIjMjEyMTI0IiAvPjwvc3ZnPg==);
            }

            body {
                background-color: #080808;
            }

            /* Elemento donde se presentan problemas */
            header {
                background-color: #474747;
                background-image: var(--texture-uri);
                background-size: 10px;
                filter: brightness(170%);
                padding: 1em;
                max-width: 100%;
                height: 2em;
                display: flex;
                align-items: center;
                justify-content: space-between;
                position: fixed;
                top: 0px;
                right: 0px;
                left: 0px;
                z-index: 100;
                border: 0.25px solid #fff;
                -webkit-touch-callout: none;
                -webkit-user-select: none;
                -khtml-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                user-select: none;
            }

            header label, header a, header div {
                height: auto;
                align-items: center;
                display: block;
                align: center;
            }

            header label img, header a img {
                text-align: center;
                align-items: center;
                align: center;
                display: block;
                margin: 100% 0;
            }

            header #left, header #right {
                position: absolute;
                width: auto;
                top: 0;
                bottom: 0;
                display: flex;
                align-items: center;
                padding: 0;
                margin: 0px;
                filter: none;
            }

            header #left {
                left: 0;
                justify-content: flex-start;
            }

            header #right {
                right: 0;
                justify-content: flex-end;
            }

            /* Otros elementos que considero necesarios para la muestra del problema */

            .icon, .icon * {
                width: 1.5em;
                height: 1.5em;
                padding: 1em;
                background-size: 80%;
                background-position: center;
                background-repeat: no-repeat;
                -webkit-touch-callout: none;
                -webkit-user-select: none;
                -khtml-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                user-select: none;
            }

            .icon * {
                padding: 0 !important;
                margin: 0 !important;
            }

            #logo {
                background: url("data:image/webp;base64,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");
                width: 5.774712643678161em;
                height: 1.6em;
                padding: 0px;
                background-size: 5.774712643678161em;
                margin: 0 1em;
            }

            #menuicon {
                cursor: pointer;
                background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIiA/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4wLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL1RSLzIwMDEvUkVDLVNWRy0yMDAxMDkwNC9EVEQvc3ZnMTAuZHRkIj48c3ZnIHZlcnNpb249IjEuMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PHJlY3QgeD0iMCIgeT0iMTQiIHdpZHRoPSIyMDAiIGhlaWdodD0iMTEiIHJ4PSI1IiByeT0iNiIgZmlsbD0iI2ZmZmZmZiI+PC9yZWN0PjxyZWN0IHg9IjAiIHk9Ijk0IiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjExIiByeD0iNSIgcnk9IjYiIGZpbGw9IiNmZmZmZmYiPjwvcmVjdD48cmVjdCB4PSIwIiB5PSIxNzQiIHdpZHRoPSIyMDAiIGhlaWdodD0iMTEiIHJ4PSI1IiByeT0iNiIgZmlsbD0iI2ZmZmZmZiI+PC9yZWN0Pjwvc3ZnPg==);
            }
        </style>
    </head>
    <body>
        <header>
            <div id="left">
                <label for="btn-menu" class="icon"><div id="menuicon"></div></label>
                <div id="logo"></div>
            </div>
        </header>
    </body>
</html>

El SVG se incluye bien, pero me causa unos errores de renderizado, que explico a continuación.

En condiciones normales, la imagen de fondo es gris con líneas negras diagonales:

introducir la descripción de la imagen aquí

Hasta aquí todo funciona de maravilla. El problema viene cuando le hago zoom a la página, que causa un comportamiento inesperado del fondo:

introducir la descripción de la imagen aquí

Al darle zoom a la imagen, se marcan unos bordes blancos alrededor del límite de la imagen (el fondo se repite). Es un problema de renderizado del fondo.

El problema se vuelve peor cuando nos vamos a viewports más grandes, digamos, una tablet/computadora:

introducir la descripción de la imagen aquí

He intentado de todo: cambiar el background-color del header, modificar el SVG, etc; pero no he logrado arreglar el error.

Soy nuevo usando los gráficos SVG y la codificación base64, y no sé si los errores de renderización son provocados por mi celular o de verdad hay algo mal en el código. Por si es necesario, las imágenes fueron tomadas en un iPhone 8+.
Me preocupa ese error ya que este error de renderizado puede presentarse en muchos dispositivos y molestar mucho.

¿Alguien sabe si esto se puede arreglar y cómo? Gracias y espero que me puedas ayudar. Puedo subir más cosas de ser necesario.

ACTUALIZACIÓN

Los SVG son imágenes de fondo. Los pongo con background-image en CSS.

3
  • No se si funcionara con tu caso pero podrias resetear los svg con border:none, outline: none; Commented el 28 dic. 2021 a las 9:36
  • @Hernán García ¿Cómo hago el reseteo correspondiente? Commented el 28 dic. 2021 a las 16:01
  • ahora viendolo en tamaño grande en el pc (antes lo vi en el cel) pienso que puedes tener el defecto en la propia imagen y nada tener que ver con el css Commented el 28 dic. 2021 a las 18:28

1 respuesta 1

0

Actualización e información de cómo arreglar el problema, por si les pasa algo así.

Resulta que el rect que puse en la imagen SVG era el causante del problema. Lo quité de la imagen SVG, puse el color de fondo directamente donde lo iba a usar, tipo:

.fondo {
    background-image: url("data:image/svg+xml;base64,<imagenEnBase64>");
    background-color: <el color que tenía el rect que puse para que funcionara como fondo>;
}

¿Cuál resultó ser el problema? Usé un rect para ponerle color de fondo a mi SVG, cosa que terminó en un error. Quité ese rect y puse el color de fondo directamente donde lo iba a usar, y el problema se solucionó.

Gracias a todos aquellos que me intentaron ayudar a arreglar este error. Espero esta información les sirva de algo.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.