Início » Desenvolvimento » Sobre SVG

Sobre SVG

Simplesmente porque o formato de arquivo vetorial SVG é o formato principal do Inkscape, compreender as noções básicas de SVG será útil na contribuição para o desenvolvimento do Inkscape. Por exemplo, para fazer suas próprias extensões, você vai precisar de alguma experiência em navegação acima e abaixo na árvore XML - e se você quer trabalhar em algumas das principais funções do Inkscape, você precisa mergulhar profundamente na matemática das matrizes e curvas de Bézier.

Nós colocamos aqui algumas informações coletadas que esperamos que facilite o seu aprendizado.

O que é SVG?

SVG (acrônimo para Gráficos Vetoriais Escaláveis, do inglês "Scalable Vector Graphics") é um formato de arquivo livre, aberto e padronizado para gráficos vetoriais. É mantido e desenvolvido pelo consórcio W3C (World Wide Web Consortium), a principal organização de padrões internacionais para a web.

É baseado em XML (Extensible Markup Language), também um formato padrão do consórcio W3C, que é uma linguagem de marcação genérica desenvolvida para representar dados arbitrários em formato legível para humanos. Se você já usou (X)HTML para criar um site, você já conhece os principais elementos estruturais: uma estrutura de árvore, marcadores, elementos e atributos.

O formato de arquivo SVG usa essas estruturas para representar dados visuais. As tags, elementos e atributos que podem ser utilizados e compreendidos por gráficos vetoriais, edição e visualização de programas são determinados na especificação SVG. A especificação válida atualmente (março de 2015) é a SVG 1.1, com SVG 2.0 à caminho, e muitos dos novos recursos já estão implementados no Inkscape e em muitos visualizadores (como navegadores da web).

As características do SVG 1.1 incluem caminhos, formas básicas (como círculos e polígonos), texto, preenchimento, contornos e marcadores, cor, gradientes e padrões, recorte, mascaramento e composição, efeitos de filtro, interatividade, vínculamento, scripts, animação, fontes e metadados. O consórcio W3C também faz questão de manter a retrocompatibilidade e extensibilidade do formato.

Como exemplo para demonstrar o princípio básico, dê uma olhada nisso:

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="200">
  <rect x="50" y="50" width="200" height="100" style="fill:red"/>
</svg>

Quando processado, será parecido com isto (abra a página no modo de visualização de código-fonte HTML do seu navegador para ver como ele está confortavelmente incorporado ao HTML):

