Help:SVG/pt

From Wikimedia Commons, the free media repository
Jump to: navigation, search
A página noutras línguas:

English | español | français | português | +/−

Exemplo de uma imagem SVG

SVG, do inglês scalable vector graphics (que pode ser traduzido como gráficos vectoriais redimensionáveis), é um tipo de ficheiro aceite no Wikimedia Commons. É adequado para diagramas, mapas e outras imagens não fotográficas.

Os ficheiros SVG são usados extensivamente no Wikimedia Commons. Aqui seguem-se algumas dicas para novatos.

O que é SVG?[edit]

Scalable vector graphics (SVG) é uma especificação XML e um formato de ficheiro indicado para a demonstração de gráficos vectoriais a duas dimensões, tanto estáticos como animados. O formato pode guardar texto sem formatação (texto puro) ou comprimido (binário). O SVG permite a incorporação de gráficos como ficheiros bitmaps e texto.

Ver:

Criando imagens SVG para o Wikimedia Commons[edit]

Originando e editando[edit]

Alguns dos programas que podem ser usados para a criação de imagens SVG são listados em Editores de SVG mais abaixo. Como alternativa, é possível editar o código SVG directamente com um editor de texto ou com um IDE.

Utilizando características específicas dos SVGs[edit]

Bitmaps[edit]

Para uso no Commons, não se recomenda a importação de imagens bitmap para os ficheiros SVG.

Diga-se que se pretende importar, por exemplo, um mapa para SVG, adicionar-lhe umas notas de texto e salvar o produto final como SVG; ou então, deseja-se criar um diagrama no formato SVG e depois embelezá-lo com uma imagem bitmap importada ou um logótipo.

A incorporação de imagens bitmaps vai contra a ideia da Commons: Transição para SVG e qualquer ficheiro SVG que contenha imagens bitmap está sujeito a ser automaticamente rotulado como BadSVG (SVG desprezível) pelo SVGbot, um bot (página em inglês) que se encontra em desenvolvimento.

Se possuir uma imagem do tipo bitmap que pretenda incorporar, pode ser possível a sua conversão ou a re-elaboração da mesma como ficheiro SVG.

Animação[edit]

As imagens SVG podem conter animações com SMIL (uma linguagem informática para apresentações multimédia como texto, imagens, vídeos, áudio, etc.), mas como a extensão .svg é convertida para .png para uso nos projectos Wikimedia, a animação do ficheiro SVG é apenas visível na própria página da imagem.

Ver Categorizando SVGs para saber como marcar uma imagem como animada.

Scripts[edit]

MediaWiki (página em inglês) não aceita ficheiros SVG que contenham scripts.

Ficheiros externos[edit]

Antes de guardar a versão final, é necessário que se remova quaisquer referências usadas para a criação do SVG; se estas referências estiverem indisponíveis, a renderização da imagem não deverá encontrar os ficheiros externos e falhará.

Limpando[edit]

É também boa ideia remover definições inutilizáveis, uma vez que isso resulta numa diminuição do tamanho do ficheiro. O Scour (página em inglês) é um script de Python de código aberto que limpa e melhora os ficheiros SVG. Até existe uma versão online (página em inglês), não havendo nada para transferir.

SVG ("Plain SVG"), SVG comprimido, especificações gerais[edit]

É preferível gravar no formato "Plain SVG" (SVG puro). Este formato pode ser encontrado normalmente na caixa de diálogo Guardar como (ou Save As, em inglês) do programa (em vez de gravar como apenas "SVG", que pode ser a versão de SVG do próprio programa). Isto por razões de compatibilidade, entre outras.

No Adobe Illustrator ou no Inkscape (especialmente no primeiro) o formato de ficheiro inclui informação (tal como as preferências do utilizador), dispensáveis nos ficheiros carregados. Isto aumenta o tamanho do ficheiro desnecessariamente e por vezes faz com que as miniaturas não se renderizem propriamente. Ver bugzilla:2888 (página em inglês)

