Pagina inicial » Codificação » Trabalhando com texto em Scalable Vector Graphics (SVG)

    Trabalhando com texto em Scalable Vector Graphics (SVG)

    Em nossos posts anteriores, usamos o SVG para criar formas. Neste post, como o título disse, vamos olhar para criando texto com SVG. Há muitas coisas que podemos fazer com o texto além do que o texto HTML simples é capaz de fazer.

    Então, vamos dar uma olhada.

    Implementação Básica

    Mas, antes de irmos mais longe, vamos ver como Texto em SVG é formado em seu nível muito básico:

      Este é um gráfico SVG (Scalable Vector Graphic)  

    O texto em SVG, como você pode ver no snippet de código acima, é definido com uma tag suficientemente lógica, . Este elemento basicamente requer apenas x e y atributos para especificar as coordenadas da linha de base.

    Fonte da imagem: Wikipedia.org

    E aqui está como o texto será parecido. Por enquanto parece que não tem diferença com o texto regular em HTML.

    Estilos de texto básicos

    O texto também pode ser estilizado com propriedades CSS, como espessura da fonte, estilo de fonte, e decoração de texto que pode ser implementado através de estilo interno, estilo interno ou estilo externo como temos discutido no post anterior sobre Styling SVG com CSS. Aqui estão alguns dos exemplos.

    Negrito

     Este é o texto em Scalable Vector Graphic (SVG) 

    itálico

     Este é o texto em itálico em Scalable Vector Graphic (SVG) 

    Sublinhado

     Este é o texto sublinhado no Scalable Vector Graphic (SVG) 

    Elemento

    Em alguns casos, quando só queremos aplicar estilos ou atributos a uma parte específica do Texto, podemos usar . Este exemplo abaixo mostra como adicionamos negrito, itálico e sublinhado para uma única linha de texto.

     Isso é ousado, isso é itálico e esta é sublinhado 

    Modo de escrita

    O texto não é apenas escrito de esquerda para a direita. Em outras partes do mundo, o Japão, por exemplo, o texto é escrito a partir de de cima para baixo. No SVG, isso pode ser feito usando o modo de escrita atributo.

     ぁ ぃ ぅ ぇ ぉ か き  

    No exemplo acima, nós colocamos vários caracteres japoneses aleatórios (não me pergunte o seu significado, eu realmente não tenho idéia) e mudei a orientação com esta declaração de estilo, modo de escrita: tb, Onde tb é de pé de cima para baixo.

    Esboço de texto

    O texto no SVG é basicamente um gráfico, para que possamos também aplicar o acidente vascular encefálico atributo para adicionar uma linha de borda para o texto, assim como fizemos com as outras formas.

      Este é o texto SVG  

    No snippet de código acima, adicionamos o acidente vascular encefálico atributo para o elemento e remova a cor do texto, especificando o preencher atribuir a Nenhum o que resultará na apresentação do texto a seguir.

    Caminho de texto

    No SVG, o Texto não só pode ser exibido na horizontal e na vertical, mas também pode siga um padrão Path. Aqui está como fazer isso.

    Primeiro, precisamos definir o caminho. No entanto, criar um caminho diretamente em HTML não é tão intuitivo, precisamos entender as coordenadas e alguns comandos que tenho certeza que a maioria de nós tentará evitar. Então, para simplificar essa etapa, sugiro que você simplesmente abra um editor de vetor (Inkscape ou Illustrator), crie um caminho e gere o código SVG.

    Então, coloque o elemento dentro de um elemento. defs aqui significa definição.

        

    Observe que também adicionamos um identidade atributo para o . Agora, precisamos apenas vincular o caminho identidade ao nosso texto com elemento, como assim;

        Lorem ipsum dolor sit amet consectetur.   

    Leitura adicional: Caminhos SVG

    Gradiente de texto

    Adicionando um fundo para preencher o texto também é possível em SVG, e se você tiver sucesso na seção Text Path acima, isso seria muito mais fácil.

    Primeiro, precisamos definir as cores do gradiente.

           

    Quando todas as definições necessárias estiverem configuradas, agora só precisamos adicionar o texto e referir preencher atributo para gradiente identidade atributo, como segue;

     Gradiente 

    E aqui está, o texto com gradiente.

    Leitura adicional: Gradiente e Padrão SVG

    Referências adicionais

    O texto no SVG é, sem dúvida, poderoso, na verdade, há muitas coisas que podemos fazer além do que podemos acomodar neste post. Então, abaixo nós reunimos mais algumas referências para servir o seu interesse neste assunto.

    • Sobre Fontes em SVG - Divya Manian
    • Documentação oficial do SVG Text - W3.org
    • SVG Dovumentation na Mozilla Dev. Rede com Exemplos e Ferramentas - MDN
    • Atributo do modo de gravação SVG - MDN
    • Ver demonstração
    • Fonte de download