Problema de compatibilidad entre navegadores de texto SVG

El problema es que el SVG está usando texto en lugar de rutas, el navegador está renderizando ese texto con su propio motor de renderizado de texto, lo que puede generar inconsistencias con el nombre y la escala de las fuentes (igual que el texto HTML y CSS normal)

Una solución es delinear el texto antes de exportar el SVG.

Haga clic con el botón derecho en el texto o Create Outlinesvaya aObject -> Expand

El problema es que el espaciado de letras de su SVG no se cambia según el tamaño de la pantalla como las otras partes. Dado que los rectángulos no están relacionados con el texto, simplemente se colocan detrás de ellos, no contienen bien el texto.

La solución más sencilla sería exportar el SVG como una ruta en lugar de como texto, pero esa no es una solución perfecta porque evita que los usuarios seleccionen el texto.

Si desea que los usuarios conserven esa capacidad, es muy probable que haya una manera de arreglar su SVG mientras lo conserva como texto, pero dado que solo está tratando con texto y algunos rectángulos y lo está haciendo para un sitio web, le recomiendo use HTML simple + CSS para volver a crear esto.

El único inconveniente es que tendrá que alojar Myriad Pro usted mismo o usarlo desde Typekit porque no es gratuito de forma predeterminada . Puede usar una fuente alternativa, yo uso PT sans si no es compatible a continuación.

HTML:

<div class="site-title-container">
    <h1 class="site-title first-line"><span>C</span>agdas</h1>
    <h1 class="site-title second-line"><span>Y</span>onder</h1>
</div>

CSS:

@import url(https://fonts.googleapis.com/css?family=PT+Sans);

/* For demo only - not recommended */
body { font-size: 2vw; }
/* End of demo only section */


.site-title-container {
    font-family: "Myriad Pro", 'PT Sans', sans-serif;
}
.site-title {
    position: relative;
    color: white;
    padding: 0.3em 0.7em;
    display: inline-block;
    font-size: 2.5em;
    letter-spacing: 0.2em;
}
.site-title span {
    color: #3580B9;
}
.site-title.first-line::before {
    content: '';
    background-color: #161616;
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}
.site-title.second-line {
    position: absolute;
    top: 1.1em;
    left: 1em;
    background-color: #161616;
    z-index: -1;
}

Enlace de demostración