Por outro lado, guardar como "Plain SVG" pode fazer com que ocorra perda de informação útil para o utilizador. De modo a conservar essas informações, é recomendado a criação de um cópia do ficheiro original, sendo a cópia uma versão sem as informações extra (aquela que envia) ou, então, etiquetando imagens com {{Created with Inkscape|IMPORTANT=yes}}. Ver Help:Inkscape (página em inglês) para mais ajuda.

Vários programas, incluindo o Inkscape, permitem também gravar no formato SVGZ (SVG comprimido binário), formato não suportado no Commons.

Fontes[edit]

Apenas algumas fontes podem ser renderizadas pela etiqueta <text>. Uma lista das mesmas encontra-se disponível aqui (página em inglês). Por favor, considere usar estas fontes e não converte-las para vectores para que a posterior modificação do texto seja mais simples, para além de que isso aumentará o tamanho da imagem.

O texto no Inkscape, por defeito, utiliza uma caixa de "Flowed Text" (Texto Fluído), a qual poderá resultar em problemas (provavelmente não renderizará de forma alguma ou então apenas como um grande rectângulo preto). Para remediar a situação, simplesmente é pedido que se use o comando "Convert To Text" (Converter para Texto) no menu "Text" (Texto) do Inkscape.

Alternativamente, antes de iniciar o texto, escolha a ferramenta de texto e, sem arrastar com o rato, carregue na tela onde deseja começar a escrever.

Gradientes[edit]

Os utilizadores da versão 0.46 do Inkscape poderão notar que as imagens com "Fill gradients" (Preencher gradientes) são demonstradas perfeitamente no Inkscape, mas que têm certos problemas ao serem apresentadas nos navegadores Opera ou Firefox. A transferência de uma versão acima é recomendada para resolver o problema.

Validação[edit]

É recomendado validar o ficheiro criado através do Avaliador SVG (página em inglês), antes de carregar a imagem. Isto poderá avisar acerca de possíveis problemas no ficheiro. Infelizmente, o avaliador não suporta RDF ou outros tipos de metainformação, mesmo que inclua, mas ainda assim é capaz de encontrar erros. Também é requerido uma declaração do tipo de documento, requisito desnecessário para um SVG e que pode causar problemas.

Ver Categorizando SVGs para saber como validá-lo.

Carregando e categorizando SVGs[edit]

Páginas de descrição de imagens[edit]

O processo de carregamento de imagens é explicado no formulário de carregamento.

Certifique-se de que preencheu a caixa de informação tanto quanto possível. Costuma ser uma ajuda quando uma imagem tem uma caixa de informação detalhada, uma vez que isto torna a sua categorização mais simples e permite que outros a traduzam.

Se o ficheiro tiver passado na avaliação do Avaliador SVG, é possível rotular a imagem com {{validSVG}}.

Ver secção Rótulos de Software SVG para informação detalhada num media SVG.

Categorizando SVGs[edit]

Por agora, todas as imagens SVG deveriam encontrar-se listadas na Categoria SVG, mas é pedido que não se categorize directamente aí, o que iria tornar essa secção demasiado sobrecarregada e sem qualquer utilidade. Tente uma das subcategorias temáticas.

Agradece-se que se marque as categorias que não se relacionam com o tema mas com aspectos técnicos com «*» para que estas serem excluídas da ordem alfabética. Exemplos de categorias como essas são as que se seguem:created with... ("criado com..."), animated ("animado") e valid ("válido").

A árvore de Categorias SVG[edit]

O ramo principal é Categoria SVG, divisão da Categoria Imagens, o qual é divisão da Categoria Tipos de Media.

