Saltar para o conteúdo

Ajuda:Tutorial/SVG

Adicionar hiperligações
Fonte: Wikinotícias
Nível básico
Nível médio
Nível avançado
Outros guias
Livro de estilo
Dicas e truques
Guia de eliminação
FAQ de edição
Ver também : Ajuda:Tutorial/Imagens

SVG

SVG (gráficos vetoriais escaláveis) é um formato de arquivo desenvolvido pelo W3C. É adequado para logotipos, mapas e outras imagens não fotográficas. O SVG é muito apreciado porque descreve objetos gráficos com código-fonte e, portanto, atualmente fornece a melhor maneira de modificar e melhorar o conteúdo.

Os arquivos SVG não são exibidos diretamente pelo MediaWiki, mas são convertidos em arquivos PNG sempre que são integrados a uma página. Uma razão para essa escolha é que renderizar um SVG pode diminui a velocidade de dispositivos ou sistemas operacionais mais antigos. Uma versão raster que pode ser convertida eficientemente da fonte SVG ajuda a superar esse problema técnico.

Infelizmente, o librsvg (usado para conversão) não é desenvolvido ou atualizado. Vários dos recursos ausentes e bugs do librsvg afetam as imagens SVG nos projetos.

Contextualização

Criação

Muitos programas podem manipular arquivos SVG. Você pode tentar um abaixo, embora esses não sejam os únicos programas disponíveis. Como o SVG é apenas uma especificação XML, é possível escrever arquivos SVG manualmente em um editor de texto ou com seus próprios programas/scripts.

A tabela abaixo lista os sistemas operacionais em que diferentes editores podem ser executados. Informações adicionais podem ser vistas na Wikipédia (em inglês).

Software Windows macOS Unix e Linux iOS Android
Adobe Illustrator Sim Sim Cancelado (v 5.5) Sim (iPad) Não
Affinity Designer Sim Sim Não Sim (iPad) Não
Apache OpenOffice Sim Sim Sim Não Não
Boxy SVG Sim Sim Sim Não Sim
Aviary Sim Sim Sim Não Sim
Collabora Online Sim Sim Sim Sim (6.4.7+) e iPadOS Sim (6.4.7+) e Chrome OS
ConceptDraw PRO Sim Sim Não Não Não
CorelDRAW Sim Sim Cancelado (v. 9) Não Não
Dia Sim Sim Sim Não Não
DrawPlus Sim Não Não Não Não
Edraw Max Sim Sim Sim Não Não
EazyDraw Não Sim Não Sim Não
Figma Sim Sim Apenas site Apenas aplicativo Apenas aplicativo
Inkscape Sim Sim Sim Não Não
Krita Sim Sim Sim Não Não
LibreOffice Draw Sim Sim Sim Em desenvolvimento (disponível principalmente em 6.4.7+) Em desenvolvimento (disponível principalmente em 6.4.7+)
Macromedia Freehand Sim Sim Não Não Não
Microsoft Expression Design Sim Não Não Não Não
Microsoft Visio Sim Não Não Não Não
OmniGraffle Não Sim Não Sim (iPad) Não
PhotoLine Sim Sim Não Não Não
SaviDraw Sim Não Não Não Não
sK1 Sim Sim Sim Não Não
Sketch Não Sim Não Não Não
SketchUp Sim Sim Não Não Não
Sodipodi Sim Não Sim Não Não
SVG-edit Sim Sim Sim Não Não
Synfig Sim Sim Sim Não Não
VectorStyler Sim Sim Não Não Não
WinFIG Sim Sim Sim Não Não
Xara Designer Pro+ Sim Não Não Não Não
Xara Xtreme LX Sim (Windows 10 com WSL) Não Sim Não Não
Xfig Sim (Windows 10 con WSL) Sim Sim Não Não

O código-fonte de cada arquivo SVG começa com informações XML, exigido pelo W3C. Isso inclue sua versão e tipo de codificação binária (Unicode) — UTF-8 é recomendado para internacionalização. A ausência da declaração XML levará a uma leve confusão quando o arquivo original SVG for aberto em um navegador: o código XML bruto será exibido em vez de ser renderizado em uma imagem.