Como um exemplo mais complexo, aqui está um trecho de logotipo em SVG, que mostra algumas das outras características do Inkscape. Note como outros dados não-gráficos, como o autor ou a licença do arquivo podem ser facilmente incluídas sem alterar como se visualiza a imagem:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   id="svg2"
   height="128"
   width="128"
   version="1.0">
  <title
     id="title7387">Inkscape Logo</title>
  <defs
     id="defs4">
    <clipPath
       id="clipoutline1"
       clipPathUnits="userSpaceOnUse">
      <path
         d="M 54.1,12.5 L 12.9,54.7 C -2.7,70.3 23,69 32.3,74.9 C 36.6,77.7 18.5,81.3 22.2,85 C 25.8,88.7 43.9,92.1 
            47.5,95.7 C 51.1,99.4 40.2,103.3 43.8,107 C 47.3,110.7 55.7, 107.2 57.2,115.6 C 58.3,121.8 72.6,118.7 
            79,113.4 C 83,110 72.1,110 75.7,106.3 C 84.7,97.2 92.7,102.2 96,93.8 C 97.8,89.3 82.4,86.1 86.5,83.2 C 
            96.3,76.3 132.3,72.8 115.7,56.2 L 73,12.5 C 67.7,7.5 59,7.5 54.1,12.5 z M 44.2,77.2 C 45.1,77.2 75,81.2 
            63.5,84.3 C 59.1,85.5 38.9,77.2 44.2,77.2 z M 101.4,93.8 C 101.4,95.9 117.7,97.1 116.8,93.3 C 115.5,86.9 
            103.2,87.4 101.4,93.8 z M 31.9,104.9 C 35.6,108.1 41.2,104.2 43,99.7 C 39.4,95 26.1,100 31.9,104.9 z M 
            99.4,98.2 C 94.8,102.4 100.2,106.8 104.7,103.9 C 105.9,103.1 104.6,99.2 99.4,98.2 z "
         id="outline1" />
    </clipPath>
    <filter
       id="filter6017"
       color-interpolation-filters="sRGB">
      <feGaussianBlur
         id="feGaussianBlur6019"
         stdDeviation="0.80546496" />
    </filter>
    <linearGradient
       y2="40"
       x2="60"
       y1="20"
       x1="82.11859"
       gradientUnits="userSpaceOnUse"
       id="linearGradient9175"
       xlink:href="#linearGradient5785" />
  </defs>
  ...
  <metadata
     id="metadata49">
    <rdf:RDF>
      <cc:Work
         rdf:about="etiquette-icon">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:creator>
          <cc:Agent>
            <dc:title>Andy Fitzsimon</dc:title>
          </cc:Agent>
        </dc:creator>
        <dc:rights>
          <cc:Agent>
            <dc:title>Andrew Michael Fitzsimon</dc:title>
          </cc:Agent>
        </dc:rights>        
        ...
    </rdf:RDF>
  </metadata> 
  ...
  <g
     id="g9139"
     transform="matrix(0.9965784,0,0,0.9962666,0.2205497,-1.598221)"
     style="display:inline;enable-background:new">
    <g
       id="g6035"
       transform="translate(3.68968e-7,0.4883067)"
       style="opacity:0.7832512">
      <path
         id="path5987"
         d="m 54.1,12.98831 -41.2,42.2 c -15.6,15.6 10.1,14.3 19.4,20.2 4.3,2.8 -13.8,6.4 -10.1,10.1 3.6,3.7 21.7,7.1 
            25.3,10.7 3.6,3.69999 -7.3,7.59999 -3.7,11.29999 3.5,3.7 11.9, 0.2 13.4,8.6 1.1,6.2 15.4,3.1 21.8,-2.2 4,
            -3.4 -6.9,-3.4 -3.3,-7.1 9,-9.09999 17, -4.1 20.3,-12.49999 1.8,-4.5 -13.6,-7.7 -9.5,-10.6 9.8,-6.9 
            45.8,-10.4 29.2,-27 l -42.7,-43.7 c -5.3,-5.000003 -14,-5.000003 -18.9,0 z m 47.3,81.3 c 0,2.1 16.3,3.3 
            15.4,-0.5 -1.3,-6.4 -13.6,-5.9 -15.4,0.5 z M 31.9,105.3883 c 3.7,3.2 9.3,-0.7 11.1, -5.2 -3.6,-4.69999 
            -16.9,0.3 -11.1,5.2 z m 67.5,-6.69999 c -4.6,4.19999 0.8,8.59999 5.3,5.69999 1.2,-0.8 -0.1,-4.7 -5.3,
            -5.69999 z"
         style="fill:#000000;fill-opacity:1;filter:url(#filter6017)" />
      <path
         style="opacity:0.5763547;fill:#000000;fill-opacity:1;filter:url(#filter6031)"
         d="m 54.1,13.96492 -41.2,42.2 c -15.6,15.6 10.1,14.3 19.4,20.2 4.3,2.8 -13.8,6.4 -10.1,
         ...         
         id="path6021" />
    </g>
  ...
  </g>
</svg>

Quando renderizado, o logotipo ficará assim:

Por que o Inkscape usa SVG?

SVG é um formato legível que pode ser editado usando apenas um editor de textos, pode ser pesquisado e compactado, ele pode ser criado automaticamente e manipulado, misturado em (X)HTML para ser parte integrante de uma página web, que pode ser animado, pode ser usado para criar ambientes de área de trabalho e claro, obras de arte fantásticas.