Acerca das subcategorias temáticas, é desnecessário reconstruir a completa árvore hierárquica da Categoria Tópicos. Normalmente, basta escolher aquele mais útil. Por exemplo, a Categoria Cores de SVG contém todos os SVGs da Categoria Cores, sendo inútil construir a Categoria SVG – vermelho, Categoria SVG – azul e por aí fora. Talvez algumas subcategorias se tornem úteis no futuro, mas não se desfaça das hierarquias existentes e não inclua um ficheiro SVG apenas numa categoria SVG: as categorias servem para que as várias formas de media sejam encontradas, não escondidas. Não "sobre-categorize", não o coloque em cada uma das divisões para que o objecto seja mais facilmente encontrado, mas talvez pôr um ficheiro SVG com uma caixa preta nas categorias Cores de SVG e Preto.

Ver Categorias do Commons para informação geral.

Nomenclatura de Categorias[edit]

Por agora (Maio 2008), não existe nomenclatura específica, para além das categorias terem de começar com "SVG ".

Etiquetando SVGs[edit]

Ver Categoria Predefinições de Marcadores de SVG para todos os marcadores disponíveis

Nota: Ao adicionar etiquetas do programa utilizado ou do tipo de ficheiro, está a categorizar automaticamente o ficheiro que etiquetou. Por exemplo, ao adicionar a etiqueta {{created with Adobe Illustrator}} está a adicionar o ficheiro à Categoria Criado com Adobe Illustrator.

Etiquetas do programa SVG[edit]

Etiquetas para o programa usado para a criação do ficheiro (Categoria SVGs por Programa Usado):
Adobe Illustrator Icon (CS6).svg
This vector graphics image was created with Adobe Illustrator.
Corel logo.svg
This vector graphics image was created with CorelDRAW
Dia.svg
This diagram or document was created with Dia.
  • Xfig: etiqueta {{Fig2SVG}}, sem categoria (Janeiro 2010)
Gnome-mime-image-x-xfig.png
This vector graphic was created with Xfig and a Fig-to-SVG conversion tool
Lissajous small.svg
This image was created with gnuplot.
Ver também etiqueta {{Inkscape-hand}} na Categoria SVGs Codificados Manualmente
Inkscape Logo.svg
This vector image was created with Inkscape.
OpenOffice.org 2 icon.svg
This file was created with OpenOffice.org
Sodipodi-logo squirrel.svg
This vector image was created with Sodipodi-Inkscape.
Scribus logo.svg
This image was created with Scribus.
Ver secção Software para uma lista de programas

Etiquetas de tipos de ficheiro SVG[edit]

Para utilizar elementos de outras imagens SVG disponíveis no Commons, agradece-se o uso da etiqueta {{attribSVG}} – ver Categoria Imagens Vectorizadas Utilizando Elementos de Outras Imagens Vectorizadas

SVG in SVG.svg This vector image includes elements that have been taken or adapted from this: [[:File:|]].

Todos os SVGs validados deverão possuir a etiqueta {{validSVG}}, o que irá organizar a imagem na Categoria SVG Validado. Agradece-se que o ficheiro não seja categorizado directamente.

Para animações pode ser usada a etiqueta {{animated SVG}}

Runner-animated-svg.svg This image is an animated SVG file. The animation uses SMIL. The .png preview above created by RSVG is not animated and may be incomplete or incorrect. To see an animation run, open it in an SVG animation capable browser or viewer, such as Opera (8+), Safari (4+), Chrome (2+), or Firefox (4+). Internet Explorer (9+) supports SVG, but not SMIL. Other SVG animations can be found at Category:Animated SVG.

العربية | Boarisch | català | Deutsch | Deutsch (Sie-Form)‎ | English | español | فارسی | suomi | français | עברית | हिन्दी | magyar | Հայերեն | íslenska | italiano | 日本語 | lietuvių | македонски | മലയാളം | Plattdüütsch | Nederlands | occitan | português | português do Brasil | русский | українська | 中文 | 中文(简体)‎ | 中文(繁體)‎ | +/−


