Criando arquivos interativos com o Inkscape



SVG é um dialeto do XML, criado e mantido pela W3C que descreve de forma vetorial desenhos e gráficos bidimensionais, de forma estática, dinâmica ou animada.

Graças ao SVG, usado nativiamente no Inkscape, podemos com o auxilio de Extensões ou com um pouco mais de conhecimento de forma manual, criar documentos interativos que podem ser exibidos em navegadores web.

No arquivo de exemplo temos uma camiseta modelo e queremos dar ao nosso usuário a possibilidade de ver essa mesma camiseta em cores diferentes. Temos ao lado então 3 opções de cores para que o usuário escolha.


O layout apresentando nesse vídeo é puramente didático, e o código SVG gerado pode ser incluído em seu site ou aplicação web.



Ajuste a página para 1024x768 e lembre-se de que apenas os elementos que estão na página serão visualizados no navegador. Elementos de desenho fora da página não vão aparecer no browser.

O Inkscape assim como diversos outros softwares, usa largamente o Python e depende dele para que tudo funcione. No caso da Extensão que vamos usar ela depende da biblioteca python-xml. De qualquer forma caso a Extensão não funcione ela sempre retorna uma mensagem de erro.

A Extensão é muito simples de usar, basta selecionar todos os desenhos envolvidos, selecionando por último o alvo da mudança de propriedades, no caso o desenho da camiseta.

Agora clique no Menu Extensões -> Web -> Javascript -> e por fim em Transmitir Atributos.

No diálogo temos várias opções do configurações, para este exemplo observe se as opções estão como na tela:

Atributos a transmitir: fill
Quando transmitir: ao clicar
Compatibilidade com pré-visualização: Executar depois
Origem e destino da transmissão: Todos os selecionados transmitem para o último item.


Feito isso clique no botão aplicar.

Salve o documento, no seu navegador carregue o arquivo .SVG salvo e pronto, seu desenho aparece na tela e ao clicar em uma das cores ela é transmitida para a camiseta.

Você pode editar o arquivo, mesmo depois de aplicar a Extensão, após salvar basta atualizar o navegador para ver as mudanças.


Caso precise ou queira editar o código SVG no Inkscape, expanda a barra de comandos clicando na seta na base da tela e na opção Editor de xml, agora é só navegar pelos nós do documento. Outra opção é abrir o documento SVG diretamente no seu editor de códigos favorito.


Existem mais Extensões e essa extensão pode ser usada de formas variadas, experimente.






Criando calendários com o Inkscape



Virada do ano chegando e uma das coisas mais comuns em trabalhos gráficos são os calendários, neste vídeo vamos ver como gerar um calendário e personalizá-lo usando o Inkscape.

A versão do Inkscape utilizada é a 0.91, acredito que seja a versão mais recente na maioria dos repositórios, no caso do Debian Jessie essa versão pode ser instalada via backports.





Em um novo arquivo clique no menu Extensões -> Renderizar -> Calendário, na caixa de diálogo Calendário vamos configurar o nosso exemplo.

O Diálogo Calendário é dividido em 4 abas, configurações, arranjo, cores e localização.
Em Configurações vamos definir o ano e o mês do nosso caléndário, a opção 0 habilita a criação de todos os meses do ano correspondente. Você ainda pode definir como preencher os dias vazios do mês, se quer ou não exibir o número da semana no calendário, se decidir exibir o número da semana o sistema conta o ano todo e não separado por mês, totalizando 52 semanas em 2017, por fim em que dia a semana começa e quais dias são fim de semana.

Em Arranjo você pode escolher o número de meses por linha e a largura e altura de cada bloco do mês.


Cores trata de cada sessão do calendário como cor do ano, mês, fins de semana e dias da semana e por ai vai. Não existe uma opção de conta gotas aqui então você deve passar o código hexadecimal de cada cor, o ideal é montar uma paleta personalizada no arquivo e listar os código ao lado, para ganhar tempo, as cores também podem ser trabalhadas no final, depois que o calendário é gerado.


Em Localização você pode mudar os nomes dos meses do ano e dos dias da semana, abreviando ou escrevendo em outro idioma por exemplo. Fique atento a codificação do Char, no meu caso tive que mudar para UTF-8-All-Languages para que o gerador funcionasse.


Com o calendário gerado você pode desagrupar, observe que os meses também estão agrupado em blocos menores de nome do mês, dia da semana e dias então para editar você vai precisar desagrupá-los também.


A partir da ai você tem liberdade para deixar a criatividade agir e montar um bom calendário.


Clique aqui para assistir ao vídeo!!

Ferramenta Spray no Inkscape




A ferramenta Spray pulveriza um ou mais elementos selecionados na tela, sejam eles vetores ou bitmaps.


Ela possui 3 modos de operação:
  • O primeiro modo gera uma cópia individual de cada elemento selecionado;
  • A segunda gera um clone de cada elemento, assim se as propriedades da matriz mudarem os clones mudam;
  • E por último a ferramenta gera um caminho único com os elementos pulverizados.
Quando temos mais de um elemento a ser pulverizado e queremos utilizar o terceiro modo precisamos converter em caminho e fazer a união dos elementos e no caso de bitmaps a aplicação não gera o caminho.



Além dos modos podemos configurar o raio da aplicação, a quantidade de elementos aplicados, a rotação, a escala, a difusão e o foco dos objetos aplicados. Todas essas propriedades tem como referência o raio da aplicação.


Ao configurar o raio da aplicação estamos definindo o limite de ação do spray.

Já a quantidade de elementos aplicados vai controlar a intensidade da repetição.

Rotação e escala acrescentam variadade de posição e tamanho da aplicação.

A difusão assim como o foco ajudam a controlar a proximidade da aplicação em relação ao raio, quanto maior o valor mais afastado do raio a aplicação é feita.

Na foto da paisagem usamos o Spray para aplicar as folhas nos galhos. Segue abaixo o link das imagens.

Paisagem: https://pixabay.com/en/inside-mongolia-strange-tree-sunset-1585274/
Folha: https://pixabay.com/en/leaf-autumn-leaf-autumn-nature-1698984/

Para um melhor resultado o arquivo da folha teve a cor escurecida usando o recurso de curvas no menu cores do Gimp.


Selecionando a folha, clicamos na ferramenta Spray, escolhemos o primeiro modo de aplicação, ajustamos as opções da seguinta forma:
  • Largura: 14;
  • Quantidade: 50;
  • Rotação: 100;
  • Escala: 100;
  • Difusão: 50;
  • Foco: 50;
Depois de configurado, basta aplicar nas pontas do galho. 

Clique aqui para assistir ao vídeo!