SVG Fontes Base de conhecimento | Aspose.Font

Introdução à fonte SVG

Para explicar o que é a fonte SVG, primeiro vamos aprender o termo SVG em comum. Do chamado produto Aspose.svg, entendemos que os gráficos vetoriais escaláveis ​​(SVG) são uma linguagem XML para criar gráficos vetoriais bidimensionais e vetor misto/raster. O documento SVG é um arquivo de texto que descreve as imagens como primitivas geométricas: linhas, curvas, formas, texto, etc. Os objetos vetoriais são construídos e armazenados como um conjunto de comandos, números e fórmulas, não em uma grade de pixels, como nos bitmaps.

A fonte SVG é um tipo de fonte usada nas imagens SVG e, como qualquer outro objeto do formato, ela pode ser escalada sem perder a qualidade. Você pode incorporar fontes diretamente na imagem, facilitando a criação de gráficos com tipografia personalizada.

Uma fonte SVG é uma fonte definida usando XML, assim como uma imagem SVG. É uma coleção de formas, linhas e curvas que definem os caracteres da fonte. A fonte também pode ser estilizada e manipulada usando css, portanto, você pode usar as mesmas técnicas para codificar o texto em uma imagem SVG, como faria isso para qualquer outro elemento SVG.

Vantagens e desvantagens da fonte SVG

A tabela abaixo mostra os prós e contras das fontes SVG, para que você possa decidir se deve usá -lo no seu projeto ou não.

Prós	Contras
Escalabilidade: As fontes SVG podem ser redimensionadas para qualquer tamanho sem perda de qualidade, sendo perfeitas para utilização em qualquer design responsivo.	Suporte de navegadores: A maioria dos navegadores modernos suporta fontes SVG, mas alguns navegadores mais antigos podem não as oferecer.
Tamanho de ficheiro mais pequeno: Em comparação com as fontes web, as fontes SVG têm um tamanho de ficheiro mais pequeno, o que é crucial se pretende melhorar o tempo de carregamento.	Suporte limitado a editores: Nem todos os editores de texto e software de design suportam tipos de letra SVG.
Melhor acessibilidade: As fontes SVG são consideradas mais acessíveis para utilizadores com deficiência. Podem ser facilmente lidas pelos leitores de ecrã e permitem a inclusão de descrições de texto alternativas.	Complexidade: As fontes SVG são difíceis de trabalhar e editar porque requerem mais conhecimentos técnicos.
Tipografia avançada: As fontes SVG incluem características tipográficas avançadas, como ligaduras, kerning, caracteres alternativos, etc.	Capacidade de pesquisa: As fontes SVG podem afetar o SEO de um website, uma vez que não são pesquisáveis ​​pelos motores de busca.
Estilo e animação: Estilize ou anime os tipos de letra SVG facilmente com CSS e JavaScript.	Opções limitadas de tipos de letra: Existem menos opções de tipos de letra disponíveis no formato SVG em comparação com os tipos de letra True Type.
Melhor suporte para símbolos não latinos: Devido à escalabilidade, as fontes SVG podem ser utilizadas para desenhar tipos de letra com um grande número de caracteres ou que exijam renderizações complexas, como hieróglifos, letras árabes ou hindi.

Svg ou woff?

As fontes SVG eram populares nos primeiros dias do SVG, mas agora as fontes da Web os substituíram na maioria dos casos, pois são mais flexíveis e amplamente apoiadas por todos os navegadores modernos. De qualquer forma, você ainda pode encontrar fontes SVG em versões mais antigas do Internet Explorer, por exemplo. Então, vamos comparar essas fontes.