De momento, SVGs que contenham JavaScript não podem ser carregados mas a seguinte predefinição antecipa tal possibilidade: etiqueta {{scripted SVG}}

Cog-scripted-svg.svg This is a scripted SVG file (it contains JavaScript). The preview above may be incomplete or incorrect. To use the interactive possibilities open it in your browser.

العربية | Deutsch | Deutsch (Sie-Form)‎ | English | فارسی | magyar | italiano | македонски | Nederlands | polski | português | русский | 中文(台灣)‎ | +/−

Etiquetas de Conversão de SVG[edit]

Se houver imagens que deveriam ser vectorizadas -- especialmente diagramas, gráficos (charts e graphs) e alguns desenhos -- distinga-os com a etiqueta {{convert to SVG}} (traduzindo: converter para SVG)

Casos especiais: Para notação musical usar {{convertToSVG-MN}} e para ícones Nuvola {{N2+SVG}}

Quanto aos SVGs que usam imagens bitmap denegrindo a sua qualidade, use a etiqueta {{badSVG}} e por imagens que já foram convertidas a SVG, use a etiqueta {{vector version available|Nome do Ficheiro.svg}}

SVGs no MediaWiki[edit]

Como os SVGs funcionam no MediaWiki[edit]

Quando um ficheiro SVG é carregado no Commons (ou em qualquer outro projecto wiki do MediaWiki), o programa automaticamente reproduz miniaturas em PNG da imagem original, incrustadas nos artigos e na página de descrição. Portanto, ao gravar a imagem (normalmente clique-direito na imagem), obter-se-à a versão PNG da imagem. Para descarregar o ficheiro SVG é preciso gravar o endereço de ligação (link) da imagem em vez da imagem em si. Isto funciona apenas na página de descrição da imagem, não na miniatura da página de categoria.

O MediaWiki usa o rsvg (página em inglês) para converter SVGs para PNGs (renderização de SVG), por isso é aconselhável verificar o ficheiro com esse programa antes de carregá-lo. O visualizador de rsvg (página em inglês) pode ser usado em sistemas UNIX para prever como os ficheiros SVG irão parecer quando renderizados pelo MediaWiki.

Ver a página de suporte a imagens SVG (página em inglês) para mais informações.

Alterando a dimensão dos SVGs pelo MediaWiki[edit]

O significado disto? Digamos que alguém pretendia produzir uma maior versão do seu SVG para mapas detalhados ou para uso num programa de bitmap como o gimp ou para imprimir um carácter por página ou algo parecido. É necessário forçar o MediaWiki a produzir uma grande "miniatura" PNG utilizando

http://commons.wikimedia.org/w/thumb.php?f=Foo.svg&w=1000 teste

ou através de algo do tipo [[Image:Foo.svg|1000px]] na página de testes ou na página de discussão do utilizador ou noutro sítio sem importância. Imprimir este PNG gigante vai acabar por ter um muito melhor aspecto do que aumentar o tamanho de uma miniatura! Claro que, é possível a utilização de programas como o Inkscape para esse tipo de coisas, mas por vezes a imagem no navegador não é a mesma que no programa (pode aparecer fundo preto, troca de fontes e por aí fora).

Questões frequentemente colocadas[edit]