Exemplo de código SVG 
<?xml version="1.0" encoding="UTF-8"?>
<svg
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink"
 version="1.1"
 viewBox="0 0 400 300"
>

O elemento svg deve seguir. Isto deve especificar o domínio SVG: xmlns="http://www.w3.org/2000/svg"; sem ele, uma imagem SVG não será exibida. Outros domínios (namespaces) podem ser incluídos no elemento. Por exemplo, se o arquivo usa linking, então deve ser xmlns:xlink="http://www.w3.org/1999/xlink".

Alguns programas de edição podem incluir domínios no arquivo. Se namespaces adicionais estiverem presentes, o validador reclamará deles. Além disso, você deve remover quaisquer referências a outros arquivos que usou; se essas referências forem deixadas no código, a renderização não encontrará o(s) arquivo(s) externo(s) e falhará. Domínios:

prefixo domínio propósito
cc http://creativecommons.org/ns# Licenças Creative Commons
cdml http://www.freesoftware.fsf.org/bkchem/cdml Diagramas Químicos
dc http://purl.org/dc/elements/1.1/ Metadados
i http://ns.adobe.com/AdobeIllustrator/10.0/ Adobe Illustrator
inkscape http://www.inkscape.org/namespaces/inkscape Inkscape
its http://www.w3.org/2005/11/its Conjunto de Tags de Internacionalização
rdf http://www.w3.org/1999/02/22-rdf-syntax-ns# Linguagem RDF
sodipodi http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd Gráficos
svg http://www.w3.org/2000/svg SVG
xlink http://www.w3.org/1999/xlink Linguagem XML

Renderização

Embora não seja um requisito, é uma boa ideia verificar seu arquivo antes de enviá-lo. O W3C pode encontrar problemas que fazem com que o arquivo seja renderizado incorretamente em diferentes plataformas. Aviso: Atributos não SVG 1.1 produzirão erros de validação. O rascunho do SVG 2.0 permite que os usuários incluam novos atributos, mas o verificador reclamará deles.

Diferentes editores e navegadores podem renderizar exatamente o mesmo arquivo SVG de maneiras ligeiramente diferentes. Isso também ocorre no Wikinotícias. Por exemplo: uma imagem contendo uma série de traços muito finos; esses traços podem aparecer muito mais ousados ​​e grossos. Se possível, considere salvar seu trabalho e, em seguida, abrir a mesma imagem usando dois ou três navegadores diferentes para verificar se está renderizando conforme o esperado.

  • Para visualizar como um SVG será renderizado para PNG no Wikinotícias, poderá acessar a ferramenta SVG Checker. Normalmente, demora algum tempo até que o resultado seja axibido.

As razões pelas quais o mesmo arquivo é renderizado de forma diferente dependendo do contexto é resultado de como esses contextos (navegadores ou programas) interpretam o código SVG e usam esse código para gerar a imagem. Procure criar um SVG de "denominador comum" que renderize corretamente, independentemente do navegador usado para abri-lo. Também é uma boa ideia remover definições não utilizadas, pois elas podem aumentar desnecessariamente o tamanho do arquivo (exceto quando você precisar delas para edições adicionais).

  • Para limpar arquivos problemáticos, você pode usar essa ferramenta. Além disso, existem três otimizadores SVG comuns: scour, svgcleaner e svgo, mas esteja ciente de que todos os três otimizadores podem estar desatualizados e causar erros.

Além disso, alguns programas permitem que você insira componentes baseados em raster em seu arquivo sem avisar que, se o arquivo for convertido em SVG, esses componentes não serão convertidos simultaneamente em vetores, o que significa que você precisa ter muito cuidado com os editores usados.

Problemas

Alguns problemas conhecidos dos desenvolvedores:

Fontes

Muitas fontes não são exibidas ao criar arquivos SVG. É necessário para o renderizador que as fontes que ele deve exibir também estejam instaladas no servidor. Veja meta:SVG fonts para uma lista de fontes que podem ser usadas nas páginas da Wikimedia.

Infelizmente, muitas fontes são proprietárias e não estão disponíveis em todos os sistemas operacionais. Por exemplo, nem todos os sistemas operacionais possuem a fonte Arial proprietária. Se a família de fontes específica não estiver disponível, alguma fonte padrão será usada; a fonte padrão pode ter uma aparência muito diferente.

