Rutas incorrectas en la fuente del icono generada a partir de SVG

Tengo una colección de iconos SVG simples exportados desde Illustrator. Estos contienen solo un <path>elemento para conformar el icono en sí y sin bordes. El formato SVG original parece ser correcto, pero dentro de la fuente generada, el borde del icono parece estar roto; mostrando esquinas afiladas y líneas irregulares. Para generar la fuente, estoy usando este script: https://github.com/nfroidure/gulp-iconfont .

¿Alguien sabe qué podría estar causando esto? ¿Está esto relacionado con el CSS? ¿La exportación de Illustrator? ¿O cómo se creó la fuente?

Aquí está el SVG original:

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"><title>users</title><g id="_973-user-toolbar_2x.png" data-name="973-user-toolbar@2x.png"><path d="M32.34,30.59A3.64,3.64,0,0,1,30,28.3c-.41-1.69,1.06-3.54,1.06-3.54h0c.11-.11,2-3.68,2-9.48C33,10.87,31.25,6,25,6s-8,4.87-8,9.29a21,21,0,0,0,1.91,9.42S20.41,26.6,20,28.3a3.63,3.63,0,0,1-2.35,2.29C8.62,33.4,3,34.71,3,37.25V40a2.15,2.15,0,0,0,2,2H45a2.15,2.15,0,0,0,2-2V37.25C47,34.71,41.38,33.4,32.34,30.59ZM45,39.91l-.09.09H5.09L5,39.91V37.34c.68-1,9.82-3.79,9.82-3.79s6.21-1.39,7.13-4.79c.55-2.3-.88-4.48-1.37-5.14A20,20,0,0,1,19,15.29C19,10.45,21,8,25,8s6,2.45,6,7.29a20.05,20.05,0,0,1-1.58,8.27l-.67,1.09a5.89,5.89,0,0,0-.71,4.12c.83,3.47,6,4.45,7.13,4.78,4.29,1.3,9.13,2.78,9.81,3.79Z"/></g></svg>

Aquí cómo se ve.

SVG ORIGINALES:

SVG ORIGINALES

FUENTE UTILIZADA EN UN PROYECTO WEB:

FUENTE UTILIZADA EN UN PROYECTO WEB

Esto parece un problema de redondeo de ruta o un error de "tipo de esquina". También tenga en cuenta que cualquier valor calculado que no sea un número entero par se redondeará para que caiga "en un píxel", y cuanto más pequeño sea su tipo de letra, mayor será el impacto que tendrá dicho redondeo. Sería interesante ver el SVG original como SVG en lugar de PNG. Esto podría revelar algo que Illustrator admite pero que no es estrictamente SVG (etc.).
Edité la pregunta y agregué el código SVG. No es posible adjuntar archivos svg. Como puede ver, hay muchos valores que no son enteros. ¿Sabes si hay alguna forma de optimizar el SVG para el uso de fuentes? ¿Debería intentar especificar el "tipo de esquina" de alguna manera? Gracias

Respuestas (1)

Es casi seguro que es un problema con la fuente generada.

El LÉAME de gulp-iconfont dice:

Si algunos glifos de fuente no se convierten correctamente, debe agregar la normalize:trueopción y un fontHeight mayor que 1000 ( fontHeight: 1001).

Con respecto al SVG, también dice:

Preparando SVG

Tenga en cuenta que sus iconos SVG deben tener una altura lo suficientemente alta. 500 es mínimo . Si no desea cambiar su tamaño, puede probar a combinar fontHeighty la normalizeopción para obtener el tamaño correcto.

...

Guarde su archivo como SVG con la siguiente configuración:

  • Perfiles SVG: SVG 1.1
  • Tipo de fuente: SVG
  • Subconjunto de fuentes: Ninguno
  • Opciones Ubicación de la imagen: Incrustar
  • Opciones avanzadas
    • Propiedades CSS: atributos de presentación
    • Lugares decimales: 1
    • Codificación: UTF-8
    • Salida de menos elementos: comprobar

Su SVG está en un cuadro de visualización de 50 × 50, por lo que probablemente ese sea el problema. Debería intentar regenerar la fuente con su SVG redimensionado a un tamaño más apropiado y/o intentar generar usando alguna combinación de fontHeighty normalizeopciones.

También debe intentar reducir su SVG al mínimo necesario, así que elimine los grupos o elementos innecesarios.

Este es su SVG guardado de Illustrator a 1000 × 1000:

<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"
 width="1000px" height="1000px" viewBox="0 0 1000 1000" xml:space="preserve">
    <path d="M646.8,611.8c-22-7-39.3-24-46.8-45.8c-8.2-33.8,21.2-70.8,21.2-70.8l0,0c2.2-2.2,40-73.6,40-189.6C660,217.4,625,120,500,120s-160,97.4-160,185.8c-2,64.9,11.1,129.4,38.2,188.4c0,0,30,37.8,21.8,71.8c-7.5,21.9-24.9,38.9-47,45.8C172.4,668,60,694.2,60,745v55c1.5,21.5,18.5,38.5,40,40h800c21.5-1.5,38.5-18.5,40-40v-55C940,694.2,827.6,668,646.8,611.8zM900,798.2l-1.8,1.8H101.8l-1.8-1.8v-51.4c13.6-20,196.4-75.8,196.4-75.8s124.2-27.8,142.6-95.8c11-46-17.6-89.6-27.4-102.8C389.3,419.8,378.5,363,380,305.8C380,209,420,160,500,160s120,49,120,145.8c1.3,56.7-9.5,113.1-31.6,165.4L575,493c-14.7,24.8-19.7,54.1-14.2,82.4c16.6,69.4,120,89,142.6,95.6c85.8,26,182.6,55.6,196.2,75.8L900,798.2z"/>
</svg>

Tenga en cuenta que nunca he usado gulp-iconfont, por lo que solo estoy siguiendo las instrucciones en el LÉAME.

Lo siento, me perdí la parte donde dice que la altura debe ser de 500 por lo menos. Ambas soluciones escalan el svg o fontHeight: 1001 y normalizan: resuelve el problema
Rutas incorrectas en la fuente del icono generada a partir de SVG
RespuestasAquíPolítica de privacidad1y, 0v