Porque é que a minha imagem não renderiza?
Header text
Example
Isto poderá dever-se a diversas razões, sendo a mais comum a restrição de acesso a um ficheiro externo (a renderização é abortada logo que o carregador tentar procurar este outro ficheiro). Para resolver este problema, no seu editor, é necessário certificar-se de remover quaisquer referências a outros ficheiros antes de gravar a versão final. Caso seja necessário usar bitmaps, é possível a utilização da função do Inkscape para embutir as imagens no ficheiro (Effects Menu -> Images -> Embed All Images -- tradução à letra: Menu de Efeitos -> Imagens -> Embutir Todas as Imagens). Ver também SVG ("Plain SVG"), SVG comprimido, especificações gerais acima.
Onde posso arranjar mais ajuda no que diz respeito a imagens SVG?
Tente Commons: Laboratório Gráfico (página em inglês) se tiver problemas com uma imagem individual. Commons: Gráficos na esplanada (página em inglês) pode ser útil para a discussão tanto de SVGs como de outro tipo de imagens. Normalmente, entusiastas por SVGs circundarão nessas páginas e terão muito prazer em dar uma mão.
Há um limite máximo para uma imagem SVG?
O tamanho absoluto do documento não tem muito interesse, já que isso só tem importância quando o ficheiro é visto isoladamente. O tamanho do ficheiro não depende da dimensão do documento em si! A imagem pode ser esticada ou comprimida tanto quanto o utilizador deseje, sem denegrir a qualidade ou o tamanho do ficheiro. Pois bem, a largura recomendada da imagem é 600px. Quando o utilizador visualiza a imagem no seu tamanho real, uma largura de 600-800px proporciona-lhe uma boa vista de perto, sem que este se incomode a aumentar ou a diminuir o zoom.
Como se muda o tamanho do documento no Inkscape?
O tamanho do documento pré-definido começa com uma página A4. Para aumentar ou diminuir este espaço, crie um rectângulo com as dimensões desejáveis e seleccione-o com a ferramenta da seta (arrow tool). De seguida, vá a File -> Document Properties (em português, Ficheiro -> Propriedades do Documento) e, sob Custom Size (Tamanho Preferido), escolha Fit Page to Selection (Ajustar Página à Selecção) e carregue OK. Agora pode remover o rectângulo criado e mover ou redimensionar os outros objectos de modo a adaptarem-se ao espaço que acabou de criar.
O meu texto aparece como pequenos blocos ou nem sequer aparece depois de carregar a imagem no Commons.
Se usa "Flowed Text" (Texto Fluído) no Inkscape, este irá ser renderizado como um rectângulo preto. Caixas de "Flowed Text" são criadas quando se carrega e arrasta para fazer uma caixa de texto. Para evitar isto, carregue apenas uma vez para posicionar o seu cursor e depois escreva o seu texto. Para converter uma caixa de "Flowed Text" para uma caixa de texto normal, vá ao menu Text (Texto) e escolha Convert to Text (Converter para Texto).
Se ainda assim não funcionar, é de notar que algumas funcionalidades de texto do Inkscape não são suportadas pelo renderizador do MediaWiki, tal como "text-on-path" (texto sobre vector). Se mesmo sem usar "Flowed Text" ocorrer algum problema, converta o texto para vectores. Para isso, vá a Path -> Object to Path (Vector -> Objecto para Vector). Resultado: o texto será convertido a vectores. Grave como "Plain SVG" (SVG Puro) e tente carregar de novo o ficheiro.
As minhas linhas tracejadas/vectoriais (com setas) aparecem como pequenos blocos ou nem sequer aparecem depois de carregar a imagem no Commons.
Algumas funcionalidades de linhas do Inkscape não são suportadas pelo renderizador do MediaWiki. Seleccione os tais objectos conflituosos e vá a Path>Stroke to Path. Isto irá converter as linhas a vectores. Grave como "Plain SVG" (SVG Puro) e tente carregar de novo o ficheiro.
Como me livro do fundo transparente?
É mesmo necessário? Normalmente não. O renderizador do MediaWiki converterá o ficheiro SVG a PNG com um fundo transparente para visualização (ou um fundo branco caso o navegador não suporte fundos transparentes de ficheiros PNG). Aqueles navegadores que suportam a transparência em ficheiros SVG vão mostrar a cor de fundo pela imagem, branco! Deixar a imagem de fundo transparente ajuda futuros editores e permite que a imagem seja visualizada com outras cores de fundo. No entanto, se a imagem precisa mesmo de um fundo com uma cor específica, crie um rectângulo do tamanho da imagem, colore-o com uma cor a seu gosto e vá a Object -> Lower to Bottom (Objecto -> Enviar para Trás). Grave a imagem e desfrute da cor de fundo!
As minhas fontes não estão a ser renderizadas correctamente. Que fontes são suportadas pelo renderizador do site?
Ver lista de fontes para SVGs (página em inglês).
Estou a desenhar uma bandeira (ou outra insígnia) e isto pergunta por cores Pantone ou CMYK. Que faço?
Primeiro, logo que encontre as palavras Pantone ou CMYK, procure por algo chamado RGB. As imagens do Wikimedia Commons são extensivamente usadas nos projectos Wikimedia (como a Wikipédia) e são desenhadas para uso nos monitores de computador. Se encontrar as cores RGB, use-as em vez das outras. Senão, é possível converter as cores usando o selector de cores do próprio programa ou, no caso do Pantone, Color Finder (Descobridor de Cores), do qual se pode extrair valores de RGB por um código de cor.

