Converter TTF para SVG em JavaScript

Converter arquivos TTF (TrueType Font) para SVG (Scalable Vector Graphics) em JavaScript permite que os desenvolvedores usem fontes personalizadas em um formato escalável e baseado em vetor adequado para projetos web. O processo envolve ler o arquivo TTF, extrair os glifos da fonte e convertê-los em dados de caminho SVG. Neste artigo, aprenderemos como converter TTF para SVG em JavaScript.

Este artigo cobre os seguintes tópicos:

Biblioteca JavaScript para Converter TTF para SVG

Usaremos a biblioteca Aspose.Font para JavaScript para realizar a conversão de TTF para SVG. Ela permite que os desenvolvedores manipulem, extraiam e gerenciem dados de fontes em vários formatos, incluindo TrueType (.ttf), OpenType (.otf) e outros.

Por favor, baixe a biblioteca e siga as instruções para instalar o Aspose.Font para JavaScript.

Converter TTF para SVG usando JavaScript

Podemos facilmente converter fontes TrueType para o formato SVG em JavaScript dentro de uma aplicação web. Carregaremos o arquivo TTF e depois o converteremos para o formato SVG. Uma thread do trabalhador web lidará com as tarefas intensivas em recursos para evitar bloquear a thread principal da interface do usuário. Isso torna nossa aplicação conversora mais amigável, simplifica o processo de conversão e permite downloads eficientes de arquivos.

Siga os passos abaixo para converter a fonte TrueType em SVG usando JavaScript:

  • Crie um trabalhador web usando o seguinte trecho de código:
/*Create Web Worker*/
const AsposeFontWebWorker = new Worker("AsposeFontforJS.js");
AsposeFontWebWorker.onerror = evt => console.log(`Error from Web Worker: ${evt.message}`);
AsposeFontWebWorker.onmessage = evt => document.getElementById('output').textContent =
(evt.data == 'ready') ? 'library loaded!' :
(evt.data.json.errorCode == 0) ? `Result:\n${DownloadFile(evt.data.json.fileNameResult, "font/ttf", evt.data.params[0])}` : `Error: ${evt.data.json.errorText}`;
/*Event handler*/
const fTTFtoSVG = e => {
const file_reader = new FileReader();
file_reader.onload = event => {
/*Convert a TTF fonts to SVG and save - Ask Web Worker*/
AsposeFontWebWorker.postMessage({ "operation": 'AsposeFontConvertToSVG', "params": [event.target.result, e.target.files[0].name, 'Module.FontType.TTF'] }, [event.target.result]);
};
file_reader.readAsArrayBuffer(e.target.files[0]);
};
/*Make a link to download the result file*/
const DownloadFile = function (filename, mime, content) {
mime = mime || "application/octet-stream";
var link = document.createElement("a");
link.href = URL.createObjectURL(new Blob([content], {type: mime}));
link.download = filename;
link.textContent = filename;
link.title = "Click here to download the file";
document.getElementById('fileDownload').appendChild(link);
document.getElementById('fileDownload').appendChild(document.createElement("br"));
}
view raw convert-ttf-to-svg-in-javascript_webworker.js hosted with ❤ by GitHub
  • Converta TTF para SVG seguindo os passos abaixo:
  1. Selecione o arquivo TTF de entrada.
  2. Crie um FileReader.
  3. Chame a função AsposeFontConvertToSVG.
  4. Defina o nome do arquivo resultante em json.fileNameResult.
  5. Depois disso, verifique se json.errorCode é 0 e recupere links para os arquivos resultantes. Se json.errorCode não for 0, os detalhes do erro estarão disponíveis em json.errorText.
  6. Finalmente, a função DownloadFile gera um link, permitindo que o usuário baixe o arquivo resultante para o seu sistema operacional.

O exemplo de código a seguir mostra como converter um arquivo de fonte TrueType para o formato SVG usando JavaScript.

var fTTF2SVG = function (e) {
const file_reader = new FileReader();
file_reader.onload = (event) => {
const json = AsposeFontConvert(event.target.result, e.target.files[0].name, Module.FontType.TTF, Module.FontSavingFormats.SVG);
if (json.errorCode == 0) document.getElementById('output').textContent = json.fileNameResult;
else document.getElementById('output').textContent = json.errorText;
DownloadFile(json.fileNameResult, "svg");
}
file_reader.readAsArrayBuffer(e.target.files[0]);
}
view raw convert-ttf-to-svg-in-javascript_convert.js hosted with ❤ by GitHub
Converter TTF para SVG em JavaScript

Experimente o Conversor Gratuito Online de TTF para SVG

Você também pode converter seus arquivos TTF para SVG usando esta ferramenta gratuita de conversão de TTF para SVG online. Você pode acessá-la usando qualquer navegador web em qualquer plataforma.

Obter Biblioteca de Fontes JavaScript

Você pode obter uma licença temporária gratuita para experimentar a biblioteca de fontes JavaScript sem limitações de avaliação.

Fonte TrueType para SVG - Recursos Gratuitos

Além de converter as fontes TrueType para o formato SVG, explore vários outros recursos da biblioteca usando os recursos abaixo:

Conclusão

Em conclusão, converter TTF para SVG usando JavaScript é uma maneira poderosa de trazer fontes personalizadas para seus projetos web com gráficos escaláveis e de alta qualidade. Exploramos como ler arquivos TTF, extrair glifos de fonte e transformá-los em caminhos SVG usando a biblioteca JavaScript Font. Se você tiver alguma dúvida, sinta-se à vontade para nos contatar em nosso fórum de suporte gratuito.

Veja Também