Web Open Font Format ou Woff é um formato para entregar arquivos de fonte pela Internet, projetados para cobrir as necessidades do mercado de aplicativos da Web. O formato WOFF foi criado para fornecer uma maneira mais eficiente de fornecer fontes da Web em comparação com outros formatos de arquivo, como TrueType e OpenType. O formato comprime os dados da fonte para reduzir o tamanho do arquivo para baixar e usar as páginas da web mais rapidamente. Ele também inclui metadados que fornecem informações sobre a fonte, como a família de fontes, o estilo e as informações de direitos autorais.

O SVG é um formato gráfico vetorial usado para criar e exibir imagens na web. É um formato baseado em texto que pode ser facilmente editado e manipulado; portanto, é uma boa opção ao criar logotipos, ícones e outros gráficos.

Portanto, se comparar esses formatos com o objetivo deles, se você deseja criar gráficos para usar na web, use o SVG. Se você precisar de uma fonte para ser usada em um site, use o Woff.

Ambos os formatos podem interagir com o CSS, mas os arquivos WOFF são incorporados em páginas da web usando a regra de font-face no CSS. Isso permite que os designers da web usem fontes personalizadas em seus sites sem depender dos usuários para instalar a fonte em seus dispositivos. Isso oferece melhor flexibilidade e uma experiência visual consistente, independentemente do navegador que o usuário usa.

Svg ou ttf?

Se a escolha entre ttf ou SVG, você precisará esclarecer os requisitos do projeto porque eles geralmente são usados ​​para diferentes casos. Essas fontes são bem semelhantes, pois ambas fornecem texto de alta qualidade, escalável e facilmente legível.

O True Type Font Format é o formato de fonte mais conhecido para design de web e impressão e é suportado pela maioria dos sistemas e dispositivos operacionais. O TTF também é muito fácil de usar e implementar. Este é um formato vetorial, mas usa a ferramenta desenvolvida de instruções que permite que as fontes tenham a qualidade de bitmap e é considerada raster por algumas fontes. SVG é um formato de fonte vetorial. Ele armazena a fonte como um conjunto de caminhos, sem perdas em qualquer tamanho. Ele permite que essas fontes forneçam um arquivo de fonte menor, como já foi mencionado na comparação SVG para WOFF. O SVG também é uma opção melhor do que o tipo verdadeiro para servir pessoas com deficiência, pois elas dão melhor legibilidade.

Em resumo, o TTF é o formato mais amplamente suportado e é melhor para a maioria dos casos, mas o SVG é uma ótima opção se você precisar escalar o texto, deseja tornar o texto acessível ou precisar de recursos de tipografia avançada.

Onde usar fontes SVG?

Escolha formato de fonte SVG se você se concentrar:

• Designs responsivos: Fontes escaláveis, como o SVG, são boas para esses problemas.
• Acessibilidade: Como mencionado acima, as fontes SVG podem fornecer uma melhor legibilidade.
• Tipografia avançada: Recursos como ligantes, kerning e caracteres alternativos estão incluídos nas fontes SVG.
• Estilo e animação: Fontes SVG fornecem maior flexibilidade para design e animação.
• Scripts não latinos: Você pode usar fontes SVG para representar fontes que possuem um grande número de caracteres complexos para renderizar.
• Design de impressão: SVG é útil em determinados projetos de design de impressão, onde o tamanho de um arquivo é crucial, mas você precisa usar imagens de alta resolução e tipografia complexa ao mesmo tempo.
• Trabalhando com gráficos SVG: Como as fontes SVG em comum fazem parte da imagem gráfica SVG e são representadas usando a linguagem XML, você pode manualmente ou com a ajuda dos glifos de fontes suaves especiais e visualizar imediatamente os resultados (alterações de exibição de texto) na imagem inteira do SVG.

É importante observar que as fontes SVG podem não ser a melhor opção para todos os projetos. É melhor adicionar também fontes de um formato diferente como uma opção de fallback.

As fontes SVG são gratuitas?

