Criar Arquivos SVG no Pencil Project

Como criar arquivos SVG no Pencil Project

Por em 07/09/2017

Ene Tutoriais Pencil Project

Como temos visto, o Pencil Project é um software que permite fazer os mais variados tipos de prototipagem. Apesar de citar com frequência os wireframes de sites em nossas videoaulas, é possível trabalhar layouts de aplicativos, fluxogramas, sistemas e etc. São inúmeras as possibilidades e, entre tantas, você também pode criar arquivos SVG utilizando o Pencil. Por isso, no post de hoje, veremos como criar arquivos SVG no Pencil Project.

O processo de criação de arquivos SVG no Pencil é extremamente simples, pois não é necessário fazer nenhum tipo de configuração do arquivo. Por isso, antes de vermos o processo, falaremos um pouco mais sobre o formato SVG e suas aplicações.

O formato SVG

O SVG é um formato aberto de arquivo do tipo vetorial capaz de ser interpretado tanto por softwares gráficos quanto por navegadores. O formato foi lançado em 2001 pela W3C em parceria com diversas grandes empresas da indústria de softwares, dessa forma, as empresas dariam suporte para o novo formato em seus produtos.

Como eu disse, o arquivo é do tipo vetorial, permitindo que ele seja redimensionado sem perda de qualidade. Isso acontece justamente porque todos os elementos inseridos no arquivo SVG são criados com base em cálculos matemáticos. Ou seja, ao redimensionar um arquivo, novos cálculos são feitos para que os elementos se ajustem da melhor maneira possível.

Comparação JPG x SVG

Comparação entre JPG x SVG

Quanto a interpretação do SVG por parte de navegadores se deve ao fato do arquivo ser baseado no uso de XML. O XML é uma linguagem de marcação bastante semelhante ao HTML, porém, com maior flexibilidade e capaz de armazenar dados.

Leia também »  Como criar teclas de atalho no Brackets

Vamos ao que interessa!

Bom, o processo para criar arquivos SVG no Pencil é extremamente simples. Veja como funciona:

  1. Após inserir os elementos desejados, clique no menu do software Botão Menu do Pencil Project  e selecione a opção Export ou utilize o atalho Ctrl + Shift + E;
  2. Na janela Export Document, selecione no campo Output type a opção Multi-layer vector graphics (SVG) e na seção Select Pages, selecione as páginas que deseja exportar;
  3. Feito isso, clique em Export;
  4. Escolha a pasta onde deseja exportar o arquivo e clique em Salvar;
  5. Após isso, seu arquivo SVG estará finalizado.

Após exportar o arquivo, teste abri-lo em um navegador da sua preferência e em um editor gráfico para ver se correu tudo bem com o processo de exportação.

Uma dica na hora de criar arquivos SVG é evitar utilizar imagens nos arquivos. Os SVGs têm como principal característica a possibilidade de serem redimensionados sem perda de qualidade. Porém, ao inserir uma imagem, você limita o redimensionamento do SVG.

E se quiser ver mais tutoriais como esse sobre o Pencil Project, assine o blog e receba todas as novidades por e-mail.

PUBLICIDADE