¿Cómo crear SVG para una buena tipografía en la web sin comprar Illustrator?

Tengo una fuente web que me gustaría mostrar usando SVG en lugar de HTML. La razón de esto es que quiero mostrar un texto grande con una tipografía hermosa, y no veo ninguna forma de obtener el control de interletraje que necesito con el texto renderizado en HTML/CSS.

Soy dueño de la fuente (o es gratis, más bien) y sería fácil mostrarla como un mapa de bits y terminar con ella, pero es muy grande y estoy tratando de cargar toda la página en menos de medio minuto. segundo, creo que SVG es mi respuesta.

Tengo Photoshop, pero no tengo presupuesto para Illustrator. Sin embargo, supongo que podría usar la versión de prueba a corto plazo; sería bueno poder editar y hacer cambios dentro de un mes. ¿Hay alguna herramienta vectorial que satisfaga mis necesidades, simplemente para crear SVG a partir de texto y poder ajustar manualmente el interletraje para mostrarlo en la web?

Respuestas (6)

Inkscape ciertamente convierte las fuentes en rutas (Seleccione, luego Shift-Ctrl-C).

El formato de guardado estándar es SVG, ya sea 'Inkscape' (extendido) SVG o 'simple' SVG.

También tiene un editor de fuentes SVG.

Por cierto, supongo que este CSS no fue bueno para ti:

<span style="letter-spacing: 5px">Kerning</span>

Pruebe Kern.js. que se basa en Lettering.js (ambos complementos de jQuery):

http://www.kernjs.com/

http://letteringjs.com/

Con suerte, eso le daría control de interletraje sin sacrificar el SEO y la accesibilidad.

Actualizar:

Acabo de enterarme de kerning.js, que puede ofrecer incluso más control que Kern.js:

http://endtwist.github.com/kerning.js/

También basado en Lettering.js.

Pruebe Inkscape: es una alternativa de código abierto a Illustrator. Yo mismo no lo he usado mucho, pero comenzó como un editor de SVG, por lo que convertir texto en rutas y guardarlo como SVG debería ser fácil.

http://inkscape.org/

Inkscape es una pieza de software impresionante. Su interfaz de usuario no está tan pulida como la IA, pero su conjunto de características es bastante robusto y creo que muchas de sus herramientas de dibujo son mucho más parecidas a FreeHand, que de todos modos siempre había preferido a la IA.

Inkscape es mejor en SVG que Illy. Illy hace cosas raras cuando guarda como SVG, básicamente no respeta las especificaciones de SVG. Use Illy para IA, pero Inkscape es una mejor opción si tiene en mente el cumplimiento de SVG.

Como se dijo, Inkscape es la herramienta ideal. Pero tenga en cuenta que una imagen SVG ya no es texto. Si bien eso está bien para una visualización de tipo ilustrativo, es probable que desee texto real en su sitio por razones de SEO y accesibilidad.

¿Ha considerado el uso de fuentes web CSS? Ese podría ser un compromiso aceptable.

Aquí hay otro programa que funciona muy bien con SVG: iDraw en Apple Mac/App Store.

¡Hola amigo (:P)! Bienvenido a GD. Gracias por agregar una respuesta. Sería genial si pudiera explicar por qué cree que este programa es bueno para lo que se le pide (¿por qué lo prefiere sobre otros?). Así los usuarios no tienen que ir a la página para entender lo que hace el programa, y ​​la respuesta es más completa.