Familia de fuentes alternativa para texto en archivo SVG

Contexto

Medioambiente

Archivo SVG en Inkscape 0.92.3 en Windows 10 Pro x64

Problema

Los navegadores web no representan el texto "Gone Home".

Descripción

Creé un archivo SVG en Inkscape que contiene texto usando la fuente Elephant. Desafortunadamente, los navegadores web [1] que deben mostrar la imagen no representan el texto en absoluto. Supongo que los navegadores no tienen instalada la fuente correcta. [2]

El mismo problema ocurre a veces cuando estoy trabajando con CSS para sitios web. La solución en esos casos es usar fuentes alternativas que los navegadores pueden usar, como se muestra a continuación.

font-family: Elephant, Arial, Helvetica, sans-serif;

Preguntas

  1. ¿Es posible especificar fuentes alternativas en un archivo SVG para que las aplicaciones las usen al renderizar texto? [3]
  2. Si es así, ¿cómo se hace en Inkscape 0.92.3?

Solución usada

El archivo SVG original usaba texto fluido ( <flowRoot>) en lugar de texto normal ( <text>).

En Inkscape, seleccione el texto y use Texto > Convertir a texto .

notas

  1. He probado con Chrome, Firefox e Internet Explorer.
  2. A pesar de que la fuente está instalada en Windows.
  3. Lo que significa que la aplicación usará la segunda fuente si no tiene la primera y así sucesivamente.
Sería mejor convertir el texto en rutas: "Ruta> Objeto a ruta". Si fuera absolutamente necesario mantener el texto como texto, podría eliminarlo del svg, pegarlo en un div adyacente y superponerlo encima de la imagen svg - Así: jsfiddle.net/9kjaorp6/1
Bienvenido a GD.SE, Björn. Como escribe @Moini, los problemas están relacionados con el texto fluido y no con la fuente Elephant (que generalmente se incluye en los sistemas Windows) o la fuente alternativa. Intenté eliminar el texto fluido y colocar un cuadro de texto ordinario, y el navegador representa el texto.
Solo algunas curiosidades: el problema del texto fluido desaparecerá en la versión 1.0 de Inkscape, ya se está trabajando en ello. Entonces habrá un nuevo tipo de texto fluido y una alternativa para aquellos espectadores que no lo implementen.

Respuestas (2)

El problema es que está utilizando texto fluido en su archivo. El texto fluido no está en el estándar SVG (fue planificado, implementado en Inkscape, luego eliminado del estándar y mantenido en Inkscape debido a su utilidad).

Use 'Ruta> Objeto a ruta' o 'Texto> Convertir a texto' (si necesita mantener el texto como texto)

Gracias por su aporte. ¡El 'convertir a texto' fue muy útil! Desafortunadamente, no puedo votar su respuesta debido a mi baja reputación en StackExchange.

O bien no se procesa porque esa fuente no está instalada en otras computadoras en las que se está viendo el SVG, o tal vez haya un problema con el archivo de fuente en sí, o alguna incompatibilidad con Inkscape. No creo que tenga nada que ver con el navegador como tal. Los navegadores no "tienen fuentes", pueden usar fuentes del sistema y fuentes web. En última instancia, no puedo responder con certeza a esta parte de su pregunta, ya que no tengo la fuente para verificarla, y la fuente no es gratuita . No lo compro para averiguarlo.

De todos modos, la solución es bastante fácil y, de hecho, esto es lo que probablemente debería hacer con cada SVG creado para la web, independientemente de la fuente utilizada, para evitar problemas de fuentes faltantes.

  1. Seleccione todos los cuadros de texto en el documento de Inkscape.
  2. haga clic en Ruta > Objeto a ruta . Esto convertirá todo el texto en contornos.
  3. Guardar* el SVG

Ahora todo el texto se mostrará correctamente en todas las computadoras, independientemente de las fuentes instaladas.

*Nota: cuando guarde el SVG para usarlo en una página web, asegúrese de no sobrescribir su obra de arte original (que ya debería haber guardado). Elija guardarlo con un nombre de archivo diferente. Una vez que el texto se ha convertido en contornos, es irreversible y deberá volver a escribir el texto si desea editarlo.

Gracias por su aporte. ¡La información sobre cómo hacer que el texto en la web sea seguro al convertirlo en rutas fue muy revelador! Desafortunadamente, no puedo votar su respuesta debido a mi baja reputación en StackExchange.