Existem muitas bibliotecas de fontes de código aberto com uma grande variedade de fontes SVG gratuitas sob licenças de código aberto, como o Google Fontes, a Biblioteca de Fontes Open, etc. No entanto, nem todas as fontes SVG são livres para usar. Alguns designers vendem licenças e as condições da licença podem variar. Algumas fontes podem ter uma versão gratuita com um conjunto limitado de recursos e uma versão paga com mais opções. Verifique os termos de licença e uso de uma fonte antes de usá -la em um projeto. Ao fazer isso, você terá certeza de que é gratuito para usar ou que você tem as permissões necessárias.

Existem quatro opções para o licenciamento de fontes ter em mente:

1. Permite incorporar e carregar temporários de fontes em outros sistemas. Com essa licença, você pode editar fontes, incluindo a formatação de novos texto e salvar quaisquer alterações.
2. Permite incorporar a fonte de uma maneira temporária, o que permite que a fonte seja carregada em outros sistemas. Com essa licença, você pode editar e formatar um novo texto usando a fonte incorporada e salvar quaisquer alterações.
3. Permite incorporar a fonte de maneira permanente, o que permite que a fonte seja instalada e usada por sistemas remotos ou outros usuários.
4. Permite incorporar a fonte de maneira temporária com o objetivo de visualizar ou imprimir o documento em outros sistemas.

Arquivo de fonte SVG

As fontes SVG usam a sintaxe XML e podem ser incorporadas diretamente nos documentos SVG ou referenciados como arquivos externos. Sua estrutura consiste nos próximos componentes:

• Declaração XML no início do arquivo. Ele especifica a versão usada do XML e as informações de codificação.
• Elemento da fonte. Ele contém informações comuns sobre a fonte, como o nome da fonte, a família, o estilo etc.
• Elemento glifado. Ele define caracteres individuais da fonte. Cada glifo possui um identificador exclusivo, um número de unicode e um conjunto de caminhos ou formas que compõem o caractere.
• Elemento de font-face. É usado para definir metadados da fonte ( métricas), como sua subida, descida, posição de linha de base e caixa delimitadora de glifos.
• Elemento Missing-Glyph. Ele define um glifo padrão. Este glifo será usado se o necessário não for encontrado na fonte.- Elementos opcionais, como font-face-src, que definem a origem do arquivo de fonte e a font-face-uri, que fornece um URI para a fonte.

Aqui está um exemplo de código da estrutura básica de um arquivo de fonte SVG:

 
    <?xml version="1.0" encoding="UTF-8"?>
    <svg xmlns="http://www.w3.org/2000/svg">
      <font id="MyFont" horiz-adv-x="1000">
        <font-face font-family="MyFont" units-per-em="1000" ascent="800" descent="200" />
        <glyph glyph-name="Triangle" d="M0,0 L100,0 L50,100z" />
        <glyph unicode="B" glyph-name="B" d="M50,50 L50,150 L100,150 L100,115 L85,100 L50,100 M85,100 L100,85 L100,50z" />
      </font>
    </svg>

Vamos explicar o exemplo do código.

Primeiro, vemos a declaração XML comum, que define o número da versão XML e a codificação. A codificação UTF-8 é a codificação mais comum para a World Wide Web desde 2008.

O elemento principal (tag) neste XML é o elemento “svg”, que define um fragmento de documento SVG. O atributo xmlns do elemento “svg” faz referência ao namespace XML, definido na especificação Scalable Vector Graphics (SVG) 1.0.

A descrição da fonte propriamente dita começa com o elemento <font>. Este elemento inclui 2 atributos:

Um atributo id identifica exclusivamente a fonte e é usado quando é necessário fazer referência à fonte de um arquivo SVG externo. O atributo Horiz-ADV-X determina o avanço horizontal padrão após a renderização de um glifo na orientação horizontal (consulte Métricas de glifos para obter mais informações). Se este atributo não for especificado, o valor padrão será 1000.

Elemento “font-face” neste exemplo define características comuns da fonte como:

