la imagen svg se ve extraña en la página html

Así que tengo dos imágenes iguales, una es a SVGy la otra es PNG. Usé Inkscape para exportar PNGdesde el archivo SVG. El dilema con el que estoy atascado es que SVGlas líneas azules van mucho más allá del texto real, lo cual es algo que no quiero que suceda y me gustaría que se SVGviera exactamente igual PNG.

gracias, alex

Respuestas (2)

Su fuente fue reemplazada.

Compara cada personaje y verás algunas ligeras diferencias. El navegador es responsable de representar un archivo SVG. Si no tiene acceso a una fuente, o si no comprende la especificación de la fuente, volverá a una alternativa.

La solución es convertir el texto en rutas con Ctrl++ Shift. CEsto hará que su texto no se pueda editar, pero se representará correctamente.

Como regla general, siempre convierto texto en rutas en archivos SVG destinados a la web. Normalmente uso capas, de modo que una capa tenga el texto editable. Luego lo duplico, escondo el original y hago la conversión. De esta manera, puedo editar el texto nuevamente si lo necesito.

Desafortunadamente, esto invalidará algunas de las ventajas de usar SVG en primer lugar, como el tamaño del archivo, los textos que se pueden buscar, los que se pueden traducir automáticamente, los que se pueden hacer audibles con herramientas o transformar de otro modo con dispositivos para personas ciegas. Otras ventajas son que las correcciones son más fáciles en texto como texto. Guardar una copia de seguridad antes de transformar tiene otras desventajas, como más espacio de almacenamiento, gestionar dos archivos en lugar de uno, condicionar el flujo de trabajo...
Oh, después de leer de nuevo, veo que he supervisado la capa con el almacenamiento del texto de forma invisible. Supongo que en el color de fondo o en una capa debajo de una capa de fondo.
@userunknown Tienes razón sobre las ventajas/desventajas. Que yo sepa, no hay una manera de obtener una representación consistente del texto en los SVG producidos por Inkscape si el usuario no tiene esa fuente en su sistema, razón por la cual generalmente solo cambio el texto a las rutas. Sea o no el mejor método, es uno que al menos funciona sin dolores de cabeza. Ver Incrustar fuentes en Inkscape
Estoy de acuerdo y deseo que haya una mejor representación en los navegadores. Tal vez abra fuentes de referencia que podrían usarse a través de la web o descargarse una vez a su plataforma local; si desea o necesita usar algo más, aún puede hacerlo. Esperanzas, fantasías...

En primer lugar, el aspecto del archivo SVG depende de cómo lo represente el software actual. Significa que Explorer puede renderizarlo de manera diferente a Chrome, y FireFox lo renderizará ligeramente de otra manera ... De todos modos, si desea usar el archivo svg en otro software que no sea Inkscape, guárdelo como svg PLAIN (y no Inkscape svg)

En realidad, usar SVG simple no debería marcar la diferencia . La diferencia entre SVG simple e Inkscape es que la versión de Inkscape tiene almacenada información adicional con espacio de nombres (que es un SVG perfectamente válido y debería ser aceptable para cualquier renderizador de SVG; simplemente se ignorará).
1. En primer lugar, convertir texto en ruta no es una solución para la WEB. ¡El texto en la web debe estar indexado! 2. Así es, el uso de SVG simple NO DEBERÍA hacer ninguna diferencia, pero según mi experiencia, a veces lo hace (de lo contrario, no mencionaría esto).
Mantener el texto original en una capa diferente, como sugiero, mantiene el texto original en el archivo (suponiendo que los motores de búsqueda realmente indexen el contenido en archivos SVG), lo que abordaría el n. ° 1. Para el n.° 2, me encantaría ver un ejemplo (es una solicitud seria, no sarcástica). He estado usando Inkscape durante años y nunca encontré un beneficio al usar SVG simple.
¿Por qué "asumir" (en "asumir que los motores de búsqueda realmente indexan...")? Ejemplo de mi flujo de trabajo diario: cuando importo inkscape svg a blender, debe ser un svg simple.
¿Y por qué estás tan en desacuerdo con mi respuesta? svg es un lenguaje de marcado, al igual que lo hace html; por supuesto, cada navegador lo representará de su manera específica, las páginas html no son exactamente iguales en diferentes navegadores, eso no significa que las convertirá en imágenes. .
Convertir a texto en rutas en SVG no es el equivalente a convertir una página web en una imagen. Si se sustituye una fuente en un sitio web, en su mayor parte no sucederá nada malo. Los divs pueden expandirse, la página puede alargarse, etc., pero debería ser utilizable. Sin embargo, si su fuente se reemplaza en un SVG, puede cambiarla COMPLETAMENTE ya que el tamaño del texto puede cambiar mientras que las rutas no lo harán, lo que parece ser el problema en esta pregunta. Su respuesta no resolvería ese problema, por lo tanto, no estoy de acuerdo. (Para tu información, no voté negativo)
Por cierto, ocultar el texto editable en el svg es MUY INCORRECTO: Google puede verlo como un SEO negro y hacer que prohíba. No mencione que es solo una solución muy poco profesional. Es como hornear una imagen con texto y poner el texto en la etiqueta "alt",
"Convertir a texto en rutas en SVG no es el equivalente a convertir una página web en una imagen. Si se sustituye una fuente en un sitio web, en su mayor parte no pasará nada malo" - nada MALO, está bien, pero el texto no es un texto más... en nuestros días es muy importante. ¡Y lo más importante, PUEDE incrustar @font-face en su documento svg!
la imagen svg se ve extraña en la página html
RespuestasAquíPolítica de privacidad1y, 0v