Ajuda:Tutorial/SVG

	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" >

	Guia de edição
	Como criar uma notícia
	Formatar notícias
	Ligar páginas a outros Wikinotícias
	Ligar notícias a projetos relacionados
	Ligar notícias a páginas externas
	Como usar imagens
	Categorizar
	Fazer notas de rodapé
	Redirecionar páginas
	Usar predefinições
	Usar tabelas
	Usar fórmulas matemáticas
	Renomear uma página
	Reverter edições
	Fundir páginas
	Assinar mensagens
	HTML
	CSS
	Funções sintáticas
	Palavras mágicas
	Javascript
	Usar robôs/bots
	Outros guias
	Livro de estilo
	Dicas e truques
	Guia de eliminação
	FAQ de edição

SVG

Atalho

WN: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.

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.

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

O código-fonte desta imagem SVG é válido, segundo verificação da World Wide Web (W3C).

|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

Esta imagem vetorial foi criada com Inkscape. Veja Wikinotícias:SVG para mais informações.

|adobe=sim

Adobe Illustrator

Esta imagem vetorial foi criada com Adobe Illustrator. Veja Wikinotícias:SVG para mais informações.

|libre=sim

LibreOffice

Esta imagem vetorial foi criada com LibreOffice. Veja Wikinotícias:SVG para mais informações.

Outros

|conversão=sim

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

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

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.