Líneas extrañas en svg en el navegador que no son visibles en AI

Estoy tratando de crear un gráfico vectorial simple para una barra. Parece que lo quiero en AI, pero tiene algunas líneas extrañas en los navegadores. Mire la imagen y avíseme si sabe cuál puede ser el motivo y cómo deshacerse de estas líneas.

Bar entonces parece

SVG en cuestión

    <?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve">
<style type="text/css">
    .st0{fill:url(#SVGID_1_);}
    .st1{fill:#2C5CA6;}
    .st2{fill:url(#SVGID_2_);}
    .st3{fill:#A9A9A9;}
</style>
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="5" y1="1" x2="5" y2="19" gradientTransform="matrix(1 0 0 -1 0 20)">
    <stop  offset="0" style="stop-color:#2C5CD1"/>
    <stop  offset="0.1453" style="stop-color:#2C5DD5"/>
    <stop  offset="0.2959" style="stop-color:#2C61E2"/>
    <stop  offset="0.4484" style="stop-color:#2D67F6"/>
    <stop  offset="0.5" style="stop-color:#2D6AFF"/>
    <stop  offset="0.5516" style="stop-color:#2D67F6"/>
    <stop  offset="0.7041" style="stop-color:#2C61E2"/>
    <stop  offset="0.8547" style="stop-color:#2C5DD5"/>
    <stop  offset="1" style="stop-color:#2C5CD1"/>
</linearGradient>
<rect y="1" class="st0" width="10" height="18"/>
<rect class="st1" width="10" height="1"/>
<rect y="19" class="st1" width="10" height="1"/>
<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="15" y1="1" x2="15" y2="19" gradientTransform="matrix(1 0 0 -1 0 20)">
    <stop  offset="0" style="stop-color:#D0D0D0"/>
    <stop  offset="0.1781" style="stop-color:#CCCCCC"/>
    <stop  offset="0.3622" style="stop-color:#BFBFBF"/>
    <stop  offset="0.5" style="stop-color:#B1B1B1"/>
    <stop  offset="0.6378" style="stop-color:#BFBFBF"/>
    <stop  offset="0.8219" style="stop-color:#CCCCCC"/>
    <stop  offset="1" style="stop-color:#D0D0D0"/>
</linearGradient>
<rect x="10" y="1" class="st2" width="10" height="18"/>
<rect x="10" class="st3" width="10" height="1"/>
<rect x="10" y="19" class="st3" width="10" height="1"/>
</svg>
No creé esto como una respuesta porque no sé por qué se produce esto, pero hay un desplazamiento de 1px entre sí. Cambié manualmente parte del código para deshacerme del desplazamiento. Puede consultar el código: jsfiddle.net/j5dzfc12 . Puede ver esto fácilmente si agrega un color de fondo como cuerpo {fondo: rojo;}
@AndrewH hmm, creo que en realidad es 0.05px, no 1px. Esto es bastante extraño. Estas líneas parecen ser espacios entre rectángulos, aunque se supone que no deberían estar allí.
Los productos de Adobe a veces hacen cosas no intuitivas con la alineación al habilitar, deshabilitar o editar el tamaño del trazo. Quizás de aquí es de donde vino la compensación. Tenga en cuenta también que debido al redondeo, un desplazamiento de .5 px será invisible según el factor de escala/zoom. quizás su nivel de zoom de Illustrator enmascare el problema. Cuando ctrl+scroll el SVG en mi navegador, el espacio desaparece y vuelve a aparecer.

Respuestas (1)

La línea del cabello es causada por el redondeo. Estás mostrando una imagen de 20px² en un tamaño mucho mayor que eso. El navegador e Illustrator tienen diferencias de opinión sobre cómo se debe manejar esto, pero no habría ni un pelo si representara la imagen en su tamaño original (20 px x 20 px).

La severidad del redondeo dicta qué tan notable es la línea del cabello. Puede verlo entrar y salir gradualmente en esta demostración :

Reducir y ampliar la imagen

Con eso en mente, puede diseñar su imagen en torno a esto y evitar la representación no deseada. Superponga formas en lugar de unirlas entre sí o pegue un rectángulo detrás de la obra de arte y rellénelo con el color apropiado.

En su caso particular, puede usar 4 rectángulos en lugar de 6. Haga los rectángulos superior/inferior en toda su altura y envíelos hacia atrás. Eso es lo que hice en esta demostración actualizada :

Reducir y ampliar la imagen optimizada

Líneas extrañas en svg en el navegador que no son visibles en AI
RespuestasAquíPolítica de privacidad1y, 0v