Software[edit]

Muitos programas suportam ficheiros SVG. Pode tentar um dos recomendados mais abaixo, apesar de muitos outros também fazerem o trabalho. Alguns são grátis e outros não.

Como um SVG é apenas uma especificação XML, é possível escrever um num editor de texto. De facto, muitas imagens SVGs são escritas em editores de texto. Um editor de texto que possa realçar a sintaxe ajuda bastante.

Ver a secção Etiquetas do Programa SVG para informação acerca do programa, onde foi criado o ficheiro SVG e dicas específicas de como o criar.

Renderização[edit]

  • rsvg, programa usado pelo MediaWiki
  • O visualizador de rsvg pode ser usado em sistemas UNIX para prever como serão os SVGs após renderização pelo MediaWiki
  • Os navegadores Firefox 2.0, Konqueror (da KDE) e Opera permitem a visualização de SVG por defeito.

Editores de SVG[edit]

  • Um ficheiro SVG pode ser editado por um qualquer editor de texto, uma vez que normalmente é apenas texto puro do tipo XML. Um editor que possa realçar a sintaxe da linguagem auxilia bastante.
  • Inkscape: Uma aplicação grátis de código aberto para edição gráfica de ficheiros SVG. Disponível para os sistemas Windows, Mac OS X e Linux.
  • Sodipodi: Igualmente para edição gráfica de SVGs, disponível para Windows e Linux. O Inkscape baseia-se no engenho do Sodipodi.
  • OpenOffice.org/StarOffice Draw: Um programa gratuito de código aberto para desenhos que faz parte dos programas do Open Office. Tem a possibilidade de exportar para SVG e de os ler com um plugin de SVG
  • Dia: Programa grátis de código aberto para a criação de diagramas. Com opção para exportação de SVGs. Corre em Windows, Mac OS X e sistemas Unix. (Actualmente com alguns problemas no exportador de SVG -- Maio 2008)
  • Adobe Illustrator
  • CorelDraw

Aplicações específicas[edit]

  • Graphviz: Um programa de código aberto que permite esquematização automática de um diagrama.
  • BKchem: Um programa gratuito para desenhar estruturas químicas em SVG. Corre em Windows, Mac OS X e sistemas Unix.

Avaliadores[edit]

Conversores[edit]

From raster formats (bitmaps)
  • Most SVG-editors include a Raster-to-Vector-converter (Tracer)
  • Delineate, a free tracer, it is a Java-based interface for Potrace and Autotrace. Potrace is also implemented into Inkscape (>Path >Trace Bitmap)
  • Vector magic: An online free raster to svg converter.
From other vector formats
  • FreeSVG can convert PDFs to SVG via a web interface
  • Scribus (with GhostScript) can import EPS (Encapsulated PostScript) files and export them to SVG.
  • pdf2svg from PDFTron

Ver também[edit]

Wikimedia-logo-meta.svg
Meta has a page about this at:

Technical:

Aplicação específica:

Manutenção:

Links Externos[edit]