Além disso, o SVG permite uma fácil incorporação de metadados do editor. O programa Inkscape é um usuário mestre desse recurso, usando para armazenar os dados brutos que entram em coisas como caminhos em forma de estrela e para salvar corretamente no arquivo suas próprias configurações específicas dentro dele.

Mas acima de tudo e além de ser usuário e desenvolvedor amigável e versátil, é um padrão aberto, que pode ser usado como-é em muitas aplicações diferentes. A conformidade com o padrão foi uma das razões para a formação do projeto Inkscape (ver FAQ).

O projeto Inkscape não usa apenas SVG como seu formato de arquivo nativo, também participa no desenvolvimento e refinamento das características do SVG delegando um representante para o Grupo de Trabalho SVG do W3C.

Como o Inkscape implementa o SVG?

O Inkscape orgulha-se de ser um editor totalmente compatível com o padrão SVG. A partir de março de 2015, ele ainda suporta renderização de propriedades SVG que ainda não são oficialmente partes da norma, mas atingiram um estado estável no projeto do Grupo de Trabalho SVG para SVG 2.0. Estas incluem padrões hachurados, a ordem de pintura de preenchimento/contorno e modos de mesclagem CSS. Atualmente, esses ainda não são editáveis através do GUI, mas podem ser alterados editando os atributos no editor XML, é claro.

Malhas de gradientes também já estão implementados na versão de desenvolvimento do Inkscape, mas ainda não estão disponíveis na versão 0.91. O processo de padronização para este recurso foi estabilizado recentemente e ainda há muito trabalho a ser feito na interface do usuário para facilitar a edição confortável de malha de gradientes.

O trabalho já começou com a implementação do texto em forma baseado em CSS.

Embora todas estas funcionalidades tornam o Inkscape quase um reflexo completo do padrão SVG elaborado atualmente, também existem algumas características que estão 'desaparecendo' por várias razões. O Inkscape não implementa o filtro de moisaicos, ele não possui nenhum tipo de animação, nem existe trabalho em andamento para tornar o Inkscape um editor para animações SVG, pois exigiria uma quantidade muito grande de trabalho sobre a GUI e as funções de animação subjacentes. As fontes SVG, que fazem parte da especificação SVG 1.1, foram ignoradas no rascunho da especificação SVG 2.0. Elas serão substituídas por SVG dentro das fontes OpenType.

A única coisa no Inkscape que atualmente não é compatível com o padrão é texto fluido. Isso ocorre porque o processo de padronização para SVG 1.2, no qual o texto fluido deveria ser incluído, foi interrompido. Mas até então, o recurso já estava na aplicação, e foi útil para muitos usuários. Como resultado, os desenvolvedores do Inkscape não retirarão o recurso novamente, mas sim mantê-lo, para que as pessoas possam editar seus textos dinamicamente através do Inkscape.

Aprender SVG

Informação Técnica

Informações Gerais

  • SVG Básico, por David Dailey
  • Tópicos de SVG do blog de Peter Collingridge's
  • Aprender SVG - Livro de texto com abordagem avançada sobre SVG por Jon Frost, Stefan Goessner e Michel Hirtzler, livremente disponível para leitura on-line. Devido à sua idade, nem todas as técnicas apresentadas podem ser válidas, mas as explicações de princípios básicos e propriedades SVG ainda são muito úteis.
  • Blog de Tavmjong Bah's, que dá muita informação de fundo sobre o desenvolvimento da especificação SVG (entre outros conteúdos relacionados ao SVG e Inkscape)

Tutoriais

Esta é apenas uma pequena seleção de todos os tutoriais que estão disponíveis na internet:

Mais tutoriais podem ser encontrados usando seu mecanismo de busca favorito.

O Inkscape é Gratuito e de Código Aberto licenciado sob a GPL.