• Família da fonte - Um grupo de tipos de tipo de design semelhante relacionados e semelhantes.
• Unidades por Em - Número de unidades de coordenadas no quadrado EM, o tamanho da grade de design na qual os glifos são dispostos.
• Ascenda, descida - Comprimento do ponto de origem na linha de base até o ponto mais alto/mais baixo do glifo, respectivamente.

Cada glifo que nossa fonte de exemplo contém é representado pelo elemento “glifo”. Parâmetros como “Unicode” e “Glyph -Name”, informe como acessar o glifo correspondente - usando um código de caractere ou nome do glifo, respectivamente. Nos dados da fonte SVG reais, basta fornecer apenas um único atributo, unicode ou nome do glifo para acessar o glifo desejado.

Um atributo d é o atributo mais importante do elemento" glifo “. Ele define o contorno de um glifo usando primitivas geométricas como linhas e curvas.

Vejamos como obter um caminho gráfico para o glifo chamado “Triangle” em nosso exemplo. Cada letra neste caminho é uma abreviação especial, em relação ao comando correspondente do contexto gráfico. Cada letra é seguida por 2 números, essas são as coordenadas. Todas as coordenadas do exemplo são globais, nenhuma coordenada é relativa ao ponto anterior.

A primeira letra neste caminho é “M”. É um comando “moveto”. À medida que passa do nome, este comando define uma caneta em coordenadas especificadas, no nosso caso - o início do sistema de coordenadas (0, 0).

Próximo comando - “L” significa comando “lineto”. Este comando desenha uma linha do ponto atual (0,0) para a coordenada (x, y) dada que se torna o novo ponto de corrente.

As coordenadas do novo ponto atual são os parâmetros do comando “L” - no nosso caso, essas são coordenadas (100, 0).

Portanto, a primeira linha em nosso glifo é a linha do ponto (0,0) ao ponto (100, 0). O próximo comando - “L50,100” - desenha uma linha do ponto atual (100, 0) para o ponto (50, 100).

E o último comando em nosso caminho de glifo - “Z” é chamado “ClosePath” e é usado para fechar o subspato atual, desenhando uma linha reta do ponto atual para o ponto inicial do subspato atual - (0,0).

Portanto, a partir do exemplo explicado, aprendemos brevemente como os glifos são representados no formato SVG, como acessar esses glifos e quais características mais comuns uma fonte deve ter para obter textos renderizados com essa fonte exibida corretamente.

Como criar uma fonte SVG?

Geralmente, o processo de criação da fonte SVG tem o próximo pedido:

1. Crie gráficos vetoriais para cada glifo da fonte. Para esse fim, você pode usar software como ilustrador, inkscape ou glifos.
2. Exportar cada glifo como um arquivo SVG, certificando -se de usar o mesmo nome e atributos da fonte para cada um deles.
3. Crie o arquivo de fonte usando software como FontForge ou Fontlab. Em seguida, importe os arquivos SVG para cada caractere.
4. Adicione metadados como o nome da fonte, o autor e a licença ao arquivo criado.
5. Teste o resultado. Instale a fonte no seu computador e experimente em diferentes editores de texto e software de design. Lembre -se de que nem todos esses programas suportam fontes SVG, portanto, verifique se você tem os apropriados para criar e editar fontes SVG.

Conclusão

A fonte SVG tem um nível bastante alto de popularidade e vários casos em que é uma solução melhor do que outras fontes. Mas, para tomar uma decisão se esse formato for a escolha certa para o seu projeto, é melhor aprender seus prós e contras primeiro.

Se quiser trabalhar com SVG online sem carregar qualquer software adicional, pode utilizar aplicações multiplataforma e se estiver a concentrar-se em trabalhar com tipos de letra, vá para outro grupo de aplicações para trabalhar com tipos de letra aí pode encontrar conversores para transformar os seus ficheiros de fonte SVG num formato mais adequado, visualizadores e mescladores.