Adicionar Arial, sans-serif e fontes adicionais ajudará o SVG a ser exibido com o menor esforço em máquinas que não possuem ou substituem Arial. Para tornar o arquivo SVG independente de Arial, altere todas as ocorrências de font-family: Arial para font-family: 'Liberation Sans', Arial, sans-serif.

Também deve ser observado que as fontes instaladas não são uniformemente suavizadas e dimensionadas. As diferenças são particularmente visíveis em tamanhos pequenos. Às vezes, há sobreposições ao reduzir. Se isso acontecer, você pode aumentar o espaçamento ou usar uma fonte diferente.

Posicionamento
Letras bem posicionadas
Representação incorreta: apenas o "g" se projeta na imagem no canto superior esquerdo
Monitorada no Phabricator
Tarefa T35245

No padrão SVG, é possível posicionar cada letra individualmente dentro de um espaço especificando uma posição x e y para cada um, esse tipo de posicionamento geralmente ocorre com a importação de PDF. Parece algo assim: 

<text 
     x= "50 70 90 110" 
     y= "50 52 48 46" 
     style= "font-size:24px; font-family:sans-serif" > efgh </text>

O renderizador do MediaWiki não entende essa sintaxe (o mesmo se aplica aos atributos relativos correspondentes). Os atributos de coordenada x/y (ou dx/dy) podem conter apenas um valor cada, caso contrário são exibidos como se ambos os valores fossem iguais a zero. Como resultado, os caracteres aparecem acima da borda da imagem e são cortados ou, em determinadas circunstâncias, desaparecem completamente.

O Inkscape oferece suporte a um recurso conhecido como "texto corrido" que detecta automaticamente o texto para caber nos limites de uma determinada caixa. Infelizmente esse recurso faz parte do SVG Tiny 1.2, que não temos suporte. Seu uso quase certamente resultará em problemas de compatibilidade.

Gradiante

Os usuários da versão 0.46 do Inkscape podem notar que as imagens com gradiente são exibidas perfeitamente no editor, mas são exibidas desordenadas nos navegadores Opera ou Firefox. Uma causa possível é que o final da opacidade é definida como 0. O Inkscape parece ignorar isso, mas tanto o Firefox 3.0.6 quanto o Opera 9.36 a renderizarão como uma borda branca. As soluções são remover esse final.

Os usuários do Adobe Illustrator podem notar que símbolos do editor contendo gradiente serão renderizados normalmente no Wikinotícias, mas se o próprio arquivo SVG for aberto no Firefox, esses símbolos aparecerão vagos. Outros navegadores não terão dificuldade — Google Chrome e até mesmo o Internet Explorer renderizarão os gradientes do Illustrator corretamente.

Espaçamento
Monitorada no Phabricator
Tarefa T36947

O renderizador do MediaWiki às vezes comete erros ao calcular o espaçamento entre letras. O efeito é mais afetado quanto menor a fonte for definida.

Alinhamento
Monitorada no Phabricator
Tarefa T11420

O item <textPath> não é suportado no momento. Uma solução alternativa é alinhar os caracteres do texto individualmente.

O SVG 1.1 não fornece nenhuma forma de quebra de linha. Qualquer quebra de linha deve ser feita manualmente reposicionando novos elementos tspan com a mesma coordenada x e uma nova coordenada y.

Estilo
Monitorada no Phabricator
Tarefa T43423
Monitorada no Phabricator
Tarefa T207506

Embora a propriedade style seja um mecanismo fundamental para renderização de SVGs, o uso de CSS incorporado no início do documento deve ser tratado com cautela. Nota: Desde o libRSVG 2.36, deve conter a notação type="text/css", contrariando a recomendação do W3C (phab:T68672) que foi expressamente dada como "opcional".

Você pode alterar o negrito do texto usando a propriedade font-weight. A especificação W3C afirma que o valor padrão é normal, ou seja, sem negrito ou afinamento, mas librsvg não reconhece esse valor específico.

Cubo
Esta imagem é de um cubo em movimento. Você não pode vê-lo corretamente nesta página, clique aqui para vê-la: media:Rotating cube SMIL.svg
Animações

As imagens SVG podem ser animadas, mas como são convertidas em formato PNG para uso em projetos da Wikimedia, a animação não é exibida. Ela só é exibida quando o arquivo SVG é aberto no navegador. Veja o exemplo.

Raster
Uso correto
Uso incorreto
Monitorada no Phabricator
Tarefa T193929

Existem alguns usos valiosos de imagens raster (ou bitmap) em arquivos SVG. Dados raster devem ser incluídos em um arquivo SVG se, por algum motivo, essa for a melhor solução; considere sempre convertê-los ou redesenhá-los como vetores.

Os dados raster são atribuídos a um tipo MIME no elemento <image>. No caso de um JPEG incorporado, o tipo MIME é "image/jpeg". Versões mais antigas do Inkscape (e possivelmente outros editores) atribui o tipo "image/jpg". Embora o Inkscape e a maioria dos navegadores exibam essa imagem SVG perfeitamente, o software MediaWiki não exibirá a imagem. Não reconhecendo o tipo MIME "image/jpg" haverá simplesmente um espaço preto onde a imagem deveria estar. A correção é abrir o arquivo SVG em um editor de texto, encontrar o elemento <image>, localizar "image/jpg", alterá-lo para "image/jpeg" e salvá-lo novamente.

Predefinições

No Wikimedia Commons, você pode incluir avisos em arquivos vetoriais usando a predefinição {{Igen}}. No Wikinotícias, isso pode ser feito em arquivos usando {{informação}}. Veja abaixo:

Verificação
  • |svg=válido
SVG válido
SVG válido
 O código-fonte desta imagem SVG é válido, segundo verificação da World Wide Web (W3C).
  • |svg=inválido
SVG inválido
SVG inválido
 O código-fonte desta imagem SVG é inválido, segundo verificação da World Wide Web (W3C).
Programa de edição
  • |inkscape=sim
Inkscape
Inkscape
 Esta imagem vetorial foi criada com Inkscape. Veja Wikinotícias:SVG para mais informações.
  • |adobe=sim
Adobe Illustrator
Adobe Illustrator
 Esta imagem vetorial foi criada com Adobe Illustrator. Veja Wikinotícias:SVG para mais informações.
  • |libre=sim
LibreOffice
LibreOffice
 Esta imagem vetorial foi criada com LibreOffice. Veja Wikinotícias:SVG para mais informações.
Outros
  • |conversão=sim
Torne SVG
Torne SVG
 Esta imagem pode ser recriada usando gráficos vetoriais. Isso tem várias vantagens; veja Wikinotícias:SVG. Se uma versão SVG estiver disponível, envie-a e depois proponha esta imagem para eliminação.
  • |animado=sim
SVG animado
SVG animado
 Esta imagem é um SVG animado. A visualização acima não tem movimento e pode estar incompleta ou incorreta. Clique aqui para vê-la; ela pode ser executada em qualquer navegador moderno.
  • |erro=sim
SVG com erro
SVG com erro
 Esta imagem SVG contém dados raster incorporados. Ela pode produzir resultados inferiores quando dimensionada para tamanhos diferentes. Se possível, deve ser substituída por gráficos vetoriais.

Direitos autorais

Há alguma preocupação de que o código-fonte das imagens possa ser protegido por direitos autorais como um "programa de computador", mesmo que o resultado seja uma imagem de domínio público por estar abaixo do limite de originalidade ou devido à expiração dos direitos autorais. Isso pode significar que, embora a imagem SVG seja de domínio público, o código pode ter direitos autorais restritivos.

Os elementos que pesam a favor do código-fonte contendo expressão criativa suficiente para ser protegido por direitos autorais podem incluir código escrito à mão, CSS incorporado complexo, comentários incorporados mais longos ou um grande conjunto de pontos de controle cuidadosamente selecionados. Elementos que pesam a favor do SVG sem restrições incluem código gerado programaticamente ou cópia servil de uma fonte de domínio público.

Obtida de "https://pt.wikinews.org/w/index.php?title=Ajuda:Tutorial/SVG&oldid=509414"